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

Author: bram-maegerman

config/config.yml

@@ -3,3 +3,4 @@ rest:
   host: sandbox.dspace.org
   port: 443
   nameSpace: /server
+

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/expandable-navbar-section/expandable-navbar-section.component.html

@@ -16,11 +16,11 @@
       [attr.aria-controls]="expandableNavbarSectionId()"
       class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
       [class.disabled]="section.model?.disabled">
-      <span class="flex-fill">
+      <span class="flex-fill text-truncate">
         <ng-container
         *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
       </span>
-      <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
+      <i class="fas fa-caret-down fa-xs toggle-menu-icon flex-shrink-0" aria-hidden="true"></i>
     </a>
     @if ((active$ | async).valueOf() === true) {
       <div (click)="deactivateSection($event)"

src/app/navbar/navbar.component.scss

@@ -48,7 +48,7 @@
     }
 
     .dropdown-menu {
-      padding: 0.5rem !important;
+      padding: 0.5rem 0!important;
     }
 
     .ds-menu-item {

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,38 +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);
+          .username-wrapper {
+            color: var(--ds-user-menu-username-color);
+          }
+          .email-wrapper {
+            color: var(--ds-user-menu-email-color);
+          }
+          padding: var(--ds-navbar-item-padding);
         }
 
         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,13 @@
   --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-expandable-navbar-item-padding: 0.25rem 0;
 
-  --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-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-navbar-item-padding);
         }
       }