fix dialog issues

docs/_includes/base.njk

@@ -105,19 +105,16 @@
 
       {# Sidebar #}
       {% if hasSidebar %}
-        <aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          <wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
-
-          {# Mobile selectors #}
-          <div class="only-mobile">
+        {# Mobile selectors #}
+        <div class="only-mobile" slot="navigation-header">
+          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
             {% include "preset-theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
           </div>
-
-          <nav>
-            {% include "sidebar.njk" %}
-          </nav>
-        </aside>
+        </div>
+        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          {% include "sidebar.njk" %}
+        </div>
       {% endif %}
 
       {# Outline #}

docs/assets/styles/docs.css

@@ -20,18 +20,28 @@ wa-page {
 }
 
 /* Header */
-wa-page::part(header) {
+wa-page::part(drawer__dialog) {
   background-color: var(--wa-color-surface-default);
   border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
 
+wa-page::part(drawer__body) {
+  padding-top: 0px;
+}
+
+wa-page::part(drawer__header-actions) {
+  align-self: center;
+}
+
+
 wa-page > header {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 4rem;
-  padding-inline: var(--wa-space-xl);
+  padding-inline-start: var(--wa-space-m);
+  padding-inline-end: var(--wa-space-s);
 
   a[href='/'] {
     color: var(--wa-color-text-normal);

src/components/page/page.ts

@@ -285,16 +285,15 @@ export default class WaPage extends WebAwesomeElement {
         @wa-after-show=${() => (this.navOpen = this.navigationDrawer.open)}
         @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)}
         exportparts="
-          panel:drawer__panel
-          base:drawer__base
-          overlay:drawer__overlay
-          panel:drawer__panel
-          header:drawer__header
-          header-actions:drawer__header-actions
-          title:drawer__title
-          close-button:drawer__close-button
-          close-button__base:drawer__close-button__base
-          body:drawer__body
+          dialog:drawer__dialog,
+          overlay:drawer__overlay,
+          panel:drawer__panel,
+          header:drawer__header,
+          header-actions:drawer__header-actions,
+          title:drawer__title,
+          close-button:drawer__close-button,
+          close-button__base:drawer__close-button__base,
+          body:drawer__body,
           footer:drawer__footer
         "
         class="navigation-drawer"