From 6cf695e71352db42788c52d3c51fb52e36e03d52 Mon Sep 17 00:00:00 2001
From: alicegoarnisson <alice.goarnisson@pix.fr>
Date: Mon, 25 Nov 2024 17:47:14 +0100
Subject: [PATCH] feat: mobile nav

---
 addon/components/pix-navigation.hbs           | 28 ++++--
 addon/components/pix-navigation.js            | 33 +++++++
 addon/styles/_pix-app-layout.scss             |  4 +
 addon/styles/_pix-navigation.scss             | 93 +++++++++++++++++--
 addon/styles/_pix-select-list.scss            |  7 +-
 addon/styles/_pix-structure-switcher.scss     | 28 ++++++
 app/stories/pix-app-layout.stories.js         | 17 ++--
 app/stories/pix-navigation.mdx                |  3 +-
 app/stories/pix-navigation.stories.js         |  3 +-
 tests/dummy/app/templates/application.hbs     |  2 +
 .../components/pix-navigation-test.js         | 70 ++++++++------
 11 files changed, 230 insertions(+), 58 deletions(-)
 create mode 100644 addon/components/pix-navigation.js

diff --git a/addon/components/pix-navigation.hbs b/addon/components/pix-navigation.hbs
index 1c5645d7a..cf187064f 100644
--- a/addon/components/pix-navigation.hbs
+++ b/addon/components/pix-navigation.hbs
@@ -1,7 +1,23 @@
-<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>
-  <footer class="pix-navigation__footer">{{yield to="footer"}}</footer>
+<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
+        aria-controls="{{this.navigationId}} {{this.footerId}}"
+        aria-expanded={{this.navigationMenuOpened}}
+        @iconBefore={{if this.navigationMenuOpened "close" "menu"}}
+        @triggerAction={{this.toggleNavigationMenu}}
+      >Menu</PixButton>
+    </div>
+  </header>
+  <nav
+    class="pix-navigation__nav"
+    {{on "click" this.handleNavigationClick}}
+    aria-label={{@navigationAriaLabel}}
+    id={{this.navigationId}}
+  >
+    {{yield to="navElements"}}
+  </nav>
+  <footer class="pix-navigation__footer" id={{this.footerId}}>{{yield to="footer"}}</footer>
 </aside>
\ No newline at end of file
diff --git a/addon/components/pix-navigation.js b/addon/components/pix-navigation.js
new file mode 100644
index 000000000..85207dfbe
--- /dev/null
+++ b/addon/components/pix-navigation.js
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+
+export default class PixMNavigation extends Component {
+  constructor(...args) {
+    super(...args);
+    this._navigationId = 'navigation-' + guidFor(this);
+  }
+  @tracked
+  navigationMenuOpened = false;
+
+  @action
+  toggleNavigationMenu() {
+    this.navigationMenuOpened = !this.navigationMenuOpened;
+  }
+
+  @action
+  handleNavigationClick(event) {
+    if (event.target.nodeName === 'A') {
+      this.navigationMenuOpened = false;
+    }
+  }
+
+  get navigationId() {
+    return `${this._navigationId}-nav`;
+  }
+
+  get footerId() {
+    return `${this._navigationId}-footer`;
+  }
+}
diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss
index 797b60f0c..1aabfb665 100644
--- 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
index 9d060a6c2..f34ff2c9d 100644
--- 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,14 +18,59 @@
   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 {
@@ -32,6 +78,17 @@
     flex-direction: column;
     gap: var(--pix-spacing-2x);
     align-self: stretch;
+
+    @include device-is('mobile') {
+      display: none;
+      padding: 0 var(--pix-spacing-6x);
+
+      .pix-navigation--opened & {
+        display: block;
+      }
+    }
+
+
   }
 
   &__footer {
@@ -43,26 +100,43 @@
 
     @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);
+
+        &::before {
+          width: 80px;
+          margin: var(--pix-spacing-6x) auto;
+          border-top: 1px solid var(--pix-neutral-100);
+          content: "";
+        }
+      }
+    }
+
     & .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 +146,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 +175,5 @@
       }
     }
   }
