fixup! feat: add PixNavigation component

addon/components/pix-navigation.hbs

@@ -1,5 +1,7 @@
 <aside ...attributes class={{this.classNames}}>
   <header class="pix-navigation__brand">{{yield to="brand"}}</header>
-  <nav class="pix-navigation__nav" aria-label={{@ariaLabel}}>{{yield to="navElements"}}</nav>
+  <nav class="pix-navigation__nav" aria-label={{@navigationAriaLabel}}>{{yield
+      to="navElements"
+    }}</nav>
   <footer class="pix-navigation__footer">{{yield to="footer"}}</footer>
 </aside>

addon/styles/_pix-navigation.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   gap:var(--pix-spacing-6x);
   align-items: center;
-  width: 214px;
+  min-width: 214px;
   height: fit-content;
   min-height: calc(100vh - var(--pix-spacing-4x) * 2);
 
@@ -15,6 +15,37 @@
   padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
   border-radius: var(--pix-spacing-6x);
 
+
+  &--orga {
+    color: var(--pix-orga-50);
+    background-color: var(--pix-orga-500);
+
+    --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
+    --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
+    --pix-navigation-invert-color: var(--pix-orga-500);
+    --pix-navigation-invert-bgcolor: var(--pix-orga-50);
+  }
+
+  &--certif {
+    color: var(--pix-certif-50);
+    background-color: var(--pix-certif-500);
+
+    --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
+    --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
+    --pix-navigation-invert-color: var(--pix-certif-500);
+    --pix-navigation-invert-bgcolor: var(--pix-certif-50);
+  }
+
+  &--primary {
+    color: var(--pix-primary-10);
+    background-color: var(--pix-primary-700);
+
+    --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
+    --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
+    --pix-navigation-invert-color: var(--pix-primary-700);
+    --pix-navigation-invert-bgcolor: var(--pix-primary-10);
+  }
+
   &__brand {
     margin-bottom: 0;
     padding:0;
@@ -97,34 +128,5 @@
     }
   }
 
-  &--orga {
-    color: var(--pix-orga-50);
-    background-color: var(--pix-orga-500);
-
-    --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
-    --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
-    --pix-navigation-invert-color: var(--pix-orga-500);
-    --pix-navigation-invert-bgcolor: var(--pix-orga-50);
-  }
-
-  &--certif {
-    color: var(--pix-certif-50);
-    background-color: var(--pix-certif-500);
-
-    --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
-    --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
-    --pix-navigation-invert-color: var(--pix-certif-500);
-    --pix-navigation-invert-bgcolor: var(--pix-certif-50);
-  }
-
-  &--primary {
-    color: var(--pix-primary-10);
-    background-color: var(--pix-primary-700);
-
-    --pix-navigation-button-bgcolor-hover: rgb(205, 209, 217, .3);
-    --pix-navigation-button-bgcolor-active: rgb(205, 209, 217, .5);
-    --pix-navigation-invert-color: var(--pix-primary-700);
-    --pix-navigation-invert-bgcolor: var(--pix-primary-10);
-  }
 }
 

app/stories/pix-navigation.mdx

@@ -11,15 +11,15 @@ Le composant `<PixNavigation/>` comporte 3 placeholders
 - `<:navElements>` permet d'afficher les boutons de navigation
 - `<:footer>` permet d'afficher des infos et d'autres boutons (selecteur d'orga, déconnexion)
 
-Ce composant doit être utiliser avec le composant `<AppLayout>` afin de pouvoir occupé tout la hauteur de la page et être toujours visible.
+Ce composant doit être utiliser avec le composant `<PixAppLayout>` afin de pouvoir occupé tout la hauteur de la page et être toujours visible.
 
-En complément, les composants `<NavigationSidebarButton/>` et `<NavigationSidebarSeparator/>` permette de composer la navigation souhaitée.
+En complément, les composants `<PixNavigationButton/>` et `<PixNavigationSeparator/>` permette de composer la navigation souhaitée.
 
 ## Usage
 
 ```html
-<PixAppLayou>
-  <PixNavigation @variant="orga" @ariaLabel="navigation principale">
+<PixAppLayout>
+  <PixNavigation @variant="orga" @navigationAriaLabel="navigation principale">
     <:brand>
         <!-- Affichage du block indentité -->
         <a href="/">

app/stories/pix-navigation.stories.js

@@ -15,12 +15,15 @@ export default {
   },
   args: {
     variant: 'primary',
+    navigationAriaLabel: 'Navigation Principale',
   },
 };
 
 export const AppNavigation = (args) => {
   return {
-    template: hbs`<PixNavigation @variant={{this.variant}}>
+    template: hbs`
+<PixAppLayout>
+    <PixNavigation @variant={{this.variant}} @navigationAriaLabel={{this.navigationAriaLabel}} >
   <:brand>
     <a href='/'>
       <img src='/pix-orga.svg' alt='pix orga' />
@@ -76,7 +79,37 @@ export const AppNavigation = (args) => {
       Se déconnecter
     </PixButton>
   </:footer>
-</PixNavigation>`,
+</PixNavigation>
+<div>
+    <svg class="svg" width="600px" height="400px" 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">
+      <rect width="600px" height="400px" fill="DeepPink" />
+    </svg>
+
+    <svg width="90%" height="400px" 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">
+      <rect width="600px" height="400px" fill="RebeccaPurple" />
+    </svg>
+
+    <svg width="90%" height="400px" 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">
+      <rect width="600px" height="400px" fill="LightCoral" />
+    </svg>
+
+    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
+      <rect width="600px" height="400px" fill="PowderBlue" />
+    </svg>
+</div>
+</PixAppLayout>`,
     context: args,
   };
 };