From e3f1fa39d55a67fd98e6d353e8685a89e319f26e Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 20:24:12 +0100
Subject: [PATCH] [DURACOM-195] add background on mouse over to dropdown user
 menu items

(cherry picked from commit 8e35c0f713f37c76e0711ac7f862d02ed4c29d83)
---
 .../auth-nav-menu.component.html              |  6 +--
 .../user-menu/user-menu.component.html        |  2 +-
 .../user-menu/user-menu.component.scss        | 41 +++++++++++++++++--
 src/styles/_custom_variables.scss             | 11 ++---
 .../header-navbar-wrapper.component.scss      | 24 -----------
 5 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 44487be1e3..07b37e220d 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -29,9 +29,9 @@
          [attr.data-test]="'user-menu' | dsBrowserOnly"
          ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
-      <ul id="logoutDropdownMenu" class="p-3" ngbDropdownMenu role="presentation">
-        <ds-themed-user-menu></ds-themed-user-menu>
-      </ul>
+      <div id="logoutDropdownMenu" ngbDropdownMenu>
+        <ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index 637b483db0..c20ad463d1 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -1,6 +1,6 @@
 <ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
 <ul *ngIf="!(loading$ | async)" class="user-menu" role="menu"
-    [ngClass]="{ 'pb-2 mb-2 border-bottom' : inExpandableNavbar }"
+    [ngClass]="inExpandableNavbar ? 'user-menu-mobile pb-2 mb-2 border-bottom' : 'user-menu-dropdown'"
     [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
   <li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
     {{dsoNameService.getName(user$ | async)}}<br>
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index 9409580cd4..8fa0019bf1 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -3,10 +3,43 @@
     list-style: none;
     margin: 0;
     padding: 0;
+
+    &.user-menu-dropdown {
+      .ds-menu-item-wrapper {
+        a.ds-menu-item, &.username-email-wrapper {
+          padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
+        }
+
+        a.ds-menu-item {
+          display: block;
+          color: var(--ds-expandable-navbar-link-color);
+          &:hover {
+            color: var(--ds-expandable-navbar-link-color-hover);
+            background-color: var(--ds-user-menu-dropdown-link-background-hover);
+          }
+        }
+      }
+    }
+
+    &.user-menu-mobile {
+      .ds-menu-item-wrapper {
+        padding-top: var(--ds-user-menu-item-vertical-padding);
+        padding-bottom: var(--ds-user-menu-item-vertical-padding);
+      }
+
+      .ds-menu-item {
+        display: inline-block;
+      }
+
+      .ds-menu-item, .ds-menu-toggler-wrapper {
+        color: var(--ds-expandable-navbar-link-color) !important;
+
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-background-hover) !important;
+        }
+      }
+
+    }
   }
 
-  .ds-menu-item {
-    display: inline-block;
-    padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
-  }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 3631fa7e29..c48ee29713 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -36,13 +36,14 @@
   --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
 
   --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
-  --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
-  --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
-  --ds-expandable-navbar-dropdown-item-vertical-padding: 0.25rem;
-  --ds-expandable-navbar-dropdown-item-horizontal-padding: 0;
+  --ds-expandable-navbar-link-color: #{$body-color};
+  --ds-expandable-navbar-link-color-hover: #{$body-color};
+  --ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover};
 
   --ds-user-menu-item-vertical-padding: 0.25rem;
-  --ds-user-menu-item-horizontal-padding: 0;
+  --ds-user-menu-dropdown-padding: 1rem;
+  --ds-user-menu-dropdown-link-color: #{$dark};
+  --ds-user-menu-dropdown-link-background-hover: #{$gray-200};
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index cabad27a5d..77e2d4ad51 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -69,30 +69,6 @@
       border-top: var(--ds-expandable-navbar-border-top-style);
       padding-top: var(--ds-expandable-navbar-padding-top);
 
-      ::ng-deep {
-
-        /* mobile menu */
-
-        .ds-menu-item {
-          padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
-        }
-
-        .ds-menu-item, .ds-menu-toggler-wrapper {
-          color: var(--ds-expandable-navbar-link-color) !important;
-
-          &:hover, &:focus {
-            color: var(--ds-expandable-navbar-link-color-hover) !important;
-          }
-        }
-
-        /* mobile submenu */
-
-        //.dropdown-menu {
-        //  .ds-menu-item {
-        //  }
-        //}
-
-      }
     }
   }
 }