1. /
  2. Latest Articles
  3. /
  4. Code
  5. /
  6. TypeScript
  7. /
  8. Responsive Multi-Level Angular Material Menu

Viewed 338 times

Responsive Multi-Level Angular Material Menu

This project gives you an application template that includes a responsive, multi-level Angular Material menu.

 

You can download the code or see the code at GitHub.

This project was built using the Starter Application HERE as the starting point.

Layout of the Application

The layout of the header, main content, and the footer is in app.component.html:

The layout is just a CSS grid defined in app.component.scss:

The <main> element is the center part that contains the menu and the content, it routes to main.component.html, which has the mat-sidenav-container that has the menu on the left and the content on the right:

 

Adding Responsiveness

We want to show the menu when the screen width is above 768px, and hide the menu if otherwise.  This can be done by using the BreakpointObserver to detect the screen size:

When the showSideNav flag is true, we show the menu by setting [opened] to true and [mode] to ‘side’.  Otherwise [opened] is false and [mode] is ‘over’:

When the screen size is under 768px, we need to provide a button that the user can click on to open the menu.  The button is declared in header.component.html:

We hide the button if the screen width exceeds 768px, which is the $screen-size-mid sass variable:

When the button is clicked, we call the service method menuService.toggleMenu():

The MenuService use the rxjs Subject without any return type since it just need to detect when the button is clicked:

The main.component detects when the menu should appear by subscribing to the service.  When the event is received, it calls the toggle() method of the MatSidenav which shows or hides the menu:

 

Selecting Menu Item

When a menu item is clicked, we want to 1) hide the menu if the screen width is smaller than 768px, and 2) give visual indication on which menu item was clicked.

To hide the menu if the screen is small, we can just call the service to toggle the menu:

To give visual indication on which menu item was clicked, we use the variable selectedMenuItem to track and change the css class of the menu item:

 

Adding SubMenu

The subMenu can be added by adding a div and display/hide using CSS transform.  For example, using MenuX as a menu item that can expand a submenu, we can declare below:

The showMenuX is just a variable we use to track if the submenu should be displayed.  Every click of the item will toggle the show or hide of the submenu.

In [ngClass] we pass in an object, which means that when the value is true, the class specified will be added.  Therefore in the example above, when showMenuX is true, the ‘expanded’ class will be added to the div.

In the CSS we hide the submenu by default, and when the ‘expanded’ class is added we display the submenu by using CSS scaleY(1) transform:

And that’s all, hope you will find this project useful in building your application with responsive menu.

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
© All Rights Reserved 2020
0
Would love your thoughts, please comment.x