Angular Material Side Bar with “Half” side mode

Question

I am working on the dynamic side bar for our project, basically what we want to do is to set up a dynamic side bar when user click on the side bar it will spread when user click

Answer 1

Option 1: Generating Automatically:

You can create a navigation component from templates provided by Material itself using 'Angular CLI component schematics'

ng generate @angular/material:nav your-component-name

The above command will generate a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints. See more about angular material schematics here

---

Option 2: Implementing Manually:

To implement that, you just have to refer these two links:

• Resizing Sidenav | Angular Material
• Navigation List | Angular Material

glance through the following code. Implementation will be something like this:

  
    
      menu
    

    
      
        person
        
Management A
      
      
        assignment
        
Management B
      
      
        domain
        
Management C
      
      
        folder_shared
        
Management X
      
    
  

  

    You cards and screen Contents goes here..
    Will be pushed towards right on expanding side navbar.