Side bar Menu toggle HTML with Angular 2+ material - html

I have a page in my Angular application, where i need to have a side menu with toggle like below. When i click the icon, it must toggle.
On the top i have a reach textbox

Related

Navigation inside dropwdown Angular

i wanted to know is there any chance to make for example a Dropdown and when i click it, it will apear like a dropdown menu.
Inside the dropdown it has to be a navigation bar to chossee what kind of data to display in the dropdown menu.

Open relevant accordion by the click on a button on Navbar

In a webpage, I have a navbar with dropdown menus. In content section, I have accordions which I wish to link to items in dropdown menus. When I click on an item in the dropdown menu, I want the relevant accordion to be highlighted and open. How can I do that?

navigation bar in polymer

How can I achieve navigation bar like this in polymer I have a home toolbar and navigation bar, navigation bar has mydashboard,user,demo horizontally aligned and when I click on user I should see mydashboard and demo and I can also toggle back, when I toggle back only the url changes the toolbar and naviagtion bar remains constant can anyone create a fiddle and show?

Polymer app-toolbar with drop down menus

In Polymer 2 I would like to create an app-toolbar with menu buttons that on-click show a dropdown menu, similar to a classical desktop application. The app-toolbox seems to be a great start for a responsive solution and there are examples for creating toolbars with simple navigation buttons/links.
What I don't find are examples on creating dropdown menus in the toolbar.
My questions:
Which component should I use to show a dropdown menu in the app-toolbar? Maybe iron-dropdown? Is there any example?
What would happen to the dropdown menu when on narrow screens the app-toolbar collapses to the single menu button? Would the drawer that is shown by the menu button allow me to show the dropdown menus?
You could use paper-dropdown-menu, or iron-dropdown or some similar.
But you should pay attention for the iron-overlay-behavior dropdown content max-height.

How do I customise the dropdown when my navbar collapses?

I have a navbar on my page where the left hand side contains a bunch of views and the right hand side contains a bunch of actions (eg. create)
On mobile devices, I want the left side to collapse into a dropdown box while the action commands on the right stay the same.
I can get this working but I can't get it looking right. I have some working code here.
http://www.bootply.com/OEYfZVIaGA#
Basically, the problem I have is on the mobile view, when I click on "Toggle view", it turns the entire navbar into a dropdown list and drags the right hand side buttons down as well.
I would like it to act just like a standard dropdown list (http://getbootstrap.com/components/#dropdowns-example). I would be happy if it didn't drag the New button down when I opened the dropdown list.
How do I customise the behaviour of the drop down list from a collapsed navbar?