refactor: break header component into smaller units

libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+import { FastSvgComponent } from '@push-based/ngx-fast-svg';
+
+@Component({
+  standalone: true,
+  selector: 'al-header-hamburger',
+  template: `
+    <button
+      type="button"
+      class="z-50 ml-3 flex h-6 w-6 flex-col justify-evenly lg:hidden"
+      [attr.aria-label]="isOpened() ? 'Close menu' : 'Open Menu'"
+      (click)="toggleOpen.emit()"
+    >
+      @if (isOpened()) {
+        <fast-svg name="cross" />
+      } @else {
+        <div class="h-1 w-full rounded bg-white"></div>
+        <div class="h-1 w-full rounded bg-white"></div>
+        <div class="h-1 w-full rounded bg-white"></div>
+      }
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FastSvgComponent],
+})
+export class HeaderHamburgerComponent {
+  readonly isOpened = input.required<boolean>();
+
+  readonly toggleOpen = output<void>();
+}

libs/blog/layouts/ui-layouts/src/lib/header/components/header-language-button.component.ts

@@ -0,0 +1,47 @@
+import { NgClass } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { TranslocoDirective } from '@jsverse/transloco';
+
+import { Lang } from '@angular-love/shared/utils-i18n';
+
+@Component({
+  standalone: true,
+  selector: 'al-header-language-button',
+  template: `
+    <button
+      *transloco="let t; read: 'iconButtons'"
+      [attr.data-testid]="vm().testId"
+      type="button"
+      class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4"
+      [ngClass]="{
+        '!text-white': selected(),
+        '!text-al-gray-50  opacity-50': !selected(),
+      }"
+      [attr.aria-label]="t(vm().translationKey)"
+      (click)="languageChange.emit()"
+    >
+      {{ vm().name }}
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass, TranslocoDirective],
+})
+export class HeaderLanguageButtonComponent {
+  readonly lang = input.required<Lang>();
+  readonly selected = input.required<boolean>();
+
+  readonly languageChange = output<void>();
+
+  readonly vm = computed(() => ({
+    name: this.lang() === 'en' ? 'ENG' : 'PL',
+    testId: `header-${this.lang()}-switch`,
+    translationKey:
+      this.lang() === 'en' ? `changeLangToEnglish` : 'changeLangToPolish',
+  }));
+}

libs/blog/layouts/ui-layouts/src/lib/header/components/header-language.component.ts

@@ -0,0 +1,39 @@
+import { NgClass } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+import { TranslocoDirective } from '@jsverse/transloco';
+
+import { Lang } from '@angular-love/shared/utils-i18n';
+
+import { HeaderLanguageButtonComponent } from './header-language-button.component';
+
+@Component({
+  standalone: true,
+  selector: 'al-header-language',
+  template: `
+    <div
+      *transloco="let t; read: 'iconButtons'"
+      class="ml-6 flex max-w-20 flex-row md:max-w-[200px]"
+    >
+      @for (lang of availableLanguages; track $index) {
+        <al-header-language-button
+          [lang]="lang"
+          [selected]="language() === lang"
+          (languageChange)="languageChange.emit(lang)"
+        />
+      }
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslocoDirective, NgClass, HeaderLanguageButtonComponent],
+})
+export class HeaderLanguageComponent {
+  readonly language = input.required<string>();
+  readonly availableLanguages: Lang[] = ['en', 'pl'];
+
+  readonly languageChange = output<string>();
+}

libs/blog/layouts/ui-layouts/src/lib/header/components/header-logo.component.ts

@@ -0,0 +1,30 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
+
+@Component({
+  standalone: true,
+  selector: 'al-header-logo',
+  template: `
+    <a
+      data-testid="header-home"
+      class="flex items-center gap-2"
+      [routerLink]="'/' | alLocalize"
+    >
+      <img
+        alt="Angular Love logo"
+        class="inline-block"
+        height="40"
+        width="36"
+        priority="1"
+        ngSrc="assets/angular-love-logo.webp"
+      />
+      <h1 class="text-al-primary px-4 text-lg font-bold">angular.love</h1>
+    </a>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AlLocalizePipe, NgOptimizedImage, RouterLink],
+})
+export class HeaderLogoComponent {}

libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts

@@ -0,0 +1,30 @@
+import { NgClass } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+
+import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
+
+@Component({
+  standalone: true,
+  selector: 'al-header-mobile-menu',
+  template: `
+    <div
+      class="bg-al-background fixed -top-[100%] left-0 z-40 flex h-full w-full flex-row items-center justify-center transition-transform duration-300 lg:hidden"
+      [ngClass]="{ 'translate-y-[100%]': isOpened() }"
+      [attr.aria-hidden]="isOpened()"
+    >
+      <al-navigation (navigated)="closed.emit()" layout="vertical" />
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NavigationComponent, NgClass],
+})
+export class HeaderMobileMenuComponent {
+  readonly isOpened = input.required<boolean>();
+
+  readonly closed = output<void>();
+}

libs/blog/layouts/ui-layouts/src/lib/header/components/index.ts

@@ -0,0 +1,4 @@
+export * from './header-hamburger.component';
+export * from './header-language.component';
+export * from './header-logo.component';
+export * from './header-mobile-menu.component';

libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts

@@ -1,35 +1,57 @@
-import { NgClass, NgOptimizedImage } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   input,
   output,
   signal,
 } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { TranslocoDirective } from '@jsverse/transloco';
-import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 
-import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
 import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
-import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-media-icons';
+
+import {
+  HeaderHamburgerComponent,
+  HeaderLanguageComponent,
+  HeaderLogoComponent,
+  HeaderMobileMenuComponent,
+} from './components';
 
 @Component({
   standalone: true,
   selector: 'al-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
+  template: `
+    <header class="bg-al-background/95 z-30 h-20 w-full border-b shadow-xl">
+      <div
+        class="mx-auto flex h-full w-full max-w-screen-xl items-center justify-between px-6 py-4 xl:px-0"
+      >
+        <al-header-logo />
+
+        <div class="flex flex-row items-center">
+          <al-navigation class="hidden lg:block" />
+
+          <al-header-language
+            [language]="language()"
+            (languageChange)="languageChange.emit($event)"
+          />
+
+          <ng-content />
+
+          <al-header-hamburger
+            [isOpened]="showNav()"
+            (toggleOpen)="toggleNav()"
+          />
+        </div>
+      </div>
+    </header>
+
+    <al-header-mobile-menu [isOpened]="showNav()" (closed)="toggleNav()" />
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgOptimizedImage,
-    SocialMediaIconsComponent,
-    RouterLinkActive,
-    RouterLink,
     NavigationComponent,
-    NgClass,
-    TranslocoDirective,
-    AlLocalizePipe,
-    FastSvgComponent,
+    HeaderLogoComponent,
+    HeaderLanguageComponent,
+    HeaderHamburgerComponent,
+    HeaderMobileMenuComponent,
   ],
 })
 export class HeaderComponent {