[DURACOM-195] add background on mouse over to dropdown user menu items

Author: davide-negretti

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>

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>

src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss

@@ -3,10 +3,43 @@
     list-style: none;
     margin: 0;
     padding: 0;
-  }
 
-  .ds-menu-item {
-    display: inline-block;
-    padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
+    &.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;
+        }
+      }
+
+    }
   }
+
 }

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;

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 {
-        //  }
-        //}
-
-      }
     }
   }
 }