139606: improved styling on user-menu & expandable-navbar-section components

Author: bram-maegerman

src/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -3,4 +3,14 @@
   div#header-navbar-wrapper {
     border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid;
   }
+
+  ::ng-deep {
+    nav#desktop-navbar {
+      .ds-menu-item-wrapper {
+        &:hover, &:focus {
+          background-color: var(--ds-navbar-link-bg-hover);
+        }
+      }
+    }
+  }
 }

src/app/navbar/navbar.component.scss

@@ -10,7 +10,7 @@
   /** Mobile menu styling **/
   @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
-      width: 100vw;
+      width: 100%;
       background-color: var(--bs-white);
       position: absolute;
       overflow: hidden;
@@ -43,17 +43,16 @@
 
   #main-navbar ::ng-deep {
     .ds-menu-item, .ds-menu-toggler-wrapper {
-      white-space: nowrap;
       text-decoration: none;
     }
 
     .dropdown-menu {
-      padding: 0.5rem !important;
+      padding: 0.5rem 0!important;
     }
 
     .ds-menu-item {
       display: block;
-      padding: 0.5rem 0;
+      padding: var(--ds-expandable-navbar-item-padding);
     }
   }
 

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

@@ -6,8 +6,8 @@
     [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>
-      <span class="text-muted">{{(user$ | async)?.email}}</span>
+      <span class="username-wrapper">{{dsoNameService.getName(user$ | async)}}<br></span>
+      <span class="email-wrapper">{{(user$ | async)?.email}}</span>
     </li>
     <li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
       <a class="ds-menu-item" role="menuitem"

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

@@ -7,39 +7,49 @@
     &.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);
+          padding: var(--ds-user-menu-item-padding);
+          .username-wrapper {
+            color: var(--ds-user-menu-username-color);
+          }
+          .email-wrapper {
+            color: var(--ds-user-menu-email-color);
+          }
         }
 
         a.ds-menu-item {
           display: block;
-          color: var(--ds-expandable-navbar-link-color);
+          color: var(--ds-user-menu-dropdown-link-color);
           &:hover {
-            color: var(--ds-expandable-navbar-link-color-hover);
-            background-color: var(--ds-user-menu-dropdown-link-background-hover);
+            color: var(--ds-user-menu-dropdown-link-color-hover);
+            background-color: var(--ds-user-menu-dropdown-link-bg-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);
+        padding: var(--ds-expandable-navbar-item-padding);
+        .username-wrapper {
+          color: var(--ds-user-menu-username-color);
+        }
+        .email-wrapper {
+          color: var(--ds-user-menu-email-color);
+        }
       }
 
       .ds-menu-item {
         display: inline-block;
       }
 
       .ds-menu-item, .ds-menu-toggler-wrapper {
-        color: var(--ds-expandable-navbar-link-color) !important;
+        color: var(--ds-user-menu-dropdown-link-color) !important;
 
         &:hover, &:focus {
-          color: var(--ds-expandable-navbar-link-background-hover) !important;
+          color: var(--ds-user-menu-dropdown-link-color-hover) !important;
+          background-color: var(--ds-user-menu-dropdown-link-bg-hover) !important;
         }
       }
-
     }
   }
-
 }

src/styles/_custom_variables.scss

@@ -26,10 +26,8 @@
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
 
   --ds-navbar-bg: #{$ds-navbar-bg};
-  --ds-navbar-item-vertical-padding: 0;
-  --ds-navbar-item-horizontal-padding: 0.25rem;
-  --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
-  --ds-navbar-dropdown-item-horizontal-padding: 1rem;
+  --ds-navbar-item-padding: 0rem 0.25rem;
+  --ds-navbar-dropdown-item-padding: 0.5rem 1rem;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
   --ds-navbar-link-bg: var(--ds-navbar-bg);
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
@@ -43,12 +41,14 @@
   --ds-expandable-navbar-link-bg: var(--ds-expandable-navbar-bg);
   --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
   --ds-expandable-navbar-link-bg-hover: var(--ds-expandable-navbar-link-bg);
-  --ds-expandable-navbar-item-vertical-padding: 0.25rem;
-
-  --ds-user-menu-item-vertical-padding: 0.25rem;
-  --ds-user-menu-dropdown-padding: 1rem;
-  --ds-user-menu-dropdown-link-color: #{$dark};
-  --ds-user-menu-dropdown-link-background-hover: #{$gray-200};
+  --ds-expandable-navbar-item-padding: 0.25rem 0;
+
+  --ds-user-menu-item-padding: 0.25rem 1rem;
+  --ds-user-menu-username-color: var(--bs-body-color);
+  --ds-user-menu-email-color: var(--bs-secondary-color);
+  --ds-user-menu-dropdown-link-color: var(--ds-expandable-navbar-link-color);
+  --ds-user-menu-dropdown-link-color-hover: var(--ds-expandable-navbar-link-color-hover);
+  --ds-user-menu-dropdown-link-bg-hover: var(--ds-expandable-navbar-link-bg-hover);
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;

src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -43,7 +43,7 @@
         }
         .ds-menu-item {
           // define here the style for top-level navbar menu items
-          padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
+          padding: var(--ds-navbar-item-padding);
         }
 
         .ds-menu-item-wrapper {
@@ -83,7 +83,7 @@
         .dropdown-menu {
           .ds-menu-item {
             // define here the style for second-level navbar menu items
-            padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
+            padding: var(--ds-navbar-dropdown-item-padding);
           }
         }
 
@@ -97,7 +97,7 @@
 
       #main-site-navigation {
         .ds-menu-item {
-          padding: var(--ds-expandable-navbar-item-vertical-padding) 0;
+          padding: var(--ds-expandable-navbar-item-padding);
         }
       }