CompanySite/src/components/Header.astro

---
// Header Component for WorkRoot IT Solutions
// Features: Sticky header, responsive nav, mobile hamburger menu, active link highlighting

import ThemeToggle from './ThemeToggle.astro';

interface Props {
  class?: string;
}

const { class: className } = Astro.props;

const navLinks = [
  { name: 'Home', href: '/' },
  { name: 'About', href: '/about' },
  { name: 'Services', href: '/services' },
  { name: 'Portfolio', href: '/portfolio' },
  { name: 'Blog', href: '/blog' },
  { name: 'Contact', href: '/contact' },
];

const currentPath = Astro.url.pathname;
---

<header
  class:list={[
    'fixed top-0 left-0 right-0 z-50 bg-white/95 dark:bg-secondary-900/95 backdrop-blur-sm border-b border-secondary-100 dark:border-secondary-800 transition-shadow duration-300',
    className,
  ]}
  id="main-header"
>
  <div class="container-wrapper">
    <nav class="flex items-center justify-between h-16 lg:h-20" aria-label="Main navigation">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2 group" aria-label="WorkRoot IT Solutions LLP - Home">
        <img
          src="/favicon.svg"
          alt="WorkRoot"
          width="40"
          height="40"
          class="w-10 h-10 transition-transform group-hover:scale-105"
        />
        <div class="hidden sm:block">
          <span class="font-bold text-xl text-secondary dark:text-white">WorkRoot</span>
          <span class="text-primary font-semibold text-sm block -mt-1">IT Solutions</span>
        </div>
      </a>

      <!-- Desktop Navigation -->
      <ul class="hidden lg:flex items-center gap-1" role="menubar">
        {navLinks.map((link) => {
          const isActive = currentPath === link.href ||
            (link.href !== '/' && currentPath.startsWith(link.href));
          return (
            <li role="none">
              <a
                href={link.href}
                role="menuitem"
                data-astro-prefetch="hover"
                class:list={[
                  'relative px-4 py-2 text-sm font-medium transition-colors rounded-lg',
                  isActive
                    ? 'text-primary bg-primary-50 dark:bg-primary-900/30 dark:text-primary-400'
                    : 'text-secondary-600 hover:text-primary hover:bg-secondary-50 dark:text-secondary-400 dark:hover:text-primary-400 dark:hover:bg-secondary-800',
                ]}
                aria-current={isActive ? 'page' : undefined}
              >
                {link.name}
                {isActive && (
                  <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full" />
                )}
              </a>
            </li>
          );
        })}
      </ul>

      <!-- Desktop CTA -->
      <div class="hidden lg:flex items-center gap-4">
        <ThemeToggle />
        <a
          href="/contact"
          class="btn-primary text-sm"
        >
          Get my free proposal
          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
      </div>

      <!-- Mobile actions: prominent click-to-call + hamburger (shown <lg on every page) -->
      <div class="flex items-center gap-1 lg:hidden">
        <!-- Click-to-call — always visible in the mobile header so visitors on
             any page can reach us in one tap without opening the menu. -->
        <a
          href="tel:+919561417403"
          data-cta="header-mobile-call"
          aria-label="Call WorkRoot at +91 95614 17403"
          class="inline-flex items-center gap-1.5 h-10 px-3 rounded-lg bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-semibold text-sm hover:bg-primary-100 dark:hover:bg-primary-900/50 active:scale-95 transition-all focus:outline-none focus:ring-2 focus:ring-primary-400"
        >
          <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
          </svg>
          <span class="hidden xs:inline">Call</span>
        </a>

        <!-- Mobile Menu Button -->
        <button
          type="button"
          class="relative w-10 h-10 flex items-center justify-center text-secondary-600 dark:text-secondary-400 hover:text-primary dark:hover:text-primary-400 transition-colors"
          id="mobile-menu-toggle"
          aria-label="Toggle mobile menu"
          aria-expanded="false"
          aria-controls="mobile-menu"
        >
          <span class="sr-only">Open main menu</span>
          <!-- Hamburger Icon -->
          <div class="hamburger-icon" aria-hidden="true">
            <span class="hamburger-line hamburger-line-1"></span>
            <span class="hamburger-line hamburger-line-2"></span>
            <span class="hamburger-line hamburger-line-3"></span>
          </div>
        </button>
      </div>
    </nav>
  </div>

  <!-- Mobile Menu Overlay -->
  <div
    id="mobile-menu-overlay"
    class="fixed inset-0 bg-secondary-900/50 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 lg:hidden"
    aria-hidden="true"
  ></div>

  <!-- Mobile Menu Panel -->
  <div
    id="mobile-menu"
    class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white dark:bg-secondary-900 shadow-2xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
    role="dialog"
    aria-modal="true"
    aria-label="Mobile navigation menu"
  >
    <div class="flex flex-col h-full">
      <!-- Mobile Menu Header -->
      <div class="flex items-center justify-between p-4 border-b border-secondary-100 dark:border-secondary-800">
        <a href="/" class="flex items-center gap-2" aria-label="WorkRoot IT Solutions LLP - Home">
          <img src="/favicon.svg" alt="WorkRoot" width="32" height="32" class="w-8 h-8" />
          <span class="font-bold text-lg text-secondary dark:text-white">WorkRoot</span>
        </a>
        <button
          type="button"
          class="w-10 h-10 flex items-center justify-center text-secondary-500 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-200 transition-colors"
          id="mobile-menu-close"
          aria-label="Close menu"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Mobile Navigation Links -->
      <nav class="flex-1 overflow-y-auto py-4">
        <ul class="space-y-1 px-3" role="menu">
          {navLinks.map((link, index) => {
            const isActive = currentPath === link.href ||
              (link.href !== '/' && currentPath.startsWith(link.href));
            return (
              <li role="none" style={`--delay: ${index * 50}ms`}>
                <a
                  href={link.href}
                  role="menuitem"
                  data-astro-prefetch="hover"
                  class:list={[
                    'mobile-nav-link flex items-center gap-3 px-4 py-3 rounded-lg text-base font-medium transition-all duration-200',
                    isActive
                      ? 'text-primary bg-primary-50 dark:bg-primary-900/30 dark:text-primary-400'
                      : 'text-secondary-700 hover:text-primary hover:bg-secondary-50 dark:text-secondary-300 dark:hover:text-primary-400 dark:hover:bg-secondary-800',
                  ]}
                  aria-current={isActive ? 'page' : undefined}
                >
                  {link.name}
                  {isActive && (
                    <span class="ml-auto w-2 h-2 bg-primary rounded-full" />
                  )}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>

      <!-- Mobile Menu Footer -->
      <div class="p-4 border-t border-secondary-100 dark:border-secondary-800">
        <div class="flex items-center justify-between mb-3">
          <span class="text-sm font-medium text-secondary-600 dark:text-secondary-400">Theme</span>
          <ThemeToggle />
        </div>
        <a
          href="/contact"
          class="btn-primary w-full justify-center"
        >
          Get my free proposal
          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
        <p class="text-center text-sm text-secondary-500 mt-4">
          Need help? <a href="tel:+919561417403" class="text-primary hover:underline">Call us</a>
        </p>
      </div>
    </div>
  </div>
</header>

<!-- Spacer for fixed header -->
<div class="h-16 lg:h-20" aria-hidden="true"></div>

<style>
  /* Hamburger Icon Styles */
  .hamburger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  /* Hamburger to X animation */
  .menu-open .hamburger-line-1 {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-open .hamburger-line-2 {
    opacity: 0;
    transform: scaleX(0);
  }

  .menu-open .hamburger-line-3 {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Mobile nav link animation */
  .mobile-nav-link {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: var(--delay, 0ms);
  }

  .menu-open .mobile-nav-link {
    opacity: 1;
    transform: translateX(0);
  }

  /* Header shadow on scroll */
  .header-scrolled {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
</style>

<script>
  // Mobile Menu Toggle
  const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
  const mobileMenuClose = document.getElementById('mobile-menu-close');
  const mobileMenu = document.getElementById('mobile-menu');
  const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
  const header = document.getElementById('main-header');

  let isMenuOpen = false;

  function openMenu() {
    isMenuOpen = true;
    mobileMenu?.classList.remove('translate-x-full');
    mobileMenuOverlay?.classList.remove('opacity-0', 'pointer-events-none');
    mobileMenuToggle?.classList.add('menu-open');
    mobileMenuToggle?.setAttribute('aria-expanded', 'true');
    document.body.style.overflow = 'hidden';

    // Trigger link animations
    document.querySelectorAll('.mobile-nav-link').forEach((link) => {
      link.closest('li')?.classList.add('menu-open');
    });
  }

  function closeMenu() {
    isMenuOpen = false;
    mobileMenu?.classList.add('translate-x-full');
    mobileMenuOverlay?.classList.add('opacity-0', 'pointer-events-none');
    mobileMenuToggle?.classList.remove('menu-open');
    mobileMenuToggle?.setAttribute('aria-expanded', 'false');
    document.body.style.overflow = '';

    // Reset link animations
    document.querySelectorAll('.mobile-nav-link').forEach((link) => {
      link.closest('li')?.classList.remove('menu-open');
    });
  }

  mobileMenuToggle?.addEventListener('click', () => {
    if (isMenuOpen) {
      closeMenu();
    } else {
      openMenu();
    }
  });

  mobileMenuClose?.addEventListener('click', closeMenu);
  mobileMenuOverlay?.addEventListener('click', closeMenu);

  // Close menu on escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && isMenuOpen) {
      closeMenu();
    }
  });

  // Close menu on window resize (if transitioning to desktop)
  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024 && isMenuOpen) {
      closeMenu();
    }
  });

  // Header shadow on scroll
  let lastScrollY = 0;

  window.addEventListener('scroll', () => {
    const currentScrollY = window.scrollY;

    if (currentScrollY > 10) {
      header?.classList.add('header-scrolled');
    } else {
      header?.classList.remove('header-scrolled');
    }

    lastScrollY = currentScrollY;
  }, { passive: true });
</script>