[BUGFIX] fixe la navigation

#775
1024pix · Nov 29, 2024 · c22f3ec · c22f3ec
2 parents 41bf99d + 25c8af3
commit c22f3ec
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/addon/components/pix-structure-switcher.js b/addon/components/pix-structure-switcher.js
@@ -33,12 +33,16 @@ export default class PixStructureSwitcher extends Component {
 
   @action
   openMenu(event) {
+    if (this.isMenuOpen) return;
+
     event.preventDefault();
     this.isMenuOpen = true;
   }
 
   @action
   closeMenu(event) {
+    if (!this.isMenuOpen) return;
+
     event.preventDefault();
     this.isMenuOpen = false;
   }

diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss
@@ -1,8 +1,6 @@
 .pix-app-layout {
-  --pix-navigation-width:  13.375rem;
-
   display: grid;
-  grid-template-columns: var(--pix-navigation-width) 1fr;
+  grid-template-columns: min-content 1fr;
   gap: var(--pix-spacing-6x);
   padding: var(--pix-spacing-6x);
 

diff --git a/addon/styles/_pix-navigation.scss b/addon/styles/_pix-navigation.scss
@@ -1,17 +1,17 @@
 .pix-navigation {
   --bg-color-focus: rgb(var(--pix-neutral-100-inline), 50%);
   --bg-color-active: rgb(var(--pix-neutral-100-inline), 30%);
-
+  --pix-navigation-width:  15rem;
 
   position: sticky;
   bottom: var(--pix-spacing-6x);
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap:var(--pix-spacing-6x);
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
-  min-width: var(--pix-navigation-width);
+  width: var(--pix-navigation-width);
   height: auto;
   min-height: calc(100vh - var(--pix-spacing-6x) * 2);
 
@@ -29,6 +29,7 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
+    max-width: none;
     min-height: auto;
     padding: 0;
 
@@ -44,15 +45,17 @@
     line-height: 0;
 
     img {
+      display: block;
       width: 132px;
       height: 48px;
+      margin:0 auto;
     }
 
     @include device-is('mobile') {
       display:flex;
       flex-direction: row;
       align-items: center;
-      padding: var(--pix-spacing-4x) var(--pix-spacing-2x) var(--pix-spacing-4x) var(--pix-spacing-10x);
+      padding: var(--pix-spacing-4x) var(--pix-spacing-2x) var(--pix-spacing-4x) var(--pix-spacing-9x);
 
       img {
         width: 85px;
@@ -120,7 +123,7 @@
     @extend %pix-body-s;
 
     p {
-      word-break: break-all;
+      word-break: break-word;
     }
 
     @include device-is('mobile') {
@@ -142,6 +145,8 @@
 
     .pix-button {
       width: 100%;
+      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+      white-space: unset;
 
       @include device-is('mobile') {
         width: auto;

diff --git a/addon/styles/pix-design-tokens/_spacing.scss b/addon/styles/pix-design-tokens/_spacing.scss
@@ -16,6 +16,7 @@ $pix-spacing-xxl: 48px;
   --pix-spacing-4x: 16px;
   --pix-spacing-6x: 24px;
   --pix-spacing-8x: 32px;
+  --pix-spacing-9x: 36px;
   --pix-spacing-10x: 40px;
   --pix-spacing-12x: 48px;
 }
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -29,7 +29,7 @@
       </p>
       <p>{{this.structure.label}}</p>
       <PixStructureSwitcher
-        @label="Changer de structure"
+        @label="Changer d'organisation"
         @structures={{this.structures}}
         @value={{this.structure.value}}
         @onChange={{this.setStructure}}