Documentation

Features

File Structure

dashboard
icons
sidebar
collapse
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
collapse :

used to toggle each sidebar section

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 :