feat(orga): add pix navigation

high-level-tests/e2e/cypress/support/step_definitions/login-logout.js

@@ -85,7 +85,6 @@ When(`je me déconnecte`, () => {
 });
 
 When(`je me déconnecte de Pix Orga`, () => {
-  cy.get('[aria-label="Ouvrir le menu utilisateur"]').click();
   cy.contains("Se déconnecter").click();
 });
 

orga/app/components/layout/organization-places-or-credit-info.gjs

@@ -1,6 +1,5 @@
 import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
-import { LinkTo } from '@ember/routing';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
@@ -10,30 +9,27 @@ export default class OrganizationPlacesOrCreditInfo extends Component {
   @service currentUser;
 
   get canShowCredit() {
-    return this.currentUser.isAdminInOrganization && this.currentUser.organization.credit > 0;
+    const canShow = this.currentUser.isAdminInOrganization && this.currentUser.organization.credit > 0;
+    this.args.onCanShowCredit?.(canShow);
+    return canShow;
   }
 
   <template>
     {{#if this.currentUser.prescriber.placesManagement}}
-      <div class="organization-places-or-credit-info hide-on-mobile">
+      <div class="organization-places-or-credit-info">
         {{#if (eq @placesCount 0)}}
           <span class="organization-places-or-credit-info__warning">
             <PixIcon @name="warning" @plainIcon={{true}} class="warning-icon" />
             {{t "navigation.places.number" count=@placesCount}}</span>
         {{else}}
           <span>{{t "navigation.places.number" count=@placesCount}}</span>
         {{/if}}
-        {{#if this.currentUser.isAdminInOrganization}}
-          <LinkTo @route="authenticated.places" class="organization-places-or-credit-info__link">
-            {{t "navigation.places.link"}}
-          </LinkTo>
-        {{/if}}
       </div>
     {{else if this.canShowCredit}}
-      <div class="organization-places-or-credit-info organization-places-or-credit-info--inline hide-on-mobile">
+      <div class="organization-places-or-credit-info">
         <span>{{t "navigation.credits.number" count=this.currentUser.organization.credit}}</span>
 
-        <PixTooltip @id="credit-info-tooltip" @position="bottom-left" @isWide={{true}} @isLight={{true}}>
+        <PixTooltip @id="credit-info-tooltip" @position="bottom" @isWide={{true}} @isLight={{true}}>
           <:triggerElement>
             <PixIcon
               @name="help"

orga/app/components/layout/sidebar.hbs

@@ -1,85 +1,67 @@
-<aside class="sidebar">
-  <header class="sidebar__logo hide-on-mobile">
+<PixNavigation @variant="orga" @navigationAriaLabel={{t "navigation.main.aria-label"}} @menuLabel="Menu">
+  <:brand>
     <LinkTo @route={{this.redirectionRoute}}>
-      <img src="{{this.rootUrl}}/pix-orga.svg" alt="{{t 'common.home-page'}}" />
+      <img src="{{this.rootUrl}}/pix-orga.svg" class="pix-orga-logo" alt="{{t 'common.home-page'}}" />
     </LinkTo>
-  </header>
-
-  <nav class="sidebar-nav" aria-label={{t "navigation.main.aria-label"}}>
+  </:brand>
+  <:navElements>
     {{#if this.shouldDisplayCampaignsEntry}}
-      <LinkTo @route="authenticated.campaigns" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="conversionPath" role="none" />
-        </span>
-        {{t "navigation.main.campaigns"}}
-      </LinkTo>
+      <PixNavigationButton @route={{this.redirectionRoute}} @icon="conversionPath">
+        {{t "navigation.main.campaigns"}}</PixNavigationButton>
     {{/if}}
-
     {{#if this.shouldDisplayCertificationsEntry}}
-      <LinkTo @route="authenticated.certifications" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="awards" role="none" />
-        </span>
-        {{t "navigation.main.certifications"}}
-      </LinkTo>
+      <PixNavigationButton @route="authenticated.certifications" @icon="awards">
+        {{t "navigation.main.certifications"}}</PixNavigationButton>
     {{/if}}
     {{#if this.shouldDisplayAttestationsEntry}}
-      <LinkTo @route="authenticated.attestations" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="assignment" role="none" />
-        </span>
-        {{t "navigation.main.attestations"}}
-      </LinkTo>
+      <PixNavigationButton @route="authenticated.attestations" @icon="awards">
+        {{t "navigation.main.attestations"}}</PixNavigationButton>
     {{/if}}
     {{#if this.shouldDisplayMissionsEntry}}
-      <LinkTo @route="authenticated.missions" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="conversionPath" role="none" />
-        </span>
+      <PixNavigationButton @route="authenticated.missions" @icon="conversionPath">
         {{t "navigation.main.missions"}}
-      </LinkTo>
+      </PixNavigationButton>
     {{/if}}
-    <LinkTo @route={{this.organizationLearnersList.route}} class="sidebar-nav__item">
-      <span class="sidebar-nav__item-icon">
-        <PixIcon @name="infoUser" role="none" />
-      </span>
+
+    <PixNavigationButton @route={{this.organizationLearnersList.route}} @icon="infoUser">
       {{t this.organizationLearnersList.label}}
-    </LinkTo>
-    <LinkTo @route="authenticated.team" class="sidebar-nav__item">
-      <span class="sidebar-nav__item-icon">
-        <PixIcon @name="users" role="none" />
-      </span>
+    </PixNavigationButton>
+
+    <PixNavigationButton @route="authenticated.team" @icon="users">
       {{t "navigation.main.team"}}
-    </LinkTo>
+    </PixNavigationButton>
+
     {{#if this.shouldDisplayPlacesEntry}}
-      <LinkTo @route="authenticated.places" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="seat" role="none" />
-        </span>
+      <PixNavigationButton @route="authenticated.places" @icon="seat">
         {{t "navigation.main.places"}}
-      </LinkTo>
+      </PixNavigationButton>
     {{/if}}
+
     {{#if this.documentationUrl}}
-      <a class="sidebar-nav__item" href={{this.documentationUrl}} target="_blank" rel="noopener noreferrer">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="book" role="none" />
-        </span>
+      <PixNavigationButton href={{this.documentationUrl}} @target="_blank" rel="noopener noreferrer" @icon="book">
         {{t "navigation.main.documentation"}}
-      </a>
+      </PixNavigationButton>
     {{/if}}
     {{#if this.shouldDisplayMissionsEntry}}
-      <a
+      <PixNavigationButton
         href="https://pix.fr/support/enseignement-scolaire/1er-degre"
-        target="_blank"
-        class="sidebar-nav__item"
+        @target="_blank"
         rel="noopener noreferrer"
+        @icon="help"
       >
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="help" role="none" />
-        </span>
         {{t "navigation.main.support"}}
-      </a>
+      </PixNavigationButton>
     {{/if}}
-
-  </nav>
-</aside>
+  </:navElements>
+  <:footer>
+    <Layout::OrganizationPlacesOrCreditInfo
+      @placesCount={{@placesCount}}
+      @onCanShowCredit={{this.handleCanShowCredit}}
+    />
+    <Layout::SchoolSessionManagement />
+    {{#if this.shouldDisplaySeparator}}
+      <PixNavigationSeparator />
+    {{/if}}
+    <Layout::UserLoggedMenu @onChangeOrganization={{@onChangeOrganization}} />
+  </:footer>
+</PixNavigation>

orga/app/components/layout/sidebar.js

@@ -1,10 +1,17 @@
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export default class SidebarMenu extends Component {
   @service currentUser;
   @service url;
 
+  @tracked canShowCredit;
+
+  handleCanShowCredit = (value) => {
+    this.canShowCredit = value;
+  };
+
   get redirectionRoute() {
     if (this.shouldDisplayMissionsEntry) {
       return 'authenticated.missions';
@@ -37,6 +44,10 @@ export default class SidebarMenu extends Component {
     return this.currentUser.canAccessCampaignsPage;
   }
 
+  get shouldDisplaySeparator() {
+    return this.shouldDisplayMissionsEntry || this.shouldDisplayPlacesEntry || this.canShowCredit;
+  }
+
   get organizationLearnersList() {
     if (this.currentUser.isSCOManagingStudents) {
       return {

orga/app/components/layout/user-logged-menu.hbs

@@ -1,28 +1,17 @@
-<button
-  type="button"
-  {{on "click" this.toggleUserMenu}}
-  aria-haspopup="listbox"
-  aria-expanded="{{this.isMenuOpen}}"
-  aria-label={{t "navigation.user-logged-menu.button"}}
-  class="user-logged-button"
-  ...attributes
->
-  <span class="user-logged-button__text">
-    <span>{{this.currentUser.prescriber.firstName}} {{this.currentUser.prescriber.lastName}}</span>
-    <span>{{this.organizationNameAndExternalId}}</span>
-  </span>
-  <PixIcon @name={{if this.isMenuOpen "chevronTop" "chevronBottom"}} />
-</button>
-
-<Dropdown::Content @display={{this.isMenuOpen}} @close={{this.closeMenu}} class="user-logged-menu">
-  {{#each this.eligibleOrganizations as |organization|}}
-    <Dropdown::Item @onClick={{fn this.onOrganizationChange organization}}>
-      {{organization.name}}
-      {{#if organization.externalId}}({{organization.externalId}}){{/if}}
-    </Dropdown::Item>
-  {{/each}}
-  <Dropdown::ItemLink @linkTo="logout">
-    <PixIcon @name="logout" class="user-logged-menu__icon" />
-    {{t "navigation.user-logged-menu.logout"}}
-  </Dropdown::ItemLink>
-</Dropdown::Content>
+<p>
+  <strong>
+    {{this.currentUser.prescriber.firstName}}
+    {{this.currentUser.prescriber.lastName}}
+  </strong>
+  <br />
+  {{this.organizationNameAndExternalId}}
+</p>
+{{#if this.belongsToSeveralOrganizations}}
+  <PixStructureSwitcher
+    @value={{this.currentUser.organization.id}}
+    @structures={{this.eligibleOrganizations}}
+    @label={{t "navigation.user-logged-menu.button"}}
+    @onChange={{this.onOrganizationChange}}
+  />
+{{/if}}
+<PixButtonLink @variant="tertiary" class="" @route="logout">{{t "navigation.user-logged-menu.logout"}}</PixButtonLink>

orga/app/components/layout/user-logged-menu.js

@@ -1,15 +1,12 @@
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 export default class UserLoggedMenu extends Component {
   @service currentUser;
   @service router;
   @service store;
 
-  @tracked isMenuOpen = false;
-
   get organizationNameAndExternalId() {
     const organization = this.currentUser.organization;
     if (organization.externalId) {
@@ -25,19 +22,15 @@ export default class UserLoggedMenu extends Component {
     }
     return memberships
       .slice()
-      .map((membership) => membership.organization)
-      .filter((organization) => organization.get('id') !== this.currentUser.organization.id)
-      .sort((a, b) => a.get('name').localeCompare(b.get('name')));
-  }
-
-  @action
-  toggleUserMenu() {
-    this.isMenuOpen = !this.isMenuOpen;
+      .map((membership) => ({
+        label: `${membership.organization.get('name')} (${membership.organization.get('externalId')})`,
+        value: membership.organization.get('id'),
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label));
   }
 
-  @action
-  closeMenu() {
-    this.isMenuOpen = false;
+  get belongsToSeveralOrganizations() {
+    return this.eligibleOrganizations.length > 1;
   }
 
   @action
@@ -46,7 +39,7 @@ export default class UserLoggedMenu extends Component {
     const userOrgaSettingsId = prescriber.userOrgaSettings.get('id');
 
     const userOrgaSettings = await this.store.peekRecord('user-orga-setting', userOrgaSettingsId);
-    const selectedOrganization = await this.store.peekRecord('organization', organization.get('id'));
+    const selectedOrganization = await this.store.peekRecord('organization', organization.value);
 
     userOrgaSettings.organization = selectedOrganization;
     await userOrgaSettings.save({ adapterOptions: { userId: prescriber.id } });
@@ -57,7 +50,5 @@ export default class UserLoggedMenu extends Component {
 
     await this.currentUser.load();
     this.args.onChangeOrganization();
-
-    this.closeMenu();
   }
 }

orga/app/styles/app.scss

@@ -10,7 +10,6 @@
 @import 'globals/errors';
 @import 'globals/forms';
 @import 'globals/icons';
-@import 'globals/pages';
 @import 'globals/panels';
 @import 'globals/pix-loader';
 @import 'globals/tables';

orga/app/styles/components/layout/organization-places-or-credit-info.scss

@@ -2,18 +2,21 @@
   @extend %pix-body-s;
 
   display: flex;
-  flex-direction: column;
-  padding: 0 30px;
-  color: var(--pix-neutral-900);
+  justify-content: center;
+  padding: 0 var(--pix-spacing-4x);
   font-weight: var(--pix-font-bold);
 
-  &--inline {
-    flex-direction: row;
-  }
-
   &__warning {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
     color: var(--pix-error-700);
     font-weight: var(--pix-font-medium);
+    font-weight: 500;
+    background-color: rgb(var(--pix-neutral-0) / 70%);
+    border-radius: var(--radius-xs, 4px);
   }
 
   &__link {
@@ -28,7 +31,6 @@
   }
 
   .warning-icon {
-    margin: 0 var(--pix-spacing-1x);
     fill: var(--pix-error-700);
   }
 }

orga/app/styles/components/layout/sidebar.scss

@@ -65,3 +65,4 @@
     height: auto;
   }
 }
+