From 0f88aeb06fae0cbc08a6752cf21f1ee5426dc9fc Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Thu, 19 Feb 2026 13:33:39 +0700
Subject: [PATCH] feat: create responsive `LandingHeader` component with
 scroll-triggered glass effect and mobile drawer menu.

---
 .../components/layout/LandingHeader.vue       | 71 +++++++++++++++++--
 1 file changed, 65 insertions(+), 6 deletions(-)

diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index ee6d8fd9..e76c1223 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -44,7 +44,7 @@ onUnmounted(() => {
     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-between">
+    <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">
@@ -66,8 +66,8 @@ onUnmounted(() => {
         </div>
       </NuxtLink>
 
-      <!-- Desktop Navigation (Hidden on Mobile) -->
-      <nav class="hidden md:flex items-center gap-8 text-sm font-bold">
+      <!-- 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"
@@ -86,8 +86,8 @@ onUnmounted(() => {
         </NuxtLink>
       </nav>
 
-      <!-- Desktop Action Buttons (Hidden on Mobile) -->
-      <div class="hidden md:flex items-center gap-4">
+      <!-- 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 
@@ -119,7 +119,7 @@ onUnmounted(() => {
 
       <!-- Mobile Menu Button (Visible on Mobile) -->
       <button 
-        class="md:hidden relative z-50 w-10 h-10 flex items-center justify-center rounded-full transition-colors"
+        class="md:hidden mobile-toggle relative z-50 w-10 h-10 flex items-center justify-center rounded-full transition-colors"
         :class="[isScrolled || mobileMenuOpen ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100']"
         @click="mobileMenuOpen = !mobileMenuOpen"
       >
@@ -217,4 +217,63 @@ onUnmounted(() => {
   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>