fix various page issues (#286)

* fix dialog issues

* fix various page issues

* prettier

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

@@ -25,13 +25,22 @@ wa-page::part(header) {
   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);

docs/docs/components/page-samples/documentation.md

@@ -25,7 +25,7 @@ layout: blank
   wa-page[view='mobile'] #search {
     display: none;
   }
-  [slot='banner'] {  
+  [slot='banner'] {
     --wa-color-text-link: var(--wa-color-neutral-on-loud);
     background-color: var(--wa-color-neutral-fill-loud);
   }
@@ -117,7 +117,7 @@ layout: blank
     <a href="#behavior">Behavior</a>
     <a href="#conservation">Conservation</a>
   </nav>
-  <nav slot="navigation-footer">      
+  <nav slot="navigation-footer">
     <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
       <wa-icon name="camera"></wa-icon>
       <span>Photo Gallery</span>

src/components/page/page.styles.ts

@@ -242,6 +242,10 @@ export default css`
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
   }
+
+  [part~='drawer']::part(dialog) {
+    background-color: var(--wa-color-surface-default);
+  }
 `;
 
 export const mobileStyles = (breakpoint: number) => `

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"