feat: mobile nav

1024pix · Nov 26, 2024 · f042929 · f042929
1 parent adae4e6
commit f042929
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 57 deletions.
diff --git a/addon/components/pix-navigation.hbs b/addon/components/pix-navigation.hbs
@@ -1,7 +1,16 @@
-<aside ...attributes class="pix-navigation">
-  <header class="pix-navigation__brand">{{yield to="brand"}}</header>
-  <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}}>{{yield
-      to="navElements"
-    }}</nav>
+<aside
+  ...attributes
+  class="pix-navigation {{if this.navigationMenuOpened 'pix-navigation--opened'}}"
+>
+  <header class="pix-navigation__brand">{{yield to="brand"}}
+    <div class="pix-navigation__burger-menu"><PixButton
+        @iconBefore={{if this.navigationMenuOpened "close" "menu"}}
+        @triggerAction={{this.toggleNavigationMenu}}
+      >Menu</PixButton>
+    </div>
+  </header>
+  <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}}>
+    {{yield to="navElements"}}
+  </nav>
   <footer class="pix-navigation__footer">{{yield to="footer"}}</footer>
 </aside>
diff --git a/addon/components/pix-navigation.js b/addon/components/pix-navigation.js
@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class PixMNavigation extends Component {
+  @tracked
+  navigationMenuOpened = false;
+
+  @action
+  toggleNavigationMenu() {
+    this.navigationMenuOpened = !this.navigationMenuOpened;
+  }
+}
diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss
@@ -4,6 +4,10 @@
   gap: var(--pix-spacing-6x);
   padding: var(--pix-spacing-6x);
 
+  @include device-is('mobile') {
+    display: block
+  }
+
   &--orga {
     background-color: var(--pix-orga-50);
 

diff --git a/addon/styles/_pix-navigation.scss b/addon/styles/_pix-navigation.scss
@@ -5,8 +5,9 @@
   flex-direction: column;
   gap:var(--pix-spacing-6x);
   align-items: center;
+  justify-content: space-between;
   min-width: 214px;
-  height: fit-content;
+  height: auto;
   min-height: calc(100vh - var(--pix-spacing-6x) * 2);
 
   // using a margin top / bottom allow user to discover rapidly
@@ -17,21 +18,85 @@
   background-color: var(--pix-navigation-color);
   border-radius: var(--pix-spacing-6x);
 
-  --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
-  --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
+
+  @include device-is('mobile') {
+    position: static;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    min-height: auto;
+    padding: 0;
+
+    &--opened {
+      justify-content: flex-start;
+    }
+  }
+
 
   &__brand {
     margin-bottom: 0;
     padding:0;
     line-height: 0;
 
+    a {
+      display: flex;
+      height: 30px;
+
+    }
+
+    @include device-is('mobile') {
+      display:flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--pix-spacing-4x) 0  var(--pix-spacing-4x) var(--pix-spacing-6x);
+
+      .pix-navigation--opened & {
+        padding-bottom: 0
+      }
+    }
+  }
+
+  &__burger-menu {
+    display: none;
+
+    @include device-is('mobile') {
+      display: block;
+      margin-left:auto;
+
+      .pix-button {
+        background-color: transparent;
+
+        &:focus, &:focus-visible {
+          outline: none;
+        }
+      }
+    }
   }
 
   &__nav {
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-2x);
     align-self: stretch;
+
+    @include device-is('mobile') {
+      display: none;
+      padding: 0 var(--pix-spacing-6x);
+
+
+      &::before {
+        width: 80px;
+        margin: var(--pix-spacing-6x) auto;
+        border-top: 1px solid var(--pix-neutral-100);
+        content: "";
+      }
+
+      .pix-navigation--opened & {
+        display: block;
+      }
+    }
+
+
   }
 
   &__footer {
@@ -43,26 +108,37 @@
 
     @extend %pix-body-s;
 
+    @include device-is('mobile') {
+      display: none;
+
+      .pix-navigation--opened & {
+        display: flex;
+        justify-content: stretch;
+        padding: 0 var(--pix-spacing-6x) var(--pix-spacing-4x);
+
+      }
+    }
+
     & .pix-button--primary {
       color: var(--pix-navigation-color);
       background-color:var(--pix-navigation-text-color);
 
       &:hover {
         color: currentcolor;
-        background-color: var(--pix-navigation-button-bgcolor-hover);
+        background-color: rgb(var(--pix-neutral-100-inline), 30%);
         fill: currentcolor;
       }
 
       &:focus,
       &:focus-visible {
         color: currentcolor;
-        background-color: var(--pix-navigation-button-bgcolor-hover);
+        background-color: rgb(var(--pix-neutral-100-inline), 30%);
         outline-color: currentcolor;
       }
 
       &:active {
         color: currentcolor;
-        background-color: var(--pix-navigation-button-bgcolor-active);
+        background-color: rgb(var(--pix-neutral-100-inline), 50%);
       }
     }
 
@@ -72,20 +148,20 @@
 
       &:hover {
         color: currentcolor;
-        background-color: var(--pix-navigation-button-bgcolor-hover);
+        background-color: rgb(var(--pix-neutral-100-inline), 30%);
         fill: currentcolor;
       }
 
       &:focus,
       &:focus-visible {
         color: currentcolor;
-        background-color: var(--pix-navigation-button-bgcolor-hover);
+        background-color: rgb(var(--pix-neutral-100-inline), 30%);
         outline-color: currentcolor;
       }
 
       &:active {
         color: currentcolor;
-        background-color: var(--pix-navigation-button-bgcolor-active);
+        background-color: rgb(var(--pix-neutral-100-inline), 50%);
       }
     }
 
