How to keep <top-app-bar-fixed> buttons in <mwc-drawer dismissible open> on desktop ?

[jpic]

On desktop, there is plenty of width to enjoy the page content with an open drawer.

On desktop with closed <mwc-drawer>, the green button on the right is visible:

With <mwc-drawer open dismissible>, the green button is not visible anymore:

This is great for mobile or tablet, but on desktop I fear some users will miss the buttons right here because they forget about the dismissive open drawer.

Source code of the above:

    <mwc-drawer type="dismissible" id="drawer">
      <div class="drawer-content" style="overflow-y: scroll; height: 100%">
        {{ ryzom('crudlfap.components.menu.NavMenu', request) }}
      </div>
      <span slot="title">{{ request.user }}</span>
      <div slot="appContent">
          <mwc-top-app-bar-fixed>
          <mwc-icon-button
            slot="navigationIcon"    
            icon="menu"                                                                                 
            id="menu-button"    
            onclick="document.querySelector('#drawer').open = !document.querySelector('#drawer').open"    
          ></mwc-icon-button>                                                                                           
          <div slot="title">Example list</div>
        </mwc-top-app-bar-fixed>
      </div>
    </mwc-drawer>

Any idea how to let <mwc-top-app-bar-fixed> show its [slot=navigationIcon] even inside <mwc-drawer dismissible open> ?

Thank you for the components :tophat:

Sorry for the issue tag but this is more of a question than a bug.

[e111077]

Heya, I'll take a better look at this next week and write up some in-depth documentation, but a quick answer:

when the drawer is open, you need to set the width of the top-app-bar to be 100% - width of drawer.

e.g.

mwc-drawer[open] {
  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));
}

These default values can be found in their respective documentation pages.

[jpic]

Woaw, thank you very much!!

:tophat: