Merge pull request #1078 from MTES-MCT/menu

ux: adjust icon size, margins
MTES-MCT · Jan 13, 2025 · 6e78f0a · 6e78f0a
2 parents e9051c1 + ce75524
commit 6e78f0a
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 5 deletions.
diff --git a/frontend/src/components/Collapse/collapse.module.scss b/frontend/src/components/Collapse/collapse.module.scss
@@ -2,7 +2,7 @@
   $background-color: var(--grey-975);
 
   line-height: initial;
-  width: 350px;
+  width: 300px;
   text-align: left;
 
   .header {

diff --git a/frontend/src/components/Header/SmallHeader.tsx b/frontend/src/components/Header/SmallHeader.tsx
@@ -39,10 +39,11 @@ function SmallHeader() {
   ): MainNavigationProps.Item {
     const link = getUserNavItem(navItem);
     return {
+      className: styles.mainNavigationItem,
       linkProps: {
         to: link.url
       },
-      text: <><span className={link.icon} aria-hidden="true"></span> {link.label} {link.showNewBadge && <Badge small={true} severity='success' noIcon={true} className="fr-ml-1w">Nouveau</Badge>}</>,
+      text: <><span className={`${link.icon} ${styles.icon}`} aria-hidden="true"></span>{link.label}{link.showNewBadge && <Badge small={true} severity='success' noIcon={true} className="fr-ml-1w fr-mr-0w">Nouveau</Badge>}</>,
       isActive: location.pathname.startsWith(link.url),
     };
   }
@@ -116,7 +117,7 @@ function SmallHeader() {
                   }}
                 />
               ) : (
-                <Typography component="span" mr={2} variant="body2">
+                <Typography className={styles.establishmentName} component="span" mr={2} variant="body2">
                   {establishment?.name}
                 </Typography>
               )

diff --git a/frontend/src/components/Header/small-header.module.scss b/frontend/src/components/Header/small-header.module.scss
@@ -19,3 +19,47 @@
   height: 2px;
   z-index: 1000;
 }
+
+.icon::before {
+  --icon-size: 1.25rem;
+  margin-right: 0.5rem;
+  position: relative;
+  top: -2px;
+}
+
+.mainNavigationItem {
+  margin-left: 0px !important;
+}
+
+@media screen and (max-width: 1484px) {
+  .establishmentName {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 1412px) {
+  .establishmentName {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 1362px) {
+  .establishmentName {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 1312px) {
+  .establishmentName {
+    display: none;
+  }
+}
diff --git a/frontend/src/models/UserNavItem.tsx b/frontend/src/models/UserNavItem.tsx
@@ -21,7 +21,7 @@ export const getUserNavItem = (userNavItem: UserNavItems): UserNavItem => {
     case UserNavItems.Resources:
       return { url: '/ressources', label: 'Ressources', icon: 'fr-icon-information-line' };
     case UserNavItems.Analysis:
-      return { url: '/analyses', label: 'Analyses', showNewBadge: true, icon: 'fr-icon-bar-chart-box-line' };
+      return { url: '/analyses', label: 'Analyses', showNewBadge: true, icon: 'ri-bar-chart-2-line' };
     default:
       return { url: '/', label: 'Accueil', icon: 'fr-icon-building-line' };
   }

diff --git a/frontend/src/views/Account/AccountSideMenu.tsx b/frontend/src/views/Account/AccountSideMenu.tsx
@@ -5,6 +5,7 @@ import { logOut } from '../../store/actions/authenticationAction';
 import { useUser } from '../../hooks/useUser';
 import { useLocation } from 'react-router-dom';
 import classNames from 'classnames';
+import styles from './account-side-menu.module.scss';
 
 const AccountSideMenu = () => {
   const location = useLocation();
@@ -31,7 +32,7 @@ const AccountSideMenu = () => {
         </AppLink>
       </div>
       <hr className="fr-py-1w" />
-      <Text className="color-grey-625" size="sm" bold spacing="mb-0">
+      <Text className={`color-grey-625 ${styles.establishmentName}`} size="sm" bold spacing="mb-0">
         {establishment?.name}
       </Text>
       <div className="fr-py-2w">

diff --git a/frontend/src/views/Account/account-side-menu.module.scss b/frontend/src/views/Account/account-side-menu.module.scss
@@ -0,0 +1,4 @@
+.establishmentName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}