.header {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
    z-index: 10;
    .logo {
      img {
        height: 100px;
        background-color: #ffffff;
        border-radius: 50%;
      }
    }
  
    .nav {
     flex: 1;
     margin: 0 5%;
      .nav-columns {
        display: flex;
        justify-content: space-between;
        .nav-column {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin: 0 15px;
  
        a {
          margin: 8px 10px;
          text-decoration: none;
          color: #ffffff;
          font-weight: 900;
          font-size: 1.7vw;
        }
      }
    }

    }
  
    .mobile-menu-icon {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      margin-right: 7%;
  
      span {
        width: 25px;
        height: 3px;
        background: #ffffff;
        margin: 4px 0;
        transition: 0.4s;
      }
    }
  }

  .mobile-menu {
    display: none;
  }
  
  .mobile-menu-icon {
    display: none;
  }

  .mobile-menu {
    display: none;
    
    &.open {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      transform: translateX(0);
      transition: transform 0.3s ease-in-out;
      z-index: 1000;
  
      .mobile-menu-header {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
  
        .close-icon {
          position: relative;
          width: 24px;
          height: 24px;
          cursor: pointer;
  
          &::before,
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 24px;
            height: 2px;
            background-color: black;
            transform-origin: center;
          }
  
          &::before {
            transform: translate(-50%, -50%) rotate(45deg);
          }
  
          &::after {
            transform: translate(-50%, -50%) rotate(-45deg);
          }
        }
      }
  
      .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0 20px;
  
        a {
          margin: 15px 0;
          text-decoration: none;
          color: #000;
          font-size: 1rem;
          font-weight: bold;
        }
      }
    }
    @media (max-width: 768px) {
        .mobile-menu-icon {
          display: flex; /* Показываем иконку мобильного меню на мобильных устройствах */
        }
      
        .nav {
          display: none;
        }
        .logo img {
            height: 10px;
          }
      }
  }
  
  
Это стили
import { Component, OnInit, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: true,
  imports: [CommonModule, RouterModule],
})
export class HeaderComponent implements OnInit {
    isMobile: boolean = false;
    isMobileMenuOpen: boolean = false;
    isHomePage: boolean = false;
  
    constructor(private router: Router) {}
  
    ngOnInit() {
      this.checkIfMobile();
      this.checkIfHomePage();
  
      // Подписываемся на события роутера, чтобы отслеживать навигацию между страницами
      this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
          this.checkIfHomePage();
        }
      });
    }
  
    // Метод для проверки, находимся ли мы на главной странице
    checkIfHomePage() {
      this.isHomePage = this.router.url === '/';
      console.log(this.isHomePage);
    }
  
    @HostListener('window:resize')
    onResize() {
      this.checkIfMobile();
    }
  
    checkIfMobile() {
        if (typeof window !== 'undefined') {
          this.isMobile = window.innerWidth <= 768;
          console.log('Window width:', window.innerWidth, 'Is mobile:', this.isMobile);
        } else {
          // Handle the case when window is not defined (e.g., during SSR)
          this.isMobile = false; // Default value or logic
          console.log('Window is undefined, setting isMobile to false');
        }
      }
  
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    }
  }
Это .ts
Если у меня homepage, я хочу весь текст и mobile menu icon делать белыми, иначе черными