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';
@@ -23,11 +22,6 @@ export default class OrganizationPlacesOrCreditInfo extends Component {
         {{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">

orga/app/components/layout/sidebar.hbs

@@ -1,85 +1,62 @@
-<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"
         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}} />
+    <Layout::SchoolSessionManagement />
+    <PixNavigationSeparator />
+    <Layout::UserLoggedMenu @onChangeOrganization={{@onChangeOrganization}} />
+  </:footer>
+</PixNavigation>

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

@@ -1,28 +1,15 @@
-<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>
+<PixStructureSwitcher
+  @value={{this.currentUser.organization.id}}
+  @structures={{this.eligibleOrganizations}}
+  @label={{t "navigation.user-logged-menu.button"}}
+  @onChange={{this.onOrganizationChange}}
+/>
+<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,11 @@ 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;
-  }
-
-  @action
-  closeMenu() {
-    this.isMenuOpen = false;
+      .map((membership) => ({
+        label: membership.organization.get('name'),
+        value: membership.organization.get('id'),
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label));
   }
 
   @action
@@ -46,7 +35,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 +46,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

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   padding: 0 30px;
-  color: var(--pix-neutral-900);
   font-weight: var(--pix-font-bold);
 
   &--inline {

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

@@ -65,3 +65,9 @@
     height: auto;
   }
 }
+
+.pix-tooltip__trigger-element {
+  .pix-icon {
+    fill: white;
+  }
+}

orga/app/styles/pages/authenticated.scss

@@ -1,34 +1,6 @@
-.app {
-  display: flex;
-  align-items: stretch;
-  min-height: 100vh;
-}
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-
-  // Minus 280px because it corresponds to the sidebar's width
-  width: calc(100% - 280px);
-  background-color: var(--pix-neutral-20);
-
-  &__body {
-    flex: 1 0 auto;
-  }
-}
-
 .sticker-banner {
   position: sticky;
   top: 0;
   z-index: 200;
 }
 
-@include device-is('mobile') {
-  .app {
-    flex-direction: column;
-  }
-
-  .main-content {
-    width: 100%;
-  }
-}

orga/app/templates/authenticated.hbs

@@ -1,18 +1,11 @@
-<div class="app">
-  <Layout::Sidebar />
-
-  <div class="main-content">
-    <header>
-      <Layout::Topbar @placesCount={{@model.available}} @onChangeOrganization={{this.onChangeOrganization}} />
-    </header>
-
-    <main class="main-content__body page">
-      <Banner::TopBanners />
-      {{outlet}}
-    </main>
+<PixAppLayout @variant="orga" class="app">
+  <Layout::Sidebar @placesCount={{@model.available}} @onChangeOrganization={{this.onChangeOrganization}} />
 
+  <main class="main-content__body page">
+    <Banner::TopBanners />
+    {{outlet}}
     <Layout::Footer />
-  </div>
+  </main>
 
-  <NotificationContainer @position="bottom-right" />
-</div>
+</PixAppLayout>
+<NotificationContainer @position="bottom-right" />