Remember State Of Collapsible Navigation
Tags: angular, javascript, webdev
Published: 2021-04-06 21:39:00

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](https://clarity.design/angular-components/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.

```html
[clrVerticalNavCollapsible]="true"
```

Next, we’ll use the **clrVerticalNavCollapsed** input to define the collapsible state, which uses [two-way binding](https://angular.io/guide/two-way-binding). This allows components to share data between each other.

```html
[(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.

```javascript
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](https://www.w3schools.com/jsref/prop_win_localstorage.asp). 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](https://www.w3schools.com/js/js_json_stringify.asp) to make the boolean value a string.

```javascript
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](https://angular.io/api/core/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.

```javascript
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](https://www.w3schools.com/js/js_json_parse.asp) to convert it.

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


---
**Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!**