elearning/Frontend-Learner/components/layout/LandingHeader.vue

<script setup lang="ts">
/**
 * @file LandingHeader.vue
 * @description The main header for the public landing pages.
 * Features a transparent background that becomes solid/glass upon scrolling.
 * Responsive: Collapses into a drawer on mobile (md breakpoint).
 */

// Track scrolling state to adjust header styling
const isScrolled = ref(false)
const { isAuthenticated } = useAuth()
// Mobile Drawer State
const mobileMenuOpen = ref(false)

const handleScroll = () => {
  isScrolled.value = window.scrollY > 20
}

// Lock body scroll when mobile menu is open
watch(mobileMenuOpen, (isOpen) => {
  if (isOpen) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
})

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  document.body.style.overflow = '' // Cleanup
})
</script>

<template>
  <!-- 
    Header Container 
    - Transitions between transparent and glass effect based on scroll.
  -->
  <header 
    class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
    :class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
  >
    <div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-start">
      <!-- Left Section: Logo -->
      <NuxtLink to="/" class="flex items-center gap-3 group">
        <div class="bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
          E
        </div>
        <div class="flex flex-col">
          <span 
            class="font-black text-lg leading-none tracking-tight transition-colors"
            :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
          >
            E-Learning
          </span>
          <span 
            class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
            :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
          >
            Platform
          </span>
        </div>
      </NuxtLink>

      <!-- Desktop Navigation (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
      <nav class="flex desktop-nav items-center gap-8 text-sm font-bold ml-12">
        <NuxtLink 
          to="/browse" 
          class="transition-colors relative group py-2"
          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
        >
          {{ $t('sidebar.onlineCourses') }}
          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
        </NuxtLink>
        <NuxtLink 
          to="/browse/recommended" 
          class="transition-colors relative group py-2"
          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
        >
          {{ $t('sidebar.recommendedCourses') }}
          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
        </NuxtLink>
      </nav>

      <!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
      <div class="flex desktop-nav items-center gap-4 ml-auto">
        <template v-if="!isAuthenticated">
          <!-- Login Button -->
          <NuxtLink 
            to="/auth/login" 
            class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
          >
            {{ $t('auth.login') }}
          </NuxtLink>
          
          <!-- Register Button -->
          <NuxtLink 
            to="/auth/register" 
            class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
          >
            {{ $t('auth.getStarted') }}
          </NuxtLink>
        </template>
        
        <template v-else>
          <NuxtLink 
            to="/dashboard" 
            class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
          >
             {{ $t('landing.goToDashboard') }}
          </NuxtLink>
        </template>
      </div>

      <!-- Mobile Menu Button (Visible on Mobile) -->
      <button 
        class="md:hidden mobile-toggle ml-auto relative z-[120] w-10 h-10 flex items-center justify-center rounded-full transition-colors"
        :class="[isScrolled ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100', mobileMenuOpen ? 'text-slate-900 z-[120]' : '']"
        @click="mobileMenuOpen = !mobileMenuOpen"
      >
        <q-icon :name="mobileMenuOpen ? 'close' : 'menu'" size="24px" />
      </button>

    </div>
  </header>

  <!-- Mobile Navigation Drawer (Teleported to body to avoid z-index/clipping issues with Header) -->
  <Teleport to="body">
    <div v-if="mobileMenuOpen">
      <div 
        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[2000] transition-opacity duration-300 md:hidden"
        :class="[mobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
        @click="mobileMenuOpen = false"
      />
      
      <div 
        class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-[2001] transform transition-transform duration-300 ease-out md:hidden flex flex-col"
        :class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
      >
        <div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
          <!-- Close Button -->
          <button 
            class="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors"
            @click="mobileMenuOpen = false"
          >
            <q-icon name="close" size="20px" />
          </button>

          <!-- Mobile Links -->
          <nav class="flex flex-col gap-2 mt-8">
            <NuxtLink 
              to="/" 
              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
              @click="mobileMenuOpen = false"
            >
              {{ $t('sidebar.overview') }}
              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
            </NuxtLink>
            <NuxtLink 
              to="/browse" 
              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
              @click="mobileMenuOpen = false"
            >
              {{ $t('sidebar.onlineCourses') }}
              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
            </NuxtLink>
            <NuxtLink 
              to="/browse/recommended" 
              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
              @click="mobileMenuOpen = false"
            >
              {{ $t('sidebar.recommendedCourses') }}
              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
            </NuxtLink>
          </nav>

          <div class="mt-auto pb-8 border-t border-slate-100 pt-8">
             <template v-if="!isAuthenticated">
                <div class="flex flex-col gap-4">
                   <NuxtLink 
                      to="/auth/login" 
                      class="w-full py-3 rounded-xl font-bold text-center border-2 border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
                      @click="mobileMenuOpen = false"
                   >
                     {{ $t('auth.login') }}
                   </NuxtLink>
                   <NuxtLink 
                      to="/auth/register" 
                      class="w-full py-3 rounded-xl font-bold text-center text-white bg-blue-600 shadow-lg hover:bg-blue-700 transition-colors"
                      @click="mobileMenuOpen = false"
                   >
                     {{ $t('auth.getStarted') }}
                   </NuxtLink>
                </div>
             </template>
             <template v-else>
                <NuxtLink 
                   to="/dashboard" 
                   class="flex items-center justify-center w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg shadow-blue-500/30"
                   @click="mobileMenuOpen = false"
                >
                   {{ $t('landing.goToDashboard') }} <q-icon name="arrow_forward" class="ml-2" />
                </NuxtLink>
             </template>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
/* Glassmorphism Effect for Scrolled Header */
.glass-nav {
  background: rgba(15, 23, 42, 0.95); /* Darker background for legibility */
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Premium Primary Button Styling */
.btn-primary-premium {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
}

/* Secondary Premium Button Styling */
.btn-secondary-premium {
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  border: 1.5px solid;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary-premium:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

/* 
  Force Visibility Logic to bypass potential Tailwind Build issues 
  Ensures Desktop and Mobile parts are strictly separated
*/
.desktop-nav {
  display: flex; /* Default to visible */
}

@media (max-width: 767.98px) {
  .desktop-nav {
    display: none !important;
  }
  .mobile-toggle {
    display: flex !important;
  }
}
</style>