chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: create responsive LandingHeader component with scroll-triggered glass effect and mobile drawer menu.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 13:33:39 +07:00
parent 76b64a30ae
commit 0f88aeb06f
1 changed files with 65 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

71
Frontend-Learner/components/layout/LandingHeader.vue
View file

@ -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>