@@ -101,6 +177,5 @@
       }
     }
   }
-
 }
 
diff --git a/addon/styles/_pix-select-list.scss b/addon/styles/_pix-select-list.scss
@@ -22,15 +22,14 @@
   &__option {
     @extend %pix-body-s;
 
-    &:nth-child(even) {
-      background-color: var(--pix-neutral-20);
-    }
-
     position: relative;
     padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x);
     color: var(--pix-neutral-900);
     border-radius: 8px;
 
+    &:nth-child(even) {
+      background-color: var(--pix-neutral-20);
+    }
 
     &:hover,
     &:focus {

diff --git a/addon/styles/_pix-structure-switcher.scss b/addon/styles/_pix-structure-switcher.scss
@@ -9,8 +9,17 @@
     --pix-structure-bg-hover: var(--pix-certif-50);
   }
 
+  @include device-is("mobile") {
+    width: 100%;
+  }
+
   .pix-button {
     width: 100%;
+
+    .pix-navigation--opened & {
+      width: auto;
+      margin:auto;
+    }
   }
 
   .pix-select__dropdown {
@@ -24,13 +33,32 @@
     margin-left: var(--pix-spacing-6x) !important; // we need to override popperjs inline styles
     overflow-y: auto;
     border-radius: 8px;
+
+    @include device-is('mobile') {
+      position: static !important;
+      display: none;
+      width: 0; // force dropdown to resize to its parent
+      max-width: none;
+      max-height: none;
+      margin-left:0 !important;
+      overflow-y: visible;
+      transform: none !important;
+      transition: none;
+
+      .pix-navigation--opened &:not(.pix-select__dropdown--closed) {
+        display: block;
+        margin-top: var(--pix-spacing-4x) !important;
+      }
+    }
   }
 
   .pix-select_list {
     display: flex;
     flex-direction: column;
     gap: var(--pix-spacing-2x);
+    min-width: 100%;
     padding: var(--pix-spacing-2x);
+    border-top: none;
   }
 
   .pix-select-list-category__option--hidden {

diff --git a/app/stories/pix-app-layout.stories.js b/app/stories/pix-app-layout.stories.js
@@ -39,6 +39,9 @@ export const AppLayout = (args) => {
       <PixNavigationButton @icon='help' @target='_blank' href='https://pix.fr' title='Pix.fr'>Centre
         d'aide</PixNavigationButton>
     </:navElements>
+    <:burgerMenu>
+      <PixNavigationButton @route='hello' @icon='infoUser'>Menu</PixNavigationButton>
+    </:burgerMenu>
     <:footer>
       <p>
         <b>1 000 places disponibles</b>
@@ -66,31 +69,31 @@ export const AppLayout = (args) => {
     </:footer>
   </PixNavigation>
   <div>
-    <svg class='svg' width='600px' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='IndianRed' />
     </svg>
 
-    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='DeepPink' />
     </svg>
 
-    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='Khaki' />
     </svg>
 
-    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='RebeccaPurple' />
     </svg>
 
-    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='YellowGreen' />
     </svg>
 
-    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='LightCoral' />
     </svg>
 
-    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+    <svg viewbox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'>
       <rect width='600px' height='400px' fill='PowderBlue' />
     </svg>
   </div>

diff --git a/app/stories/pix-navigation.mdx b/app/stories/pix-navigation.mdx
@@ -14,12 +14,13 @@ Le composant `<PixNavigation/>` comporte 3 placeholders
 Ce composant doit être utilisé avec le composant `<PixAppLayout>` afin de pouvoir occuper tout la hauteur de la page et être toujours visible.
 
 En complément, les composants `<PixNavigationButton/>` et `<PixNavigationSeparator/>` permettent de composer la navigation souhaitée.
+Il est possible de definir le label ARIA de la navigation principale avec l'attribut `@navigationAriaLabel` et le label du Menu avec `@menuLabel`.
 
 ## Usage
 
 ```html
 <PixAppLayout @variant="orga">
-  <PixNavigation @variant="orga" @navigationAriaLabel="navigation principale">
+  <PixNavigation @variant="orga" @navigationAriaLabel="navigation principale" @menuLabel="Menu">
     <:brand>
         <!-- Affichage du bloc identité -->
         <a href="/">

diff --git a/app/stories/pix-navigation.stories.js b/app/stories/pix-navigation.stories.js
@@ -10,13 +10,14 @@ export default {
   },
   args: {
     navigationAriaLabel: 'Navigation Principale',
+    menuLabel: 'Menu',
   },
 };
 
 export const Navigation = (args) => {
   return {
     template: hbs`<PixAppLayout @variant='primary'>
-  <PixNavigation @navigationAriaLabel={{this.navigationAriaLabel}}>
+  <PixNavigation @navigationAriaLabel={{this.navigationAriaLabel}} @menuLabel={{this.menuLabel}}>
     <:brand>
       <a href='/'>
         <img src='/pix-orga.svg' alt='pix orga' />

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -27,12 +27,14 @@
       <p>
         Martin Dupond
       </p>
+      <p>{{this.structure.label}}</p>
       <PixStructureSwitcher
         @label="Changer de structure"
         @structures={{this.structures}}
         @value={{this.structure.value}}
         @onChange={{this.setStructure}}
       />
+      <PixButton @triggerAction={{this.disconnect}} @variant="tertiary">Se déconnecter</PixButton>
     </:footer>
   </PixNavigation>
   <div>