Header Example with Hamburger Menu

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LogoComponent } from '@app/shared';
import { AuthButtonsComponent } from '@app/shared/components/auth-buttons/auth-buttons.component';
import { ButtonGroup, ButtonIcon, ButtonType } from '@app/shared/components/button';
import { TranslocoPipe } from '@jsverse/transloco';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: true,
  imports: [CommonModule, AuthButtonsComponent, TranslocoPipe, LogoComponent],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent {
  public ButtonGroup = ButtonGroup;
  public ButtonIcon = ButtonIcon;
  public ButtonType = ButtonType;

  public isActive = false;

  public toggleMenu(): void {
    this.isActive = !this.isActive;
  }

  public closeMenu(): void {
    this.isActive = false;
  }
}

<header class="header">
  <div class="wrapper header-wrapper">
    <figure class="header-logo">
      <a class="header-logo-link" [href]="">
        <app-logo />
      </a>
    </figure>
    <nav class="header-nav">
      <div class="header-nav-toggle" [class.active]="isActive" (click)="toggleMenu()">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="header-nav-list-wrapper" [class.active]="isActive">
        <ul class="header-nav-list">
          <li class="header-nav-list-item">
            <a class="header-nav-list-item-link" href="">{{ 'HEADER_MENU.HOW_IT_WORKS' | transloco }}</a>
          </li>
          <li class="header-nav-list-item">
            <a class="header-nav-list-item-link" href="">{{ 'HEADER_MENU.PRICES' | transloco }}</a>
          </li>
          <li class="header-nav-list-item">
            <a class="header-nav-list-item-link" href="">{{ 'HEADER_MENU.NEWS' | transloco }}</a>
          </li>
          <li class="header-nav-list-item">
            <a class="header-nav-list-item-link" href="">{{ 'HEADER_MENU.FAQ' | transloco }}</a>
          </li>
          <li class="header-nav-list-item">
            <a class="header-nav-list-item-link" href="">{{ 'HEADER_MENU.CONTACT' | transloco }}</a>
          </li>
        </ul>
        <div class="header-buttons-mobile">
          <app-auth-buttons />
        </div>
      </div>
    </nav>
    <div class="header-buttons">
      <app-auth-buttons />
    </div>
  </div>
</header>

@use 'shared' as *;

:host {
  display: block;
}

:host {
  background: var(--color-primary-950);
  border-radius: 0px 0px 16px 16px;
  color: var(--color-white);
  display: block;
  margin: auto;
  padding: 20px;
  font-family: $font-family;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  width: 100%;
  max-width: 1110px;
}

.header {
  display: flex;
  justify-content: center;
  &-buttons {
    display: none;
    @include media-breakpoint-up(lg) {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    &-mobile{
      display: flex;
      flex-direction: column;
      gap: 30px;
      justify-content: flex-end;
      margin: 30px auto;
      padding: 0 30px;
      max-width: 300px;
      @include media-breakpoint-up(lg){
        display: none;
      }
    }
  }
  &-wrapper {
    display: flex;
    justify-content: space-between;
  }
  &-logo {
    display: flex;
    align-items: center;
    z-index: 9;
  }
  &-nav {
    display: flex;
    align-items: center;
    position: relative;
    &-toggle {
      transition: 0.8s;
      z-index: 9;
      width: 36px;
      height: 28px;
      @include media-breakpoint-up(lg) {
        display: none;
      }
      span {
        position: relative;
        width: 28px;
        height: 2px;
        background: var(--color-purple-300);
        border-radius: 2px;
        display: block;
        margin-bottom: 8px;
        transition: 0.5s;

        &:nth-child(1) {
          transform-origin: left;
        }
        &:nth-child(2) {
          transform-origin: center;
        }
        &:nth-child(3) {
          transform-origin: left;
          margin-bottom: 0;
        }
      }
      &.active {
        transition: 0.5s;
        z-index: 9;
        width: 36px;
        height: 28px;
        span {
          background: var(--color-purple-300);
        }
        span:nth-child(1) {
          transform: rotate(45deg);
          left: 2px;
        }
        span:nth-child(2) {
          transform: rotate(315deg);
          right: 3px;
        }
        span:nth-child(3) {
          opacity: 0;
          transform: scale(0);
        }
      }
    }
    &-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 80px;
      @include media-breakpoint-up(lg){
        margin-top: 0;
      }
      &-wrapper{
        background: var(--color-primary-950);
        transition: 0.5s;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        right: -100%;
        @include media-breakpoint-up(lg){
          position: static;
          display: flex;
        }
        &.active {
            background: $black-opacity;
            right: 0;
        }
      }
      @include media-breakpoint-up(lg) {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: static;
        flex-direction: row;
        width: auto;
      }
      &-item {
        display: block;
        width: 100%;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        @include media-breakpoint-up(lg) {
          width: auto;
        }
        &:first-child {
          .header-nav-list-item-link {
            border-top: 1px solid $border;
            @include media-breakpoint-up(lg) {
              border: none;
            }
          }
        }
        &-link {
          display: block;
          width: 100%;
          border-bottom: 1px solid $border;
          text-align: center;
          color: $white;
          transition: 0.4s;
          padding: 30px;
          @include media-breakpoint-up(lg) {
            border: none;
            width: auto;
            padding: 0 20px;
          }
          &:hover {
            color: var(--color-purple-200);
          }
        }
      }
    }
  }
}
.cta {
  display: none;
  @include media-breakpoint-up(lg) {
    display: block;
  }
  &.mobile {
    display: block;
    margin-top: 30px;
    text-align: center;
    max-width: 200px;
    margin: 30px auto;
    @include media-breakpoint-up(lg) {
      display: none;
    }
  }
}