Features

• Support of the active route (styled by default).
• Fully customizable and without external dependencies.
• No vendor lock-in, you can export it and integrate it in your project.
• Sidebar can be aligned left or right according to your preferences (on mobile).

File Structure

dashboard

sidebar

icons

data.tsx

Collapse.tsx

Sidebar.tsx

SidebarHeader.tsx

SidebarItems.tsx

Layout.tsx

Overlay.tsx

Provider.tsx

TopBar.tsx

style.module.css

File Structure explained

sidebar

icons :

Icons used for each sidebar-item. You don't need this folder if you can provide your own icons.

data.tsx :

It's in this file that you will add routes for each sidebar-item. it is an array of objects.

[ 
  {
    section: "Documents",
    icon: <DocumentIcon />,
    content: [
      {
        title: "Taxes",
        link: "/documents/taxes",
      },
      {
        title: "Travel",
        link: "/documents/travel",
      },
      {
        title: "Insurance",
        link: "/documents/insurance",
      },
    ],
  },
]

• section : Name of the section
• title : Label for the route
• icon : icon used, imported fromicons folder or from your library

Collapse.tsx :

used to toggle each sidebar section

Sidebar.tsx :

responsable of the sidebar.

compose SidebarHeader and SidebarItems components.

SidebarHeader.tsx :

contains the logo displayed on top of the sidebar

SidebarItems.tsx :

automatically generates each sidebar-item according to your routes defined indata.tsx

Layout.tsx : contains theDashboardLayoutcomponent used as the layout of the application

Overlay.tsx : displays an overlay that will only be visible on small screens to emphasize the focus on sidebar when it is open. it's also used to close sidebar on click outside

Provider.tsx : contains the DashboardProvider component where all the dashboard logic is placed. this will then be reused in other components. it handles opening and closing of the sidebar.

TopBar.tsx :You can customize it or replace it with your own TopBar but don't forget to add a button to toggle sidebar on mobile

Export

As there is no vendor lock-in, if you already have a dashboard, you can copy thedashboardfolder into your project

Customization

You can customize everything according to your preferences if it doesn't suit you. What we have done is just provide a solid structure for better scalability and readability of the code.

The sidebar scrollbar is hidden by default but you can still scroll with the keyboards if you have several sidebar-items. You can always change its style in thestyle.module.cssfile.

In the dashboard/Layout.tsx file,Sidebar component has as propmobileOrientation, which indicates the orientation of the sidebar on small devices (viewport < 1024px).

That prop can have two possible values :

• start : sidebar will be aligned to the left
• end : sidebar will be aligned to the right