From 5c8c926560f74c9bdfe615e3a3df56282638084a Mon Sep 17 00:00:00 2001
From: fabienSvstr <fabien.sevestre@my-digital-school.org>
Date: Wed, 4 Dec 2024 08:00:50 +0100
Subject: [PATCH] Fix

---
 .../components/sidebar/SidebarMenuList.vue    |   6 +-
 .../views/sidebar-menu/SidebarMenuPage.vue    | 193 +++++++++++-------
 2 files changed, 118 insertions(+), 81 deletions(-)

diff --git a/client/src/components/sidebar/SidebarMenuList.vue b/client/src/components/sidebar/SidebarMenuList.vue
index 5941816ff42..6619f820e54 100644
--- a/client/src/components/sidebar/SidebarMenuList.vue
+++ b/client/src/components/sidebar/SidebarMenuList.vue
@@ -6,7 +6,7 @@
       lines="none"
       class="list-sidebar-header title-h5"
       :class="isContentVisible ? 'open' : 'close'"
-      @click="toggleContent"
+      @click="isContentVisible = !isContentVisible"
     >
       <div class="list-sidebar-header-title">
         <ion-icon
@@ -43,10 +43,6 @@ defineProps<{
   title: Translatable;
   icon: string;
 }>();
-
-function toggleContent(): void {
-  isContentVisible.value = !isContentVisible.value;
-}
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/views/sidebar-menu/SidebarMenuPage.vue b/client/src/views/sidebar-menu/SidebarMenuPage.vue
index 2a67683e7b3..e6b6951fed8 100644
--- a/client/src/views/sidebar-menu/SidebarMenuPage.vue
+++ b/client/src/views/sidebar-menu/SidebarMenuPage.vue
@@ -219,72 +219,77 @@
           </div>
 
           <!-- manage organization -->
-          <div
+          <ion-list
             v-show="currentRouteIsOrganizationManagementRoute()"
-            class="manage-organization"
+            class="manage-organization list-sidebar"
           >
-            <ion-label class="title-h4">
-              {{
-                userInfo && userInfo.currentProfile === UserProfile.Admin
-                  ? $msTranslate('SideMenu.manageOrganization')
-                  : $msTranslate('SideMenu.organizationInfo')
-              }}
-            </ion-label>
+            <ion-header
+              lines="none"
+              class="list-sidebar-header title-h4"
+            >
+              <ion-text class="list-sidebar-header__title">
+                {{
+                  userInfo && userInfo.currentProfile === UserProfile.Admin
+                    ? $msTranslate('SideMenu.manageOrganization')
+                    : $msTranslate('SideMenu.organizationInfo')
+                }}
+              </ion-text>
+            </ion-header>
             <!-- user actions -->
-            <ion-list class="manage-organization-list users">
+            <div class="list-sidebar-content">
+              <!-- users -->
               <ion-item
-                button
                 lines="none"
-                class="sidebar-item menu-default users-title"
+                button
+                class="sidebar-item button-medium users-title"
                 :class="currentRouteIsUserRoute() ? 'item-selected' : 'item-not-selected'"
                 @click="navigateTo(Routes.Users)"
               >
-                <ion-icon
-                  :icon="people"
-                  class="sidebar-item-icon"
-                  slot="start"
-                />
-                <ion-label>{{ $msTranslate('SideMenu.users') }}</ion-label>
+                <div class="sidebar-item-manage">
+                  <ion-icon
+                    :icon="people"
+                    class="sidebar-item-icon"
+                  />
+                  <ion-text class="sidebar-item-manage__label">{{ $msTranslate('SideMenu.users') }}</ion-text>
+                </div>
               </ion-item>
-            </ion-list>
-            <!-- storage -->
-            <ion-list
-              class="manage-organization-list storage"
-              v-show="userInfo && userInfo.currentProfile === UserProfile.Admin && false"
-            >
+
+              <!-- storage -->
               <ion-item
-                button
                 lines="none"
-                class="sidebar-item storage-title menu-default"
+                button
+                class="sidebar-item button-medium storage-title"
                 :class="currentRouteIs(Routes.Storage) ? 'item-selected' : 'item-not-selected'"
                 @click="navigateTo(Routes.Storage)"
+                v-show="userInfo && userInfo.currentProfile === UserProfile.Admin && false"
               >
