How to build a custom collapsible sidebar navigation with Angular 6

featured_image

Check out how to build a side navigation that fits perfectly into an admin layout or any dashboard page. We are going to create a simple collapsible sidenav that can be easily integrated into any Angular project that uses Bootstrap.

What we are going to build

Our goal is to create a collapsible sidenav. We want it to be hidden by default on smaller screens. You can see the component on the screenshot below:

Side nav screenshot

The final project directory tree:

project tree

Requirements

I try to keep the project up to date. Visit the releases list to keep track of the current versions of frameworks and libraries used.
  • Angular CLI – a command line interface tool that generates projects, components, modules, services.
    I’m working on:
  • The example app in this post uses the project available on my GitHub repo and described in the Enhance the presentation layer of your multi-layout Angular app post.
  • Bootstrap – version ^4.1.3.

Create a service

Generate the service for handling the menu toggle action:

The service function is simple, it has a single parameter – hideSideNav – and changes its state every time the function toggleSideNav() is called. See the following code:

Create components

Top bar with the toggler

Let’s start with the top bar to create an elegant and functional frame for our dashboard:

Replace the default content of the view with the following code:

I’m including here the <app-authorised-side-nav-toggler> component so we need to add it to the project as well:

And put this code in the template:

The toggler requires the AuthorisedSideNavService so we need to import it and inject to the component constructor:

To add those new components to the dashboard we need to include the top bar in our layout:

The sidenav

Create the sidebar:

The navigation also requires the AuthorisedSideNavService:

In the following code of the component template you can see how we are managing the visibility of the menu only by adding a conditional class to the template – the 'hidden' class:

Add the following styling rules:

On a smaller screen the sidenav is hidden by default, you can still toggle its visibility by clicking the button on the top nav:

Custom collapsible side navigation

The work done in this section is contained in the commit 9300c12c207ba6f53eddbe2424a6aa33b8d629f7.

Fix the tests

Remember to include @Component in tests for components that contain other element:

The work done in this section is contained in the commit abd35eaeb9f689c5a84d3964c18bad789f57f43a.

Photo by Alice Moore on StockSnap

One thought on “How to build a custom collapsible sidebar navigation with Angular 6

Leave a Reply

Your email address will not be published. Required fields are marked *