[DURACOM-195] Base components

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

@@ -5,6 +5,7 @@ import { hasValue } from '../shared/empty.util';
 import { Observable, Subscription } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 
 /**
  * This component represents a wrapper for the horizontal navbar and the header
@@ -18,15 +19,20 @@ export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy {
   @HostBinding('class.open') isOpen = false;
   private sub: Subscription;
   public isNavBarCollapsed: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
+
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     private store: Store<AppState>,
-    private menuService: MenuService
+    private menuService: MenuService,
+    protected windowService: HostWindowService,
   ) {
   }
 
   ngOnInit(): void {
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
     this.isNavBarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sub = this.isNavBarCollapsed.subscribe((isCollapsed) => this.isOpen = !isCollapsed);
   }

src/app/header/header.component.html

@@ -11,7 +11,7 @@
         <ds-context-help-toggle></ds-context-help-toggle>
         <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
-        <div *ngIf="isXsOrSm$ | async" class="pl-2">
+        <div *ngIf="isMobile$ | async" class="pl-2">
           <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
                   aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">

src/app/header/header.component.scss

@@ -1,31 +1,30 @@
-header {
+:host {
-  background-color: var(--ds-header-bg);
+  header {
-}
+    background-color: var(--ds-header-bg);
+  }
 
-.navbar-brand img {
+  .navbar-brand img {
-  max-height: var(--ds-header-logo-height);
+    max-height: var(--ds-header-logo-height);
-  max-width: 100%;
+    max-width: 100%;
-  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+  }
-    max-height: var(--ds-header-logo-height-xs);
+
+  .navbar-toggler .navbar-toggler-icon {
+    background-image: none !important;
+    line-height: 1.5;
+  }
+
+  .navbar-toggler {
+    border: none;
+    color: var(--ds-header-icon-color);
+
+    &:hover, &:focus {
+      color: var(--ds-header-icon-color-hover);
+    }
+  }
+
+  .navbar {
+    display: flex;
+    gap: calc(var(--bs-spacer) / 3);
+    align-items: center;
   }
 }
-
-.navbar-toggler .navbar-toggler-icon {
-  background-image: none !important;
-  line-height: 1.5;
-}
-
-.navbar-toggler {
-  border: none;
-  color: var(--ds-header-icon-color);
-
-  &:hover, &:focus {
-    color: var(--ds-header-icon-color-hover);
-  }
-}
-
-.navbar {
-  display: flex;
-  gap: calc(var(--bs-spacer) / 3);
-  align-items: center;
-}

src/app/header/header.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
-import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 
 /**
  * Represents the header with the logo and simple navigation
@@ -18,8 +18,10 @@ export class HeaderComponent implements OnInit {
    * @type {Observable<string>}
    */
   public isAuthenticated: Observable<boolean>;
-  public isXsOrSm$: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
+
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     protected menuService: MenuService,
@@ -28,7 +30,7 @@ export class HeaderComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
   }
 
   public toggleNavbar(): void {

src/app/navbar/navbar.component.html

@@ -1,11 +1,11 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
     <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
-    <div class="navbar-inner-container w-100" [class.container]="!(isXsOrSm$ | async)">
+    <div class="navbar-inner-container w-100" [class.container]="!(isMobile$ | async)">
         <div class="reset-padding-md w-100">
             <div id="collapsingNav">
                 <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
-                    <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
+                    <li *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
                         <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
                     </li>
                     <li *ngFor="let section of (sections | async)">

src/app/navbar/navbar.component.scss

@@ -1,48 +1,50 @@
-nav.navbar {
+:host {
+  nav.navbar {
     background-color: var(--ds-navbar-bg);
     align-items: baseline;
-}
+  }
 
-/** Mobile menu styling **/
+  /** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
-        width: 100%;
+      width: 100%;
-        background-color: var(--bs-white);
+      background-color: var(--bs-white);
-        position: absolute;
+      position: absolute;
-        overflow: hidden;
+      overflow: hidden;
-        height: 0;
+      height: 0;
-        z-index: var(--ds-nav-z-index);
+      z-index: var(--ds-nav-z-index);
-        &.open {
+      &.open {
-          height: auto;
+        height: auto;
-          min-height: 100vh; //doesn't matter because wrapper is sticky
+        min-height: 100vh; //doesn't matter because wrapper is sticky
-          border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
+        border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
-        }
+      }
     }
-}
+  }
 
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  @media screen and (min-width: map-get($grid-breakpoints, md)) {
     .reset-padding-md {
-        margin-left: calc(var(--bs-spacer) / -2);
+      margin-left: calc(var(--bs-spacer) / -2);
-        margin-right: calc(var(--bs-spacer) / -2);
+      margin-right: calc(var(--bs-spacer) / -2);
     }
-}
+  }
 
-/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+  /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
-.navbar-expand-md.navbar-container {
+  .navbar-expand-md.navbar-container {
     @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
-        > .navbar-inner-container {
+      > .navbar-inner-container {
-            padding: 0 var(--bs-spacer);
+        padding: 0 var(--bs-spacer);
-        }
+      }
-        padding: 0;
+      padding: 0;
     }
-}
+  }
 
-.navbar-nav ::ng-deep {
+.navbar-nav {
-  a.nav-link, .btn.nav-link {
+  ::ng-deep a.nav-link, .btn.nav-link {
     color: var(--ds-navbar-link-color);
 
-    &:hover, &:focus {
+      &:hover, &:focus {
-      color: var(--ds-navbar-link-color-hover);
+        color: var(--ds-navbar-link-color-hover);
+      }
     }
   }
 }

src/app/navbar/navbar.component.ts

@@ -1,8 +1,8 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { slideMobileNav } from '../shared/animations/slide';
 import { MenuComponent } from '../shared/menu/menu.component';
 import { MenuService } from '../shared/menu/menu.service';
-import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 import { BrowseService } from '../core/browse/browse.service';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
@@ -22,12 +22,13 @@ import { isAuthenticated } from '../core/auth/selectors';
   templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
-export class NavbarComponent extends MenuComponent {
+export class NavbarComponent extends MenuComponent implements OnInit {
   /**
    * The menu ID of the Navbar is PUBLIC
    * @type {MenuID.PUBLIC}
    */
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   /**
    * Whether user is authenticated.
@@ -35,7 +36,7 @@ export class NavbarComponent extends MenuComponent {
    */
   public isAuthenticated$: Observable<boolean>;
 
-  public isXsOrSm$: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
 
   constructor(protected menuService: MenuService,
     protected injector: Injector,
@@ -51,7 +52,7 @@ export class NavbarComponent extends MenuComponent {
 
   ngOnInit(): void {
     super.ngOnInit();
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
     this.isAuthenticated$ = this.store.pipe(select(isAuthenticated));
   }
 }

src/styles/_custom_variables.scss

@@ -20,8 +20,6 @@
   --ds-sidebar-z-index: 20;
 
   --ds-header-bg: #{$white};
-  --ds-header-logo-height: 50px;
-  --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$link-color};
   --ds-header-icon-color-hover: #{$link-hover-color};
   --ds-navbar-bg: var(--ds-header-bg);
@@ -33,6 +31,13 @@
   --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
   --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
 
+  @include media-breakpoint-up(md) {
+    --ds-header-logo-height: 50px;
+  }
+  @include media-breakpoint-down(sm) {
+    --ds-header-logo-height: 50px;
+  }
+
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
   --ds-admin-sidebar-bg: #{$admin-sidebar-bg};