File

projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts

Description

Intended to appear at the top of document and provides for branding, links and page title.

Extends

WvrBaseComponent

Implements

AfterContentChecked AfterViewInit

Metadata

changeDetection	`ChangeDetectionStrategy.Default`
selector	`wvr-header-component`
styleUrls	`./wvr-header.component.scss`
templateUrl	`./wvr-header.component.html`

Index

Constructor

constructor(injector: Injector)

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:87

The weaver header component constructor

Parameters :

Name	Type	Optional
injector	`Injector`	No

Inputs

bottomNavHeight
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:71
Allows for the override of the --bottom-nav-height css variable. Default: --wvr-navbar-height

bottomNavPadding
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:74
Allows for the override of the --bottom-nav-padding css variable. Default: --wvr-navbar-padding

bottomNavThemeVariant
Type : `ThemeVariantName`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:47
Allows for the override of the components theme variant in the bottom nav

displayBottomNav
Type : `"true" \| "false"`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:77
Used to toggle display of bottom navbar section.

headerTitle
Type : `string`
Default value : `'Weaver Header Component'`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:21
The header title value to be displayed as a page title.

headerTitleUrl
Type : `string`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:24
A URL link clickable from the page title to landing page.

logoHref
Type : `string`
Default value : `'#logo'`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:30
A resolvable URL to a location linkable from the logo.

logoImgHeight
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:62
Allows for the override of the --logo-img-width css variable. Default: 30px

logoImgMargin
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:65
Allows for the override of the --logo-img-margin css variable. Default: 0 0 0 0

logoImgWidth
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:59
Allows for the override of the --logo-img-width css variable. Default: 30px

logoSrc
Type : `string`
Default value : `${this.appConfig.assetsUrl}/icons/custom/weaver-w.svg`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:27
A resolvable URI to an image to be displayed as the logo.

logoText
Type : `string`
Default value : `'Weaver Components'`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:18
The text value to be displayed beside the logo.

titleRowHeight
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:68
Allows for the override of the --title-row-height css variable. Default: --wvr-navbar-height

titleRowThemeVariant
Type : `ThemeVariantName`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:41
Allows for the override of the components theme variant in the title row

topNavHeight
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:53
Allows for the override of the --top-nav-height css variable. Default: --wvr-navbar-height

topNavPadding
Type : `any`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:56
Allows for the override of the --top-nav-padding css variable. Default: --wvr-navbar-padding

topNavThemeVariant
Type : `ThemeVariantName`
Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:35
Allows for the override of the components theme variant in the top nav

animate
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:68`
A setter which parses a json string describing animation instructions and stores the derived object in `_animationSettings`.

animateConfig
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:76`
A setter which parses a json string describing animation setting and stores the derived object in `_animationConfig`.

animateId
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:84`
An attribute input allowing for the designation of an animation identifier for the purpose of animation targeting.

animateTarget
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:87`
An attribute input allowing for the designation of an animation target for animation events.

hiddenInMobile
Type : `boolean`
Default value : `false`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:107`
An attribute input specifying if this component should be hidden in the mobile layout.

ngBindings
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:116`

themeVariant
Type : `ThemeVariantName`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:55`
Used to define the class type of an alert component.

wvrData
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:45`

