Enoch Ndika

Documentation

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
Jsx
data.tsx
Jsx
Sidebar.tsx
Jsx
SidebarHeader.tsx
Jsx
SidebarItems.tsx
Jsx
Layout.tsx
Jsx
Overlay.tsx
Jsx
Provider.tsx
Jsx
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.

Jsx
data.tsx :

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

[ 
  {
    title: "Users",
    icon: <HomeIcon />,
    link: "/",
  },
  {
    title: "Medias",
    icon: <MediaIcon />,
    link: "/admin/medias",
  },
]
  • title : Label for the route
  • icon : icon used, imported fromicons folder or from your library
Jsx
Sidebar.tsx :

responsable of the sidebar.

compose SidebarHeader and SidebarItems components.

Jsx
SidebarHeader.tsx :

contains the logo displayed on top of the sidebar

Jsx
SidebarItems.tsx :

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

Jsx
Layout.tsx : contains theDashboardLayoutcomponent used as the layout of the application
Jsx
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
Jsx
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.
Jsx
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
style.module.css :

This style sheet is used to make the scrollbar invisible for the sidebar and to apply some filters.

Export

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

  • Add your routes in thedashboard/sidebar/data.tsxfile
  • Replace your layout by theDashboardLayoutcomponent

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