feat: add a PixAppLayout component

Co-authored-by: mache <[email protected]>
Co-authored-by: lionelb <[email protected]>

addon/components/pix-app-layout.hbs

@@ -0,0 +1,3 @@
+<div class="pix-app-layout">
+  {{yield}}
+</div>

addon/styles/_pix-app-layout.scss

@@ -0,0 +1,6 @@
+.pix-app-layout{
+  display: grid;
+  grid-template-columns: minmax(214px, auto) 1fr;
+  gap: var(--pix-spacing-4x);
+  padding: var(--pix-spacing-4x);
+}

addon/styles/addon.scss

@@ -36,6 +36,7 @@
 @import 'trap-focus';
 @import 'pix-search-input';
 @import 'pix-navigation';
+@import 'pix-app-layout';
 
 
 // at the end so it can override it's children scss

app/components/pix-app-layout.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-app-layout';

app/stories/pix-navigation.mdx

@@ -11,44 +11,52 @@ 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 `<PixAppLayout>` afin de pouvoir occupé tout la hauteur de la page et être toujours visible.
+
 En complément, les composants `<PixNavigationButton/>` et `<PixNavigationSeparator/>` permette de composer la navigation souhaitée.
 
 ## Usage
 
 ```html
-<PixNavigation @variant="orga" @navigationAriaLabel="navigation principale">
-   <:brand>
-      <!-- Affichage du block indentité -->
-      <a href="/">
-        <img src="/pix-orga.svg" alt="pix orga" />
-      </a>
-    </:brand>
-    <:navElements>
-      <!-- Affichage du block de navigation -->
-      <PixNavigationButton
-        @route="navigation-sidebar-page"
-        @icon="conversionPath"
-      >Campagnes</PixNavigationButton>
-      <PixNavigationButton @href="https://pix.fr" @icon="book">Documentation</PixNavigationButton>
-      <PixNavigationButton
-        @href="https://pix.fr"
-        @title="Pix.fr"
-        @target="_blank"
-        @icon="help"
-        @newWindowLabel="ouvre une nouvelle fenêtre"
-      >Centre d'aide</PixNavigationButton>
-    </:navElements>
-    <:footer>
-      <!-- Affichage du block indentité -->
-      <p>
-        1 000 places disponibles
-      </p>
-      <PixNavigationSeparator />
-      <p>
-        Martin Dupond
-      </p>
-    </:footer>
-</PixNavigation>
+<PixAppLayout>
+  <PixNavigation @variant="orga" @navigationAriaLabel="navigation principale">
+    <:brand>
+        <!-- Affichage du block indentité -->
+        <a href="/">
+          <img src="/pix-orga.svg" alt="pix orga" />
+        </a>
+      </:brand>
+      <:navElements>
+        <!-- Affichage du block de navigation -->
+        <PixNavigationButton
+          @route="navigation-sidebar-page"
+          @icon="conversionPath"
+        >Campagnes</PixNavigationButton>
+        <PixNavigationButton @href="https://pix.fr" @icon="book">Documentation</PixNavigationButton>
+        <PixNavigationButton
+          @href="https://pix.fr"
+          @title="Pix.fr"
+          @target="_blank"
+          @icon="help"
+          @newWindowLabel="ouvre une nouvelle fenêtre"
+        >Centre d'aide</PixNavigationButton>
+      </:navElements>
+      <:footer>
+        <!-- Affichage du block indentité -->
+        <p>
+          1 000 places disponibles
+        </p>
+        <PixNavigationSeparator />
+        <p>
+          Martin Dupond
+        </p>
+      </:footer>
+  </PixNavigation>
+  <div>
+    <!-- Placeholder pour afficher le contenus des routes  -->
+    {{yield}}
+  </div>
+</PixAppLayout>
 ```
 
 ## Arguments

app/styles/global.css

@@ -22,3 +22,8 @@
   color:var(--pix-neutral-800);
   font-size: .75rem
 }
+
+#storybook-root.ember-application:has(.pix-app-layout) {
+  /* remove padding for the pix-navigation story to mimic in-app behaviour */
+  padding: 0
+}