-
 }
 
diff --git a/addon/styles/_pix-select-list.scss b/addon/styles/_pix-select-list.scss
index a0db9824f..c6d7a50b1 100644
--- 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
index 327b7e808..6eb3dda67 100644
--- 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
index 1daf3e713..0167543a3 100644
--- 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
index 7ca8a286d..b176030e8 100644
--- 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
index eaa279813..c73c98bc0 100644
--- 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
index 00822189f..3541ac041 100644
--- 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>
diff --git a/tests/integration/components/pix-navigation-test.js b/tests/integration/components/pix-navigation-test.js
index 46c9226ff..dc78c3b39 100644
--- a/tests/integration/components/pix-navigation-test.js
+++ b/tests/integration/components/pix-navigation-test.js
@@ -6,52 +6,64 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | pix-navigation', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders the navigation in a sidebar', async function (assert) {
-    // when
-    const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label' />`);
-    const aside = screen.getByRole('complementary');
+  module('Desktop', function (hooks) {
+    hooks.beforeEach(function () {
+      window.innerWidth = 1200;
+    });
+    test('it renders the navigation in a sidebar', async function (assert) {
+      // when
+      const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label' />`);
+      const aside = screen.getByRole('complementary');
 
-    // then
-    assert.ok(within(aside).getByRole('navigation', { name: 'label' }));
-  });
+      // then
+      assert.ok(within(aside).getByRole('navigation', { name: 'label' }));
+    });
 
-  test('it renders content at the header of the aside', async function (assert) {
-    // when
-    const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label'>
+    test('it renders content at the header of the aside', async function (assert) {
+      // when
+      const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label'>
   <:brand>
     <svg role='img'><title>logo</title></svg>
   </:brand>
 </PixNavigation>`);
-    const aside = screen.getByRole('complementary');
-    const header = within(aside).getByRole('banner');
-    // then
-    assert.ok(within(header).getByRole('img', { name: 'logo' }));
-  });
+      const aside = screen.getByRole('complementary');
+      const header = within(aside).getByRole('banner');
+      // then
+      assert.ok(within(header).getByRole('img', { name: 'logo' }));
+    });
 
-  test('it renders content in the navigation', async function (assert) {
-    // when
-    const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label'>
+    test('it renders content in the navigation', async function (assert) {
+      // when
+      const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label'>
   <:navElements>
     <a href='toto'>mon lien</a>
   </:navElements>
 </PixNavigation>`);
-    const navBar = screen.getByRole('navigation', { name: 'label' });
+      const navBar = screen.getByRole('navigation', { name: 'label' });
 
-    // then
-    assert.ok(within(navBar).getByRole('link', { name: 'mon lien' }));
-  });
+      // then
+      assert.ok(within(navBar).getByRole('link', { name: 'mon lien' }));
+    });
 
-  test('it renders content in the footer', async function (assert) {
-    // when
-    const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label'>
+    test('it renders content in the footer', async function (assert) {
+      // when
+      const screen = await render(hbs`<PixNavigation @navigationAriaLabel='label'>
   <:footer>
     <a href='toto'>mon lien</a>
   </:footer>
 </PixNavigation>`);
-    const navBar = screen.getByRole('complementary');
-    const footer = within(navBar).getByRole('contentinfo');
+      const navBar = screen.getByRole('complementary');
+      const footer = within(navBar).getByRole('contentinfo');
 
-    // then
-    assert.ok(within(footer).getByRole('link', { name: 'mon lien' }));
+      // then
+      assert.ok(within(footer).getByRole('link', { name: 'mon lien' }));
+    });
+    test('it hides the burger menu', async function (assert) {
+      // when
+      const screen = await render(
+        hbs`<PixNavigation @navigationAriaLabel='label' @menuLabel='menu' />`,
+      );
+      assert.notOk(screen.queryByRole('button', { name: 'menu' }));
+    });
   });
 });