First Init

src/components/Header.astro

@@ -0,0 +1,325 @@
+---
+// Header Component for WorkRoot IT Solutions
+// Features: Sticky header, responsive nav, mobile hamburger menu, active link highlighting
+
+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 backdrop-blur-sm border-b border-secondary-100 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 - Home">
+        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-105">
+          <span class="text-white font-bold text-xl">W</span>
+        </div>
+        <div class="hidden sm:block">
+          <span class="font-bold text-xl text-secondary">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'
+                    : 'text-secondary-600 hover:text-primary hover:bg-secondary-50',
+                ]}
+                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">
+        <a
+          href="/contact"
+          class="btn-primary text-sm"
+        >
+          Get Started
+          <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 Menu Button -->
+      <button
+        type="button"
+        class="lg:hidden relative w-10 h-10 flex items-center justify-center text-secondary-600 hover:text-primary 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>
+    </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 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">
+        <a href="/" class="flex items-center gap-2" aria-label="WorkRoot IT Solutions - Home">
+          <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center" aria-hidden="true">
+            <span class="text-white font-bold text-lg">W</span>
+          </div>
+          <span class="font-bold text-lg text-secondary">WorkRoot</span>
+        </a>
+        <button
+          type="button"
+          class="w-10 h-10 flex items-center justify-center text-secondary-500 hover:text-secondary-700 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'
+                      : 'text-secondary-700 hover:text-primary hover:bg-secondary-50',
+                  ]}
+                  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">
+        <a
+          href="/contact"
+          class="btn-primary w-full justify-center"
+        >
+          Get Started
+          <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:+1234567890" 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>