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:
|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:
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:
Create the sidebar:
The navigation also requires the
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
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.