Remember State Of Collapsible Navigation

There is navigation out there that allows a user to collapse the navigation. This gives the user more screen real estate. If a user prefers the navigation to be collapsed, it would be annoying to revisit the app or website and have to collapse it again with each new visit. Let’s learn how to remember the state of collapsible navigation!

Navigation

For this example, we’ll be using Clarity’s Vertical Nav Angular component. It has an option for making it a collapsible navigation using the clrVerticalNavCollapsible input. We want to set this to true.

[clrVerticalNavCollapsible]="true"

Next, we’ll use the clrVerticalNavCollapsed input to define the collapsible state, which uses two-way binding. This allows components to share data between each other.

[(clrVerticalNavCollapsed)]="navCollapsed"

The collapsed state is being stored in a variable called navCollapsed. Let’s create that in our component that is using the vertical navigation. We’ll set it to false so that the navigation remains open when the application loads.

navCollapsed = false;

When a user collapses the navigation menu, the vertical nav component will emit that change, which our component is listening for through two way binding and update the navCollapsed value from false to true.

The menu will stay collapsed during the user’s session. However, when the user closes their session and returns to the app later, the navigation will be opened again. Let’s remember the state of the navigation for subsequent visits!

Local Storage

We want to store the state of the navigation when the user closes their session. Let’s make use of the browser’s local storage. It’s a simple key/value pair of data that has no expiration and will not be deleted when the user closes their browser.

Let’s create a function called saveNavState that will write the navigation state to local storage. Local storage values can only be strings. We could set the value to the string true or false, but we can also make use of JSON.stringify to make the boolean value a string.

saveNavState(): void {
  localStorage.setItem('navCollapsed', JSON.stringify(this.navCollapsed));
}

Now that we have a way to save the state, we need a way to call it when the user closes their session.

HostListener

Angular’s HostListener decorator provides a means of listening to DOM events where you can run a function when the event is triggered. We are interested in the window’s unload event and want to run the saveNavState function when that event is triggered.

import { HostListener } from '@angular/core';

@HostListener('window:unload')
onWindowUnload() {
  this.saveNavState();
}

The navigation state will now be saved when the user closes their session! All that is left to do is set the navigation state when the app first loads. Let’s set the navCollapsed value in ngOnInit. Remember that the local storage was saved as a string, but we want it to be a boolean value. We can use JSON.parse to convert it.

ngOnInit(): void {
  this.navCollapsed = JSON.parse(localStorage.getItem('navCollapsed'));
}

---

Visit our website at https://nightwolf.dev and follow us on Facebook and Twitter!