How to build a custom collapsible sidebar navigation with Angular 6

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:

The final project directory 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:
  
  $ ng --version Angular CLI: 6.0.8 Node: 8.11.3 OS: linux x64 Angular: 6.1.1

  1 2 3 4 5 6

  $ ng --version Angular CLI: 6.0.8 Node: 8.11.3 OS: linux x64 Angular: 6.1.1

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

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