Sidebar plugin

This section describes how to create plugin with sidebar functionality.

In Nocto, plugin can be another item on the sidebar. To add it, your index.tsx of a plugin, needs follow the example structure:


import { ShoppingCart } from "@medusajs/icons"

export const sidebarPlugin = {
  id: "sidebar-plugin",
  sidebar: {
    path: "/sidebar-route"
    label: "My sidebar item",
    icon: ShoppingCart
  }
}

You are defining three parameters:

  • path - this parameter is the route where user will go when clicking on the item
  • label - this is the name which will be visible on the sidebar
  • icon - this parameter is the icon which will be rendered on the sidebar

Icon:

Please notice that icon is lazy loaded - it means that you are NOT defining it like <ShoppingCart/> but you are passing only the name, so ShoppingCart


Route:

The sidebar item is useless in practice if you won't define proper route handling (unless you are using some existing route). For creating a route, check Routes

Finally, you need to also define this plugin in nocto-config. Because existence of the plugin enables it, it is enough to put it only to sidebar section.

For instance, let's say you want to put it as the last item on the sidebar:

import { NoctoConfig } from "@rsc-labs/noctojs-plugin-system"
import {
  Sparkles,
} from "@medusajs/icons"

export const noctoConfig: NoctoConfig = {
  plugins: {
    "@login": {
      config: {
        title: "Welcome to Nocto",
        hint: "Sign in to access",
        mainIcon: Sparkles
      }
    },
    "@orders": {},
    "@order-detail": {},
    "@campaigns-routes": {},
    "@categories-routes": {},
    "@collections-routes": {},
    "@core-routes": {},
    "@customer-groups-routes": {},
    "@public-routes": {},
    "@reservations-routes": {},
    "@settings-routes": {}
  },
  sidebar: {
    "@orders": { order: 1 },
    "@products": { order: 2 },
    "@inventory": { order: 3 },
    "@customers": { order: 4 },
    "@promotions": { order: 5 },
    "@price-lists": { order: 6 },
    "sidebar-plugin": {order: 7 }
  }
}