diff --git a/modules/layout/src/lib/header/header.component.html b/modules/layout/src/lib/header/header.component.html index a102fe4..cc16a70 100644 --- a/modules/layout/src/lib/header/header.component.html +++ b/modules/layout/src/lib/header/header.component.html @@ -1,6 +1,10 @@ diff --git a/modules/layout/src/lib/header/header.component.scss b/modules/layout/src/lib/header/header.component.scss index 4568c5c..134d12a 100644 --- a/modules/layout/src/lib/header/header.component.scss +++ b/modules/layout/src/lib/header/header.component.scss @@ -49,25 +49,31 @@ } } } -#menu-button { - display: none; - padding: 1rem; - background-color: transparent; - border: none; - border-radius: $border-radius; - @include transition; - - path { - fill: $color-primary; - @include transition; +#menu-toggle-container { + display: flex; + #menu-title { + display: none; } - - &:hover { - cursor: pointer; - background-color: $color-primary; + #menu-button { + display: none; + padding: 1rem; + background-color: transparent; + border: none; + border-radius: $border-radius; + @include transition; path { - fill: $color-white; + fill: $color-primary; + @include transition; + } + + &:hover { + cursor: pointer; + background-color: $color-primary; + + path { + fill: $color-white; + } } } } @@ -80,7 +86,7 @@ } #links { flex-wrap: wrap; - width: 100%; + width: 100svw; position: fixed; top: 112px; left: 0; @@ -91,7 +97,7 @@ align-items: stretch; opacity: 0; - &.opened { + &.isMenuExpanded { height: calc(100% - 112px); opacity: 1; } @@ -108,8 +114,14 @@ border-radius: 0; } } - #menu-button { - display: block; - align-self: center; + #menu-toggle-container { + #menu-button { + display: block; + align-self: center; + } + #menu-title { + display: flex; + align-items: center; + } } } diff --git a/modules/layout/src/lib/header/header.component.spec.ts b/modules/layout/src/lib/header/header.component.spec.ts index 22a4c2c..791fb3c 100644 --- a/modules/layout/src/lib/header/header.component.spec.ts +++ b/modules/layout/src/lib/header/header.component.spec.ts @@ -20,14 +20,14 @@ describe('HeaderComponent', () => { }); it('should call toggleMenu and close menu', () => { - component.opened = true; + component.isMenuExpanded = true; component.toggleMenu(); - expect(component.opened).toBe(false); + expect(component.isMenuExpanded).toBe(false); }); it('should call toggleMenu and open menu', () => { - component.opened = false; + component.isMenuExpanded = false; component.toggleMenu(); - expect(component.opened).toBe(true); + expect(component.isMenuExpanded).toBe(true); }); }); diff --git a/modules/layout/src/lib/header/header.component.ts b/modules/layout/src/lib/header/header.component.ts index 2d5d4ae..b8c8083 100644 --- a/modules/layout/src/lib/header/header.component.ts +++ b/modules/layout/src/lib/header/header.component.ts @@ -1,5 +1,5 @@ import { CommonModule, NgOptimizedImage } from '@angular/common'; -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'lib-header', @@ -7,11 +7,12 @@ import { Component } from '@angular/core'; imports: [CommonModule, NgOptimizedImage], templateUrl: './header.component.html', styleUrl: './header.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class HeaderComponent { - opened = false; + isMenuExpanded = false; toggleMenu(): void { - this.opened = !this.opened; + this.isMenuExpanded = !this.isMenuExpanded; } }