wvrTheme
Type : `string`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:50`
Allows for the override of theme for the particular component.

Outputs

animationEventTrigger
Type : `EventEmitter`
Inherited from `WvrBaseComponent`
Defined in `WvrBaseComponent:110`
An Output biding used for triggering animations.

HostBindings

style.--bottom-nav-color

Type : string

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:48

style.--header-color

Type : string

Default value : `var(--${this.themeVariant}-button-color)`

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:32

style.--title-row-color

Type : string

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:42

style.--top-nav-color

Type : string

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:36

class.wvr-bootstrap

Type : boolean

Default value : true

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:58

A host binding used to ensure the presense of the wvr-bootstrap class.

class.wvr-hidden

Type : boolean

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:102

A host bound accessor which applies the wvr-hidden class if both isMobileLayout and hiddenInMobile evaluate to true.

style

Type : any

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:60

Methods

Private checkBottomNavHasChildren

checkBottomNavHasChildren()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:123

Determines if the bottom nav list has children in order to display bottom nav section.

Returns : void

ngAfterContentChecked

ngAfterContentChecked()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:114

Returns : void

ngAfterViewInit

ngAfterViewInit()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:96

Returns : void

toggleMobileMenu

toggleMobileMenu()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:118

Returns : void

applyThemeOverride

applyThemeOverride(customProperty: string, value: string)

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:237

Parameters :

Name	Type	Optional
customProperty	`string`	No
value	`string`	No

Returns : void

bootstrapNgBindings

bootstrapNgBindings()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:175

Returns : void

getWvrData

getWvrData()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:262

Returns : string

hasWvrData

hasWvrData()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:258

Returns : boolean

initializeAnimationElement

initializeAnimationElement()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:267

Returns : void

initializeAnimationRegistration

initializeAnimationRegistration()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:273

Returns : void

ngAfterContentInit

ngAfterContentInit()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:160

Used for post content initialization animation setup.

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:166

Handles the the unregistering of this component with the component registry.

Returns : void

ngOnInit

ngOnInit()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:145

Used to setup this component for animating.

Returns : void

onAnimationEvent

onAnimationEvent($event: Event)

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:290

Trigger's the animation specified by the incoming event.

Parameters :

Name	Type	Optional
$event	`Event`	No

Returns : void

Private processData

processData()

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:295

Returns : void

triggerAnimations

triggerAnimations(animationTriggerType: string)

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:244

Plays the animation specified by the incoming animation trigger.

Parameters :

Name	Type	Optional
animationTriggerType	`string`	No

Returns : void

Properties

headerColor

Default value : `var(--${this.themeVariant}-button-color)`

Decorators :


                            @HostBinding('style.--header-color')

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:32

isBottomNavHidden

Default value : false

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:83

mobileMenuClosed

Default value : true

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:85

variantTypes

Type : []

Default value : ['default']

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:87

Private _animationConfig

Type : any

Default value : {}

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:73

An object representation of the settings specifying the specific behavior of the animation for this component.

Private Readonly _animationService

Type : AnimationService<WvrBaseComponent>

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:93

A reference to the AnimationService

Private _animationSettings

Type : any

Default value : {}

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:65

An object representation of the animation instructions for this component.

Private _ngBindings

Type : literal type

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:114

animationRootElem

Type : ElementRef

Decorators :


                            @ViewChild('animationRoot')

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:90

A view child of the template element containing the #animationRoot identifier.

Private animationStateId

Type : number

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:81

An identifier used to access the animation state for this component.

Readonly appConfig

Type : AppConfig

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:37

A reference to the AppConfig

Readonly cdRef

Type : ChangeDetectorRef

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:34

A reference to the ChangeDetectorRef

Readonly componentRegistry

Type : ComponentRegistryService<WvrBaseComponent>

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:25

A reference to the ComponentRegistryService

data

Type : literal type

Default value : {}

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:42

Readonly eRef

Type : ElementRef

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:31

A reference to the ElementRef

Readonly id

Type : number

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:28

A generated unique identifier for this comonent.

isMobile

Type : Observable<boolean>

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:120

isMobileLayout

Type : boolean

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:112

Private Readonly kebabize

Default value : () => {...}

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:321

Private Readonly ngBindingsService

Type : NgBindingsService

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:99

A reference to the NgBindingsService

Readonly store

Type : Store<RootState>

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:40

A reference to the Store

style

Decorators :


                            @HostBinding('style')

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:60

Protected subscriptions

Type : Array<Subscription>

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:122

themeOverrides

Type : object

Default value : {}

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:47

Private Readonly themeService

Type : ThemeService

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:96

A reference to the ThemeService

wvrBootstrap

Default value : true

Decorators :


                            @HostBinding('class.wvr-bootstrap')

Inherited from WvrBaseComponent

Defined in WvrBaseComponent:58

A host binding used to ensure the presense of the wvr-bootstrap class.

Accessors

topNavColor

gettopNavColor()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:36

titleRowColor

gettitleRowColor()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:42

bottomNavColor

getbottomNavColor()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:48

logoId

getlogoId()

Defined in projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts:79

import { AfterContentChecked, AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
import { ThemeVariantName } from '../shared/theme';
import { preserveContent, projectContent } from '../shared/utility/projection.utility';
import { WvrBaseComponent } from '../shared/wvr-base.component';

/**
 * Intended to appear at the top of document and provides for branding, links and page title.
 */
@Component({
  selector: 'wvr-header-component',
  templateUrl: './wvr-header.component.html',
  styleUrls: ['./wvr-header.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class WvrHeaderComponent extends WvrBaseComponent implements AfterContentChecked, AfterViewInit {

  /** The text value to be displayed beside the logo. */
  @Input() logoText = 'Weaver Components';

  /** The header title value to be displayed as a page title. */
  @Input() headerTitle = 'Weaver Header Component';

  /** A URL link clickable from the page title to landing page. */
  @Input() headerTitleUrl: string;

  /** A resolvable URI to an image to be displayed as the logo. */
  @Input() logoSrc = `${this.appConfig.assetsUrl}/icons/custom/weaver-w.svg`;

  /** A resolvable URL to a location linkable from the logo. */
  @Input() logoHref = '#logo';

  @HostBinding('style.--header-color') headerColor = `var(--${this.themeVariant}-button-color)`;

  /** Allows for the override of the components theme variant in the top nav */
  @Input() topNavThemeVariant: ThemeVariantName;
  @HostBinding('style.--top-nav-color') get topNavColor(): string {
    return this.topNavThemeVariant ? `var(--${this.topNavThemeVariant}-button-color)` : `var(--${this.themeVariant}-button-color)`;
  }

  /** Allows for the override of the components theme variant in the title row  */
  @Input() titleRowThemeVariant: ThemeVariantName;
  @HostBinding('style.--title-row-color') get titleRowColor(): string {
    return this.titleRowThemeVariant ? `var(--${this.titleRowThemeVariant}-button-color)` : `var(--${this.themeVariant}-button-color)`;
  }

  /** Allows for the override of the components theme variant in the bottom nav  */
  @Input() bottomNavThemeVariant: ThemeVariantName;
  @HostBinding('style.--bottom-nav-color') get bottomNavColor(): string {
    return this.bottomNavThemeVariant ? `var(--${this.bottomNavThemeVariant}-button-color)` : `var(--${this.themeVariant}-button-color)`;
  }

  /** Allows for the override of the --top-nav-height css variable. Default:  --wvr-navbar-height */
  @HostBinding('style.--top-nav-height') @Input() topNavHeight;

  /** Allows for the override of the --top-nav-padding css variable. Default:  --wvr-navbar-padding */
  @HostBinding('style.--top-nav-padding') @Input() topNavPadding;

  /** Allows for the override of the --logo-img-width css variable. Default:  30px */
  @HostBinding('style.--logo-img-width') @Input() logoImgWidth;

  /** Allows for the override of the --logo-img-width css variable. Default:  30px */
  @HostBinding('style.--logo-img-height') @Input() logoImgHeight;

  /** Allows for the override of the --logo-img-margin css variable. Default:  0 0 0 0 */
  @HostBinding('style.--logo-img-margin') @Input() logoImgMargin;

  /** Allows for the override of the --title-row-height css variable. Default:  --wvr-navbar-height */
  @HostBinding('style.--title-row-height') @Input() titleRowHeight;

  /** Allows for the override of the --bottom-nav-height css variable. Default:  --wvr-navbar-height */
  @HostBinding('style.--bottom-nav-height') @Input() bottomNavHeight;

  /** Allows for the override of the --bottom-nav-padding css variable. Default:  --wvr-navbar-padding */
  @HostBinding('style.--bottom-nav-padding') @Input() bottomNavPadding;

  /** Used to toggle display of bottom navbar section. */
  @Input() displayBottomNav: 'true' | 'false';

  get logoId(): string {
    return this.logoHref.split('#')[1];
  }

  isBottomNavHidden = false;

  mobileMenuClosed = true;

  variantTypes = ['default'];

  /**
   * The weaver header component constructor
   */
  constructor(injector: Injector) {
    super(injector);
  }

  ngAfterViewInit(): void {
    this.subscriptions.push(this.isMobile.subscribe((isMobile: boolean) => {
      if (isMobile) {
        setTimeout(() => {
          preserveContent(this.eRef, 'template[top-navigation]', 'div[top-navigation]');
          preserveContent(this.eRef, 'template[bottom-navigation]', 'div[bottom-navigation]');
          projectContent(this.eRef, 'template[mobile-menu]', 'div[mobile-menu]');
        });
      } else {
        setTimeout(() => {
          preserveContent(this.eRef, 'template[mobile-menu]', 'div[mobile-menu]');
          projectContent(this.eRef, 'template[top-navigation]', 'div[top-navigation]');
          projectContent(this.eRef, 'template[bottom-navigation]', 'div[bottom-navigation]');
        });
      }
    }));
  }

  ngAfterContentChecked(): void {
    this.checkBottomNavHasChildren();
  }

  toggleMobileMenu(): void {
    this.mobileMenuClosed = !this.mobileMenuClosed;
  }

  /** Determines if the bottom nav list has children in order to display bottom nav section. */
  private checkBottomNavHasChildren(): void {
    const bottomNavListElement = (this.eRef.nativeElement as HTMLElement).querySelector('.bottom-nav wvre-nav-li, .bottom-nav wvr-nav-li-component');
    this.isBottomNavHidden = !(this.displayBottomNav === 'true' || (this.displayBottomNav === undefined && !!bottomNavListElement));
  }

}

<a class="skip-to-content-link" href="#wvre-main">Skip to content</a>

<header class="wvr-components wvr-header bg-{{themeVariant}}" #animationRoot>

  <nav class="top-nav navbar navbar-expand-lg bg-{{topNavThemeVariant}}">
    <div class="container">
      <a class="navbar-brand d-flex" [href]="logoHref" [id]="logoId">
        <img alt="Logo" class="logo-img d-inline-block align-top" [src]='logoSrc' />
        <span class="align-self-center d-inline-block pl-1">
          <wvr-text-component [themeVariant]="topNavThemeVariant ? topNavThemeVariant : themeVariant" [value]="logoText"></wvr-text-component>
        </span>
      </a>
      <div class="top-nav-wrapper" top-navigation [hidden]="isMobileLayout">
        <ng-content select="template[top-navigation]"></ng-content>
      </div>
    </div>
  </nav>

  <div class="title-row row m-0 bg-{{titleRowThemeVariant}}">
    <div class="container d-flex align-items-center">
      <a *ngIf="headerTitleUrl" [href]="headerTitleUrl"><span class="h1">{{headerTitle}}</span></a>
      <span *ngIf="!headerTitleUrl" class="h1">
        <wvr-text-component [themeVariant]="titleRowThemeVariant" [value]="headerTitle"></wvr-text-component>
      </span>
    </div>
  </div>

  <nav class="bottom-nav navbar navbar-expand-lg bg-{{bottomNavThemeVariant}}" [hidden]="isBottomNavHidden || isMobileLayout">
    <div class="container">
      <div class="flex-fill align-self-stretch h-100" bottom-navigation>
        <ng-content select="template[bottom-navigation]"></ng-content>
      </div>
    </div>
  </nav>

</header>

<nav class="mobile-menu" [ngClass]="{'closed': mobileMenuClosed}" [hidden]="!isMobileLayout">
  <div class="mobile-menu-header">
    <div class="mobile-menu-close" (click)="toggleMobileMenu()">
      <span>
        <wvre-text-component value="Close" font-size="0.75em"></wvre-text-component>
      </span>
      <svg class="bi bi-x" width="1.25em" height="1.25em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
        <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
      </svg>
    </div>
  </div>
  <div class="mobile-menu-content flex-fill align-self-stretch" mobile-menu>
    <ng-content select="template[mobile-menu]"></ng-content>
  </div>
</nav>

<div class="container" class="mobile-menu-button" [hidden]="!isMobileLayout">
  <svg
    (click)="toggleMobileMenu()"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="feather feather-menu mobile-menu-button">
    <line x1="3" y1="6" x2="21" y2="6" />
    <line x1="3" y1="12" x2="21" y2="12" />
    <line x1="3" y1="18" x2="21" y2="18" />
  </svg>
</div>

./wvr-header.component.scss

@import "../shared/styles/variables";

:host {

  @extend .variables;

  --bottom-nav-height: var(--wvr-navbar-height);
  --bottom-nav-padding: var(--wvr-navbar-padding);
  --logo-img-width: 30px;
  --logo-img-height: 30px;
  --logo-img-margin: 0 0 0 0;
  --title-row-height: var(--wvr-navbar-height);
  --top-nav-height: var(--wvr-navbar-height);
  --top-nav-padding: var(--wvr-navbar-padding);

  --top-nav-color: var(--header-color);
  --title-row-color: var(--header-color);
  --bottom-nav-color: var(--header-color);

  color: var(--header-color);

  .wvr-header {
    font-family: var(--wvr-font-family-sans-serif);
  }

    // Skip Navigation
    .skip-to-content-link {
      background: var(--primary);
      color: var(--white);
      height: 30px;
      padding: 8px;
      position: absolute;
      transform: translateY(-100%);
      transition: transform 0.3s;
      z-index: 3;
    }

    .skip-to-content-link:focus {
      transform: translateY(0%);
    }

  .container {
    height: 100%;
    a:focus-within,
    a:hover {
      text-decoration: none;
      cursor: pointer;
    }
  }

  .top-nav {
    color: var(--top-nav-color);
    height: var(--top-nav-height);
    padding: var(--top-nav-padding);

    .logo-img {
      width: var(--logo-img-width);
      height: var(--logo-img-height);
      margin: var(--logo-img-margin);
    }

    .top-nav-wrapper {
      ::ng-deep {
        wvre-nav-list[top-navigation]
        > [role=menu]
        > wvre-nav-li
        > [role=menuitem]
        > wvre-dropdown
        > .wvr-dropdown
        > .dropdown
        > wvr-button-component
        > button-wrapper {
          display: flex;
          justify-content: center;
        }
      }
    }
  }

  .title-row {
    color: var(--title-row-color);
    height: var(--title-row-height);
  }

  .bottom-nav {
    color: var(--bottom-nav-color);
    height: var(--bottom-nav-height);
    padding: var(--bottom-nav-padding);
  }

  .mobile-menu-button {
    display: none;
    overflow: hidden;
  }

  @media (max-width: 992px) {
    .mobile-menu-button {
      display: block;
    }

    .mobile-menu-button:focus-within,
    .mobile-menu-button:hover {
      cursor: pointer;
    }

    .mobile-menu-content {
      white-space: nowrap !important;

      ::ng-deep {
        .section-title {
          white-space: nowrap !important;
        }

        tl-nav-li > a {
          white-space: nowrap !important;
        }

        wvr-dropdown-component,
        .section-title  {
          min-width: 200px;
        }
      }
    }

    .mobile-menu.closed {
      width: 0px;
      opacity: 0;
      overflow: hidden;
    }

    .mobile-menu-header {
      display: flex;
      justify-content: flex-end;
      background: #000;
      color: #fff;
      width: 100%;
      padding: 12px 10px;

      .mobile-menu-close:focus-within,
      .mobile-menu-close:hover {
        cursor: pointer;
      }

      [role=menuitem] {
        font-weight: lighter;
        min-width: auto;
        border-bottom: none;
      }

      [role=menuitem]:focus-within,
      [role=menuitem]:hover {
        background: transparent;
      }
    }
  }

}

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Constructor

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""