-                <ion-icon
-                  :icon="pieChart"
-                  class="sidebar-item-icon"
-                  slot="start"
-                />
-                <ion-label> {{ $msTranslate('SideMenu.storage') }}</ion-label>
+                <div class="sidebar-item-manage">
+                  <ion-icon
+                    :icon="pieChart"
+                    class="sidebar-item-icon"
+                  />
+                  <ion-text class="sidebar-item-manage__label">{{ $msTranslate('SideMenu.storage') }}</ion-text>
+                </div>
               </ion-item>
-            </ion-list>
-            <!-- org info -->
-            <ion-list class="manage-organization-list organization">
+
+              <!-- org info -->
               <ion-item
                 button
                 lines="none"
-                class="sidebar-item organization-title menu-default"
+                class="sidebar-item button-medium organization-title"
                 :class="currentRouteIs(Routes.Organization) ? 'item-selected' : 'item-not-selected'"
                 @click="navigateTo(Routes.Organization)"
               >
-                <ion-icon
-                  :icon="informationCircle"
-                  class="sidebar-item-icon"
-                  slot="start"
-                />
-                <ion-label>{{ $msTranslate('SideMenu.organizationInfo') }}</ion-label>
+                <div class="sidebar-item-manage">
+                  <ion-icon
+                    :icon="informationCircle"
+                    class="sidebar-item-icon"
+                  />
+                  <ion-text class="sidebar-item-manage__label">{{ $msTranslate('SideMenu.organizationInfo') }}</ion-text>
+                </div>
               </ion-item>
-            </ion-list>
-          </div>
+            </div>
+          </ion-list>
         </ion-content>
       </ion-menu>
 
@@ -593,7 +598,7 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
     z-index: 0;
   }
 
-  .sidebar-content {
+  &-content {
     --background: transparent;
     position: relative;
     z-index: 12;
@@ -742,8 +747,6 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
   }
 }
 
-// eslint-disable-next-line vue-scoped-css/no-unused-selector
-
 ion-split-pane {
   --side-min-width: var(--parsec-sidebar-menu-min-width);
   --side-max-width: var(--parsec-sidebar-menu-max-width);
@@ -754,24 +757,59 @@ ion-menu {
   user-select: none;
 }
 
-.list-sidebar__no-workspace {
-  color: var(--parsec-color-light-secondary-inversed-contrast);
-  opacity: 0.5;
-}
-
-.list-sidebar-divider {
-  background: var(--parsec-color-light-primary-30-opacity15);
+.list-sidebar {
   display: flex;
-  justify-content: center;
-  height: 1px;
-  width: 100%;
-  margin-bottom: 1.5rem;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: var(--parsec-radius-8);
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: border 0.2s ease-in-out;
+    border-top: 1px solid var(--parsec-color-light-primary-30-opacity15);
+    padding: 1.5em 0 1em 0.5rem;
+
+    &__title {
+      color: var(--parsec-color-light-secondary-inversed-contrast);
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__no-workspace {
+    color: var(--parsec-color-light-secondary-inversed-contrast);
+    opacity: 0.5;
+  }
+
+  &-divider {
+    background: var(--parsec-color-light-primary-30-opacity15);
+    display: flex;
+    justify-content: center;
+    height: 1px;
+    width: 100%;
+    margin-bottom: 1.5rem;
+  }
 }
 
 .sidebar-item {
+  --background: none;
   border-radius: var(--parsec-radius-8);
-  border: solid 1px var(--parsec-color-light-primary-800);
   --min-height: 0;
+  --padding-start: 0.75rem;
+  --padding-end: 0.75rem;
+  --padding-bottom: 0.5rem;
+  --padding-top: 0.5rem;
 
   &:active,
   &.item-selected {
@@ -784,6 +822,26 @@ ion-menu {
     margin: 0;
     margin-inline-end: 12px;
   }
+
+  .sidebar-item-manage {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    &__label {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: var(--parsec-color-light-secondary-premiere);
+      width: 100%;
+    }
+  }
+
+  &:hover {
+    outline: solid 1px var(--parsec-color-light-primary-30-opacity15);
+    cursor: pointer;
+  }
 }
 
 .freeze-card {
@@ -888,21 +946,4 @@ ion-menu {
     color: var(--parsec-color-light-primary-600);
   }
 }
-
-.manage-organization {
-  display: flex;
-  flex-direction: column;
-  color: var(--parsec-color-light-secondary-inversed-contrast);
-  padding: 0 1.25rem;
-  gap: 0.5rem;
-
-  .title-h4 {
-    padding: 1.5em 0 1em;
-    border-top: 1px solid var(--parsec-color-light-primary-30-opacity15);
-  }
-
-  &-list {
-    padding: 0;
-  }
-}
 </style>