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

icons

sidebar

sidebar-header

sidebar-item

sidebar-items

layout

overlay

top-bar

dashboard.service.ts

File Structure explained

icons :

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

sidebar

sidebar :

responsable of the sidebar.

compose sidebar-header and sidebar-items components.

sidebar-header:

contains the logo displayed on top of the sidebar

sidebar-item :

represents each sidebar-item of the sidebar.

sidebar-items :

compose many sidebar-item components

layout : contains the dashboard-layout component used as the layout of the application

overlay : 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

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

dashboard.service.ts :

where all states for handling opening and closing sidebar are defined

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.

In the dashboard-layout component, sidebar component has as input mobileOrientation, 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

Documentation

Features

File Structure

File Structure explained

Customization