[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,3 +1,4 @@
+:host {
   header {
     background-color: var(--ds-header-bg);
   }
@@ -5,9 +6,6 @@ header {
   .navbar-brand img {
     max-height: var(--ds-header-logo-height);
     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 {
@@ -29,3 +27,4 @@ header {
     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,3 +1,4 @@
+:host {
   nav.navbar {
     background-color: var(--ds-navbar-bg);
     align-items: baseline;
@@ -37,8 +38,8 @@ nav.navbar {
     }
   }
 
-.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 {
@@ -46,3 +47,4 @@ nav.navbar {
       }
     }
   }
+}

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};