[FEATURE] Voir dans une Sidebar les grains accessibles (PIX-15396)

#10628
1024pix · Nov 27, 2024 · c2bb877 · c2bb877
2 parents 44597f4 + 339db1a
commit c2bb877
Show file tree

Hide file tree

Showing 10 changed files with 234 additions and 49 deletions.
diff --git a/mon-pix/app/components/module/_navbar.scss b/mon-pix/app/components/module/_navbar.scss
@@ -9,16 +9,33 @@
 
   &__content {
     display: flex;
-    flex-wrap: wrap;
     gap: var(--pix-spacing-3x);
+    align-items: center;
     max-width: var(--modulix-max-content-width);
     margin: 0 auto;
+  }
+}
+
+.module-sidebar-list-item {
+  &__link {
+    @extend %pix-body-l;
+
+    display: inline-block;
+    width: 100%;
+    padding: var(--pix-spacing-3x) var(--pix-spacing-8x);
+    color: var(--pix-neutral-800);
+
+    &.current-grain {
+      --border-width: 5px;
+
+      padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
+      color: var(--pix-primary-500);
+      border-left: var(--border-width) solid var(--pix-primary-500);
+    }
 
-    &__current-step {
-      padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
+    &:hover {
       color: var(--pix-primary-700);
-      background-color: var(--pix-primary-100);
-      border-radius: var(--modulix-radius-xs);
+      background-color: var(--pix-neutral-20);
     }
   }
 }
diff --git a/mon-pix/app/components/module/navbar.gjs b/mon-pix/app/components/module/navbar.gjs
@@ -1,27 +1,77 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
 import PixProgressGauge from '@1024pix/pix-ui/components/pix-progress-gauge';
+import PixSidebar from '@1024pix/pix-ui/components/pix-sidebar';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
+import { eq } from 'ember-truth-helpers';
 
 export default class ModulixNavbar extends Component {
+  @service intl;
+
   get progressValue() {
     if (this.args.totalSteps <= 1) {
       return 100;
     }
     return ((this.args.currentStep - 1) / (this.args.totalSteps - 1)) * 100;
   }
 
+  @tracked
+  sidebarOpened = false;
+
+  @action
+  openSidebar() {
+    this.sidebarOpened = true;
+  }
+
+  @action
+  closeSidebar() {
+    this.sidebarOpened = false;
+  }
+
+  get grainTypeTexts() {
+    return this.args.grainsToDisplay.map((grain) => this.intl.t(`pages.modulix.grain.tag.${grain.type}`));
+  }
+
+  get currentGrainIndex() {
+    return this.grainTypeTexts.length - 1;
+  }
+
   <template>
     <nav
       class="module-navbar"
       aria-label={{t "pages.modulix.flashcards.navigation.currentStep" current=@currentStep total=@totalSteps}}
     >
       <div class="module-navbar__content">
-        <div class="module-navbar__content__current-step">
-          {{@currentStep}}/{{@totalSteps}}
-        </div>
+        <PixButton
+          @variant="tertiary"
+          @triggerAction={{this.openSidebar}}
+          aria-label={{t "pages.modulix.sidebar.button"}}
+        >
+          {{t "pages.modulix.flashcards.navigation.currentStep" current=@currentStep total=@totalSteps}}
+        </PixButton>
 
         <PixProgressGauge @hidePercentage={{true}} @isDecorative={{true}} @value={{this.progressValue}} />
       </div>
     </nav>
+
+    <PixSidebar @title={{@module.title}} @showSidebar={{this.sidebarOpened}} @onClose={{this.closeSidebar}}>
+      <:content>
+        <nav>
+          <ul>
+            {{#each this.grainTypeTexts as |type index|}}
+              <li
+                class="module-sidebar-list-item__link {{if (eq index this.currentGrainIndex) 'current-grain'}}"
+                aria-current={{if (eq index this.currentGrainIndex) "step"}}
+              >
+                {{type}}
+              </li>
+            {{/each}}
+          </ul>
+        </nav>
+      </:content>
+    </PixSidebar>
   </template>
 }
diff --git a/mon-pix/app/components/module/passage.gjs b/mon-pix/app/components/module/passage.gjs
@@ -198,7 +198,12 @@ export default class ModulePassage extends Component {
 
   <template>
     {{pageTitle @module.title}}
-    <ModuleNavbar @currentStep={{this.currentPassageStep}} @totalSteps={{this.displayableGrains.length}} />
+    <ModuleNavbar
+      @currentStep={{this.currentPassageStep}}
+      @totalSteps={{this.displayableGrains.length}}
+      @module={{@module}}
+      @grainsToDisplay={{this.grainsToDisplay}}
+    />
 
     <main class="module-passage">
       {{#if @module.isBeta}}

diff --git a/mon-pix/app/styles/components/_navbar-burger-menu.scss b/mon-pix/app/styles/components/_navbar-burger-menu.scss
@@ -13,7 +13,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-right: 32px;
+    padding-right: var(--pix-spacing-8x);
   }
 
   &__content {
@@ -25,7 +25,7 @@
     flex-direction: column;
     margin-top: auto;
     margin-bottom: 21px;
-    padding: 10px 32px;
+    padding: 10px var(--pix-spacing-8x);
   }
 
   &__footer {
@@ -36,17 +36,19 @@
 
 .navbar-burger-menu-list-item {
   &__link {
+    @extend %pix-body-l;
+
     display: inline-block;
     width: 100%;
-    padding: 12px 32px;
+    padding: var(--pix-spacing-3x) var(--pix-spacing-8x);
     color: var(--pix-neutral-800);
-    font-size: 1.125rem;
-    font-family: $font-roboto;
 
     &.active {
-      padding-left: calc(32px - 5px);
+      --border-width: 5px;
+
+      padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
       color: var(--pix-primary-500);
-      border-left: 5px solid var(--pix-primary-500);
+      border-left: var(--border-width) solid var(--pix-primary-500);
     }
 
     &:hover {
@@ -74,12 +76,14 @@
 
     display: inline-block;
     width: 100%;
-    padding: 10px 32px;
+    padding: 10px var(--pix-spacing-8x);
     color: var(--pix-neutral-0);
 
     &.active {
-      padding-left: calc(32px - 5px);
-      border-left: 5px solid var(--pix-neutral-0);
+      --border-width: 5px;
+
+      padding-left: calc(var(--pix-spacing-8x) - var(--border-width));
+      border-left: var(--border-width) solid var(--pix-neutral-0);
     }
 
     &:hover {

diff --git a/mon-pix/tests/integration/components/module/grain_test.gjs b/mon-pix/tests/integration/components/module/grain_test.gjs
@@ -73,7 +73,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--activity')).exists();
-      assert.dom(screen.getByText('activité')).exists();
+      assert.dom(screen.getByText('Activité')).exists();
     });
 
     test('should have the "lesson" color and tag if grain is of type lesson', async function (assert) {
@@ -88,7 +88,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--lesson')).exists();
-      assert.dom(screen.getByText('leçon')).exists();
+      assert.dom(screen.getByText('Leçon')).exists();
     });
 
     test('should have the "lesson" color and tag if grain is of undefined type', async function (assert) {
@@ -103,7 +103,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--lesson')).exists();
-      assert.dom(screen.getByText('leçon')).exists();
+      assert.dom(screen.getByText('Leçon')).exists();
     });
 
     test('should have the "lesson" color and tag if grain is of unknown type', async function (assert) {
@@ -118,7 +118,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--lesson')).exists();
-      assert.dom(screen.getByText('leçon')).exists();
+      assert.dom(screen.getByText('Leçon')).exists();
     });
 
     test('should have the "discovery" color and tag if grain is of type discovery', async function (assert) {
@@ -133,7 +133,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--discovery')).exists();
-      assert.dom(screen.getByText('découverte')).exists();
+      assert.dom(screen.getByText('Découverte')).exists();
     });
 
     test('should have the "challenge" color and tag if grain is of type challenge', async function (assert) {
@@ -148,7 +148,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--challenge')).exists();
-      assert.dom(screen.getByText('défi')).exists();
+      assert.dom(screen.getByText('Défi')).exists();
     });
 
     test('should have the "summary" color and tag if grain is of type summary', async function (assert) {
@@ -163,7 +163,7 @@ module('Integration | Component | Module | Grain', function (hooks) {
 
       // then
       assert.dom(find('.grain-card--summary')).exists();
-      assert.dom(screen.getByText("récap'")).exists();
+      assert.dom(screen.getByText("Récap'")).exists();
     });
   });