Add change password menu to user menu and update css (#441)

* refactor: add change password menu and update css * refactor: highlight active route for user menu
dzangolab · Dec 26, 2024 · 64739fe · 64739fe
1 parent e928d35
commit 64739fe
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 76 deletions.
diff --git a/apps/demo/src/locales/en/app.json b/apps/demo/src/locales/en/app.json
@@ -2,6 +2,7 @@
   "header": {
     "menu": {
       "about": "About",
+      "changePassword": "Change password",
       "home": "Home",
       "profile": "Profile",
       "login": "Login",

diff --git a/apps/demo/src/locales/fr/app.json b/apps/demo/src/locales/fr/app.json
@@ -2,6 +2,7 @@
   "header": {
     "menu": {
       "about": "A propos de nous",
+      "changePassword": "Change password",
       "home": "Accueil",
       "profile": "Profil",
       "login": "Connexion",

diff --git a/packages/vue-user/src/components/DropdownUserMenu.vue b/packages/vue-user/src/components/DropdownUserMenu.vue
@@ -5,19 +5,37 @@
     :class="{ expanded: expanded }"
     @click="toggle"
   >
-    <div class="email">
-      {{ user?.email }}
+    <div class="trigger">
+      <span class="email">
+        {{ user?.email }}
+      </span>
+      <span class="toggle">
+        <svg
+          aria-label="open user menu"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            fill-rule="evenodd"
+            d="M12 7C12.2652 7 12.5196 7.10536 12.7071 7.29289L19.7071 14.2929C20.0976 14.6834 20.0976 15.3166 19.7071 15.7071C19.3166 16.0976 18.6834 16.0976 18.2929 15.7071L12 9.41421L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L11.2929 7.29289C11.4804 7.10536 11.7348 7 12 7Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </span>
     </div>
-    <span class="toggle">
-      <img src="../assets/svg/up-chevron.svg" alt="open menu" />
-    </span>
     <ul class="dropdown">
+      <li>
+        <router-link :to="{ name: 'changePassword' }">
+          {{ $t("app.header.menu.changePassword") }}
+        </router-link>
+      </li>
       <li>
         <router-link :to="{ name: 'profile' }">
           {{ $t("app.header.menu.profile") }}
         </router-link>
       </li>
-
       <li class="option" @click="$emit('logout')">
         {{ $t("app.header.menu.logout") }}
       </li>
@@ -62,71 +80,93 @@ onClickOutside(dzangolabVueUserUserMenu, (event) => {
 
 <style lang="css">
 nav.user-menu-dropdown {
-  align-items: flex-start;
   cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-  justify-content: space-between;
+  min-width: var(--dropdown-width, 6rem);
   padding: 0;
   position: relative;
-  min-width: var(--dropdown-width, 6rem);
 }
 
 nav.user-menu-dropdown .email {
   cursor: pointer;
+  max-width: 13rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+nav.user-menu-dropdown > .trigger {
+  --_padding-h: var(--layout-nav-item-paddind-h, 1rem);
+  --_padding-v: var(--layout-nav-item-paddind-v, 0.625rem);
+
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  justify-content: space-between;
+  padding: var(--_padding-v) var(--_padding-h);
 }
 
-nav.user-menu-dropdown > span.toggle {
+nav.user-menu-dropdown span.toggle {
   align-self: start;
+  display: block;
   font-size: 1.5rem;
   line-height: 1.25rem;
   text-align: center;
   width: 1.25rem;
 }
 
-nav.user-menu-dropdown.expanded > span.toggle > img {
-  transform: rotate(180deg);
+nav.user-menu-dropdown.expanded,
+nav.user-menu-dropdown:hover {
+  background-color: var(--dropdown-container-bg-color, #e5e5e5);
+  border-radius: 5px;
 }
 
-nav.user-menu-dropdown > span.toggle > img {
+nav.user-menu-dropdown.expanded span.toggle > svg {
+  transform: rotate(-180deg);
+}
+
+nav.user-menu-dropdown span.toggle > svg {
   transition: transform 0.5s ease;
 }
 
 nav.user-menu-dropdown > ul.dropdown {
   background-color: var(--dropdown-bg-color, #fff);
   border: var(--dropdown-border, 1px solid grey);
   border-radius: var(--dropdown-border-radius, 5px);
+  inset: 0px auto auto 0px;
   list-style: none;
-  padding-inline-start: 0;
+  max-height: 0;
   padding: 0.15rem 0;
+  padding-inline-start: 0;
   position: absolute;
-  right: 0;
-  top: 100%;
-  max-height: 0;
-  transition: max-height 0.3s ease;
+  transform: translate3d(0, 48.5px, 0px);
+  transition: max-height 0.4s ease;
   visibility: hidden;
   z-index: var(--dropdown-z-index, 9999);
 }
 
 nav.user-menu-dropdown.expanded > ul.dropdown {
   height: auto;
   max-height: 10rem;
+  overflow-y: hidden;
   visibility: visible;
 }
 
 nav.user-menu-dropdown > ul.dropdown > li {
   cursor: pointer;
-  list-style: none;
-  padding: 0.25rem 0.5rem;
+  transition: all var(--transition-duration) ease 0s;
 }
 
-nav.user-menu-dropdown > .dropdown > li:hover {
-  background-color: var(--dropdown-bg-color-hover, #dbe9fa);
+nav.user-menu-dropdown > .dropdown > li:hover,
+nav.user-menu > ul > li:has(.router-link-exact-active) {
+  background-color: var(--dropdown-bg-color-hover, #e5e5e5);
 }
 
-nav.user-menu-dropdown a {
+nav.user-menu-dropdown > ul.dropdown > li > a,
+nav.user-menu-dropdown > ul.dropdown > li:not(:has(a)) {
   color: inherit;
+  display: block;
+  padding: 0.7rem 1.25rem;
   text-decoration: none;
+  width: 100%;
 }
 </style>
diff --git a/packages/vue-user/src/layouts/SidebarHeaderLayout.vue b/packages/vue-user/src/layouts/SidebarHeaderLayout.vue
@@ -110,24 +110,18 @@ const menu = computed(() => {
 
 <style lang="css">
 .sidebar-header-layout .user-menu > ul {
-  --_border-color: var(--sidebar-border-color, #dee2e6a6);
-  --menu-margin-left: 0;
-
-  border-top: 1px solid var(--_border-color);
   flex-direction: column;
 }
 
 .sidebar-header-layout .user-menu > ul > li,
 .sidebar-header-layout .user-menu-dropdown {
   --_font-size: var(--font-size-min, 0.8rem);
   --_font-weight: var(--font-weight, 450);
-  --_padding-h: var(--sidebar-padding-h, 1rem);
+  --dropdown-container-bg-color: #0870e5;
   --menu-highlight-color: #0870e5;
 
   font-size: var(--_font-size);
   font-weight: var(--_font-weight);
-  padding: 0;
-  padding-left: var(--_padding-h);
   width: 100%;
 }
 
@@ -146,22 +140,6 @@ const menu = computed(() => {
   width: 100%;
 }
 
-.sidebar-header-layout .sidebar-menu-wrapper .user-menu .email {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: var(--user-menu-email-width, 13rem);
-}
-
-.sidebar-header-layout .sidebar-menu-wrapper .user-menu > ul > li > a {
-  padding: 0;
-}
-
-.sidebar-header-layout .user-menu-dropdown {
-  --_padding-h: var(--sidebar-padding-h, 1rem);
-
-  padding-right: var(--_padding-h);
-}
-
 .sidebar-header-layout .user-menu-dropdown:hover {
   background-color: #0870e5;
 }
@@ -174,13 +152,21 @@ const menu = computed(() => {
   align-self: center;
 }
 
+.sidebar-header-layout .user-menu-dropdown > .dropdown {
+  opacity: 0;
+  transform: translate3d(0, 0, 0);
+  transition:
+    transform 0.3s ease,
+    opacity 0.5s ease;
+}
+
 .sidebar-header-layout .user-menu-dropdown.expanded > .dropdown {
   --dropdown-bg-color: #007aff;
   --dropdown-border: 1px solid #007aff;
 
-  bottom: 105%;
   box-shadow: 0 -2px 10px 2px #0870e5;
-  top: unset;
+  opacity: 1;
+  transform: translate3d(0, -152.5px, 0);
   width: 100%;
 }
 </style>
diff --git a/packages/vue-user/src/layouts/SidebarOnlyLayout.vue b/packages/vue-user/src/layouts/SidebarOnlyLayout.vue
@@ -102,24 +102,18 @@ const menu = computed(() => {
 
 <style lang="css">
 .sidebar-only .user-menu > ul {
-  --_border-color: var(--sidebar-border-color, #dee2e6a6);
-  --menu-margin-left: 0;
-
-  border-top: 1px solid var(--_border-color);
   flex-direction: column;
 }
 
 .sidebar-only .user-menu > ul > li,
 .sidebar-only .user-menu-dropdown {
   --_font-size: var(--font-size-min, 0.8rem);
   --_font-weight: var(--font-weight, 450);
-  --_padding-h: var(--sidebar-padding-h, 1rem);
+  --dropdown-container-bg-color: #0870e5;
   --menu-highlight-color: #0870e5;
 
   font-size: var(--_font-size);
   font-weight: var(--_font-weight);
-  padding: 0;
-  padding-left: var(--_padding-h);
   width: 100%;
 }
 
@@ -138,22 +132,6 @@ const menu = computed(() => {
   width: 100%;
 }
 
-.sidebar-only .sidebar-menu-wrapper .user-menu .email {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: var(--user-menu-email-width, 13rem);
-}
-
-.sidebar-only .sidebar-menu-wrapper .user-menu > ul > li > a {
-  padding: 0;
-}
-
-.sidebar-only .user-menu-dropdown {
-  --_padding-h: var(--sidebar-padding-h, 1rem);
-
-  padding-right: var(--_padding-h);
-}
-
 .sidebar-only .user-menu-dropdown:hover {
   background-color: #0870e5;
 }
@@ -163,12 +141,20 @@ const menu = computed(() => {
 }
 
 .sidebar-only .user-menu-dropdown > .dropdown {
+  opacity: 0;
+  transform: translate3d(0, 0, 0);
+  transition:
+    transform 0.3s ease,
+    opacity 0.5s ease;
+}
+
+.sidebar-only .user-menu-dropdown.expanded > .dropdown {
   --dropdown-bg-color: #007aff;
   --dropdown-border: 1px solid #007aff;
 
-  bottom: 105%;
   box-shadow: 0 -2px 10px 2px #0870e5;
-  top: unset;
+  opacity: 1;
+  transform: translate3d(0, -152.5px, 0);
   width: 100%;
 }