Angular -Material is some way md-sidenav and main content can have focus
I am using Angular Material to implement a sliding navbar using a directive md-sidenav
.
index.html
<div flex>
<md-content>
<p>Here is content.</p>
<a href="">Click Me</a><!-- I want to be able click this even when the sidenav is open!!! -->
</md-content>
</div>
<div ng-controller="SideNavCtrl as sd">
<md-sidenav class="md-sidenav-right md-whiteframe-z2"
md-component-id="right"
md-is-open="sd.rightSideBarOpen"
md-sidenav-focus=>
<md-content>
<p>Side Nav content</p>
</md-content>
</md-sidenav>
</div>
This works great, but when the nav is open it takes two clicks to interact with the content in the main window. I understand this is the expected behavior with the Material stacked sheets paradigm, but this is not the behavior I want for this project. Interestingly, when the attribute is used md-is-locked-open
, the main focus and the seat are in focus.
You can override the background with the following CSS:
md-backdrop.md-sidenav-backdrop {
display: none;
}
Although you can open a ticket on Github by requesting this feature as it might be something that needs to be inlined.
https://github.com/angular/material/issues
to avoid losing background functionality (like hiding sidenav on click) it is better to use background-color:transparent
than changing display property