Create a Responsive Toolbar using Angular Material

Question

I have created a toolbar using Angular Material. However, it is not responsive. How can I make the toolbar responsive?

Code for toolbar:

Answer 1

Problem

You need a way to make your navigation bar responsive.

Solution

You can use Material Angular with ToolBar and Flex-Layout.

Example

npm install @angular/flex-layout --save

Example Angular Material Toolbar with Flex Layout. Here is a great tutorial here.

  

    Responsive Navigation

    

    


      

      Menu Item 1

      Menu Item 2

      Menu Item 3

      Menu Item 4

      Menu Item 5

      Menu Item 6

    

    


      Show Side Menu

    

  

  

    

      


        Close

        Menu Item 1

        Menu Item 2

        Menu Item 3

        Menu Item 4

        Menu Item 5

        Menu Item 6

      

    

    Main content