CODEWITHSUNDEEP
angularresponsiveangular-flex-layout
gach3z
gach3z

Reputation: 541

md-sidenav responsive, with Flex-Layout

I make a app with Angular and Flex-Layout, I use breakpoints for hide the navbar. I need use the click event for show the navbar when this is hidden. My code is followed:

<md-sidenav-container>
<md-toolbar>
    <button class="button" md-icon-button fxHide.gt-sm="true" (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <span class="title">Assistant</span>
  </md-toolbar>
  <md-sidenav #sidenav mode="side" opened="true" fxHide fxShow.gt-sm>Drawer content</md-sidenav>
  <div class="my-content">Main content</div>
</md-sidenav-container>

The breakpoints work correctly, but the event click for toggle the navbar not work. Whats is the solution?

Upvotes: 0

Views: 703

Answers (1)

crash
crash

Reputation: 4512

Update the <md-sidenav> with

<md-sidenav ... [fxHide]="hideSidebar" ...>Drawer content</md-sidenav>

and on your component create a global hideSidebar variable that keeps track of the state of the sidenav, so by clicking the button you'll set that variable to true/false and will show/hide the sidenav accordingly.

<button class="button" ... (click)="toggleSidebar()">

toggleSidebar(): void { this.hideSidebar = !this.hideSidebar }

Hope this helps and let me know if I misunderstood your question

Upvotes: 1

Related Questions