♻️ admin: Add PixIcon in admin menu

1024pix · Nov 19, 2024 · 8bb50e9 · 8bb50e9
1 parent 2c698c6
commit 8bb50e9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 28 deletions.
diff --git a/admin/app/components/layout/menu-bar/entry.gjs b/admin/app/components/layout/menu-bar/entry.gjs
@@ -1,13 +1,13 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { LinkTo } from '@ember/routing';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 
 <template>
   <li class="menu-bar__entry">
     <PixTooltip @position="right" ...attributes>
       <:triggerElement>
         <LinkTo @route={{@path}}>
-          <FaIcon @icon={{@icon}} @title={{@title}} />
+          <PixIcon @name={{@icon}} @title={{@title}} @plainIcon={{true}} />
         </LinkTo>
       </:triggerElement>
       <:tooltip>{{@title}}</:tooltip>

diff --git a/admin/app/components/layout/menu-bar/index.gjs b/admin/app/components/layout/menu-bar/index.gjs
@@ -21,45 +21,45 @@ export default class MenuBar extends Component {
       <ul>
         <MenuBarEntry
           @path="authenticated.organizations"
-          @icon="building"
+          @icon="buildings"
           @title={{t "components.layout.menu-bar.entries.organizations"}}
         />
         <MenuBarEntry
           @path="authenticated.users"
-          @icon="user"
+          @icon="infoUser"
           @title={{t "components.layout.menu-bar.entries.users"}}
         />
         <MenuBarEntry
           @path="authenticated.certification-centers"
-          @icon="map-pin"
+          @icon="mapPin"
           @title={{t "components.layout.menu-bar.entries.certification-centers"}}
           @inline={{true}}
         />
         <MenuBarEntry
           @path="authenticated.sessions"
-          @icon="chalkboard-user"
+          @icon="session"
           @title={{t "components.layout.menu-bar.entries.sessions"}}
           @inline={{true}}
         />
 
         {{#if this.accessControl.hasAccessToCertificationActionsScope}}
           <MenuBarEntry
             @path="authenticated.certifications"
-            @icon="graduation-cap"
+            @icon="newRealease"
             @title={{t "components.layout.menu-bar.entries.certifications"}}
             @inline={{true}}
           />
         {{/if}}
         <MenuBarEntry
           @path="authenticated.complementary-certifications"
-          @icon="stamp"
+          @icon="extension"
           @title={{t "components.layout.menu-bar.entries.complementary-certifications"}}
           @inline={{true}}
         />
         {{#if this.accessControl.hasAccessToTargetProfilesActionsScope}}
           <MenuBarEntry
             @path="authenticated.target-profiles"
-            @icon="clipboard-list"
+            @icon="assignment"
             @title={{t "components.layout.menu-bar.entries.target-profiles"}}
             @inline={{true}}
           />
@@ -74,7 +74,7 @@ export default class MenuBar extends Component {
         }}
           <MenuBarEntry
             @path="authenticated.autonomous-courses"
-            @icon="signs-post"
+            @icon="signpost"
             @title={{t "components.layout.menu-bar.entries.autonomous-courses"}}
           />
         {{/if}}
@@ -89,26 +89,26 @@ export default class MenuBar extends Component {
         {{#if this.accessControl.hasAccessToTrainings}}
           <MenuBarEntry
             @path="authenticated.trainings"
-            @icon="book-open"
+            @icon="book"
             @title={{t "components.layout.menu-bar.entries.trainings"}}
           />
         {{/if}}
         {{#if (or this.currentUser.adminMember.isSuperAdmin this.currentUser.adminMember.isMetier)}}
           <MenuBarEntry
             @path="authenticated.tools"
-            @icon="screwdriver-wrench"
+            @icon="tools"
             @title={{t "components.layout.menu-bar.entries.tools"}}
           />
         {{/if}}
         {{#if this.currentUser.adminMember.isSuperAdmin}}
           <MenuBarEntry
             @path="authenticated.administration"
-            @icon="crown"
+            @icon="shieldPerson"
             @title={{t "components.layout.menu-bar.entries.administration"}}
           />
         {{/if}}
 
-        <MenuBarEntry @path="logout" @icon="power-off" @title={{t "components.layout.menu-bar.entries.logout"}} />
+        <MenuBarEntry @path="logout" @icon="power" @title={{t "components.layout.menu-bar.entries.logout"}} />
       </ul>
     </nav>
   </template>

diff --git a/admin/app/styles/components/layout/menu-bar.scss b/admin/app/styles/components/layout/menu-bar.scss
@@ -13,32 +13,32 @@
       padding: 0 15px;
 
       a {
-        position: relative;
-        display: block;
+        display: flex;
         width: 50px;
-        padding: 0;
-        color: var(--pix-neutral-100);
-        font-size: 1.25rem;
-        line-height: 50px;
-        text-align: center;
         border-radius: 5px;
         cursor: pointer;
-
-        i.fa {
-          width: 32px;
-          margin: 0 10px;
-        }
+        height: 50px;
+        align-items: center;
 
         &:hover {
-          color: var(--pix-neutral-0);
           text-decoration: none;
         }
 
         &.active {
-          color: var(--pix-neutral-0);
           font-weight: 600;
           background-color: var(--pix-neutral-500);
         }
+
+        svg {
+          fill: var(--pix-neutral-100);
+          width: 32px;
+          margin: 0 10px;
+        }
+
+        &:hover svg,
+        &.active svg {
+          fill: var(--pix-neutral-0);
+        }
       }
     }
   }