Drop is= on navMenuButton, simplify nav and shell CSS

fairnesscoop · Dec 19, 2023 · ef5a35a · ef5a35a
1 parent c714f8c
commit ef5a35a
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 54 deletions.
diff --git a/src/assets/customElements/index.js b/src/assets/customElements/index.js
@@ -10,7 +10,5 @@ customElements.define('pc-auto-form', autoForm);
 customElements.define('pc-clipboard-button', clipboardButton);
 customElements.define('pc-event-form', eventForm);
 customElements.define('pc-faircalendar-filters-form', fairCalendarFiltersForm);
-customElements.define('pc-nav-menu-button', navMenuButton, {
-  extends: 'button'
-});
+customElements.define('pc-nav-menu-button', navMenuButton);
 customElements.define('pc-theme-toggler', themeToggler);
diff --git a/src/assets/customElements/navMenuButton.js b/src/assets/customElements/navMenuButton.js
@@ -1,8 +1,10 @@
 // @ts-check
 
-export default class extends HTMLButtonElement {
+export default class extends HTMLElement {
   connectedCallback() {
-    const ariaControls = this.getAttribute('aria-controls');
+    const btn = /** @type {HTMLButtonElement} */ (this.querySelector('button'));
+
+    const ariaControls = btn.getAttribute('aria-controls');
 
     if (!ariaControls) {
       throw new Error('aria-controls is missing');
@@ -12,11 +14,11 @@ export default class extends HTMLButtonElement {
       ariaControls
     ));
 
-    let open = this.getAttribute('aria-expanded') === 'true' || false;
+    let open = btn.getAttribute('aria-expanded') === 'true' || false;
 
-    this.addEventListener('click', () => {
+    btn.addEventListener('click', () => {
       open = !open;
-      this.setAttribute('aria-expanded', open.toString());
+      btn.setAttribute('aria-expanded', open.toString());
       linksList.hidden = !open;
     });
   }

diff --git a/src/assets/styles/components/header.css b/src/assets/styles/components/header.css
@@ -0,0 +1,5 @@
+.pc-header {
+  position: sticky;
+  top: 0;
+  background-color: var(--background-default);
+}
diff --git a/src/assets/styles/components/index.css b/src/assets/styles/components/index.css
@@ -6,6 +6,7 @@
 @import './dropdown.css';
 @import './event.css';
 @import './form_errors.css';
+@import './header.css';
 @import './icon.css';
 @import './input-group.css';
 @import './label.css';

diff --git a/src/assets/styles/components/nav.css b/src/assets/styles/components/nav.css
@@ -3,25 +3,34 @@
   color: var(--text-muted);
 }
 
-[is='pc-nav-menu-button'] {
+.pc-nav.pc-mobile-only {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  box-shadow: var(--shadow-default);
+}
+
+.pc-nav.pc-desktop-only {
+  display: none;
+}
+
+pc-nav-menu-button > button {
   background-color: transparent;
   border: none;
   width: 2rem;
   height: 2rem;
   cursor: pointer;
 }
 
-.pc-nav ul {
-  list-style-type: none;
-  padding: 0;
-  margin-block: 0;
-}
-
 @media screen and (min-width: 840px) {
-  [is='pc-nav-menu-button'] {
+  pc-nav-menu-button {
+    display: none;
+  }
+  .pc-nav.pc-mobile-only {
     display: none;
   }
-  .pc-nav > ul {
+  .pc-nav.pc-desktop-only {
     display: block;
   }
 }

diff --git a/src/assets/styles/components/shell.css b/src/assets/styles/components/shell.css
@@ -1,35 +1,17 @@
 .pc-shell {
+  /* Ensure page takes at least full height */
   display: flex;
   flex-direction: column;
+  align-self: stretch;
   min-height: var(--shell-min-size, 100vh);
 }
 
-/* Main shell content grows */
-.pc-shell > .pc-shell__content {
-  flex-grow: 1;
-}
-
 .pc-shell__content {
+  flex-grow: 1;
   background-color: var(--background-alt-grey);
 }
 
-/* Ensure all other shell elements match the main content's size */
-:where(.pc-shell, .pc-shell-mobile) > * {
+.pc-shell__element {
+  /* Grow to match the content's size */
   align-self: stretch;
 }
-
-@media screen and (max-width: 840px) {
-  .pc-shell-mobile {
-    display: flex;
-    flex-direction: column;
-    min-height: var(--shell-min-size, 100vh);
-  }
-
-  .pc-shell-mobile > .pc-shell__content {
-    flex-grow: 1;
-  }
-
-  .pc-shell-mobile > * {
-    align-self: stretch;
-  }
-}
diff --git a/src/assets/styles/utilities/placement.css b/src/assets/styles/utilities/placement.css
@@ -2,7 +2,3 @@
   display: grid;
   place-items: center;
 }
-
-.pc-relative {
-  position: relative;
-}
diff --git a/src/templates/components/header.njk b/src/templates/components/header.njk
@@ -1,9 +1,11 @@
 {% import 'macros/icons.njk' as icons %}
 
-<header class="pc-cluster pc-relative pc-shadow pc-p" style="--cluster-justify: space-between; z-index: 2; --p: calc(3 * var(--v)) calc(6 * var(--v))">    
-    <button is="pc-nav-menu-button" aria-haspopup="true" aria-expanded="false" aria-controls="pc-nav-menu" aria-label="{{ 'nav-open'|trans }}">
-        {{ icons.menu() }}
-    </button>
+<header class="pc-header pc-cluster pc-shadow pc-p" style="--cluster-justify: space-between; z-index: 2; --p: calc(3 * var(--v)) calc(6 * var(--v))">    
+    <pc-nav-menu-button>
+        <button aria-haspopup="true" aria-expanded="false" aria-controls="pc-nav-mobile-menu" aria-label="{{ 'nav-open'|trans }}">
+            {{ icons.menu() }}
+        </button>
+    </pc-nav-menu-button>
 
     <a href="{{ path('home') }}" class="pc-brand">
         <img src="{{ asset('images/logo.png') }}" alt="{{ 'coop-name'|trans }}"/>
@@ -36,4 +38,11 @@
             </ul>
         </details>
     </div>
+
+    <nav class="pc-nav pc-mobile-only">
+        {# 'hidden' so that it is closed by default #}
+        <ul id="pc-nav-mobile-menu" class="pc-raw-list" role="list" hidden>
+            {% include 'components/nav_links.njk' %}
+        </ul>
+    </nav>
 </header>
diff --git a/src/templates/components/nav_links.njk b/src/templates/components/nav_links.njk
@@ -22,7 +22,7 @@
             <span class="pc-nav-dropdown" aria-hidden="true"></span>
         </summary>
 
-        <ul>
+        <ul class="pc-raw-list" role="list">
             <li>
                 <a href="{{ path('crm_customers_list') }}" class="pc-link-btn" {% if view_name|startswith('crm_customers_') %}aria-current="page"{% endif %}>
                     {{ "crm-customers-title"|trans|capitalize }}
@@ -50,7 +50,7 @@
             <span class="pc-nav-dropdown" aria-hidden="true"></span>
         </summary>
 
-        <ul>
+        <ul class="pc-raw-list" role="list">
             <li>
                 <a href="{{ path('people_leaves_list') }}" class="pc-link-btn" {% if view_name|startswith('people_leaves_') %}aria-current="page"{% endif %}>
                     {{ 'leaves-title'|trans }}

diff --git a/src/templates/layouts/app.njk b/src/templates/layouts/app.njk
@@ -5,14 +5,14 @@
     <div class="pc-shell">
         {% include 'components/header.njk' %}
 
-        <div class="pc-shell__content pc-shell-mobile pc-with-sidebar-desktop" style="--sidebar-size: 35ch; --shell-min-size: 100%">
-            <nav class="pc-nav">
-                <ul id="pc-nav-menu" hidden>
+        <div class="pc-shell__content pc-with-sidebar-desktop" style="--sidebar-size: 35ch; --shell-min-size: 100%">
+            <nav class="pc-shell__element pc-nav pc-desktop-only">
+                <ul class="pc-raw-list" role="list">
                     {% include 'components/nav_links.njk' %}
                 </ul>
             </nav>
 
-            <main class="pc-shell__content pc-p" style="--p: calc(3 * var(--w)) 0">
+            <main class="pc-shell__element pc-p" style="--p: calc(3 * var(--w)) 0">
                 {% block main %}{% endblock main %}
             </main>
         </div>