705 lines
26 KiB
Handlebars
705 lines
26 KiB
Handlebars
|
|
<header
|
|
id="ai_header"
|
|
class="fixed top-0 left-0 right-0 w-full z-50"
|
|
data-hbs-id="km4id95">
|
|
<div
|
|
id="overlay"
|
|
class="fixed inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-600 -left-full z-50"
|
|
data-hbs-id="fjkpnds"></div>
|
|
|
|
<div class="container mx-auto px-4 py-4 lg:py-0" data-hbs-id="0t4nstl">
|
|
<div class="flex items-center justify-between" data-hbs-id="qpdaplu">
|
|
<div class="block lg:hidden" data-hbs-id="86be873">
|
|
<button
|
|
id="mobile-menu-button"
|
|
class="mobile-toggle cms-text-dark focus:outline-none"
|
|
aria-label="menu"
|
|
aria-expanded="false"
|
|
data-hbs-id="w51gcfg">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-menu"
|
|
data-hbs-id="e7huk6j">
|
|
<line x1="4" x2="20" y1="12" y2="12" />
|
|
<line x1="4" x2="20" y1="6" y2="6" />
|
|
<line x1="4" x2="20" y1="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-shrink-0" data-hbs-id="rv7rmpm">
|
|
<a
|
|
href="/"
|
|
class="cms-link flex items-center"
|
|
aria-label="Main navigation logo link"
|
|
data-hbs-id="cdvpm8u">
|
|
<img
|
|
src="https://static.fasterhq.com/favicon.png"
|
|
alt=""
|
|
class="h-8 site-logo"
|
|
/ data-hbs-id="sd2ztmi">
|
|
</a>
|
|
</div>
|
|
|
|
<nav
|
|
class="header-nav hidden lg:flex lg:items-center lg:justify-between lg:flex-1 ml-8"
|
|
data-hbs-id="ke8fqdv">
|
|
<ul class="flex space-x-6 site-navigation" data-hbs-id="f5ngu06">
|
|
<li class="relative group nav-item dummy" data-hbs-id="z050hsp">
|
|
<a
|
|
href="/"
|
|
class="nav-link flex items-center py-6 cms-text-dark hover:cms-text-accent font-medium text-sm"
|
|
data-hbs-id="n17kafd">
|
|
Products
|
|
<span
|
|
class="dropdown-arrow ml-1 opacity-70 group-hover:opacity-100 transition-transform duration-200 transform group-hover:rotate-180"
|
|
data-hbs-id="2ah6ynl">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 256 256"
|
|
fill="currentColor"
|
|
data-hbs-id="ju79c3i">
|
|
<rect width="256" height="256" fill="none"></rect>
|
|
<polyline
|
|
points="208 96 128 176 48 96"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="24"
|
|
></polyline>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
|
|
<ul
|
|
class="dropdown-menu absolute left-0 mt-0 w-56 rounded-md bg-white shadow-lg opacity-0 invisible transition-all duration-200 z-50 cms-border-light"
|
|
data-hbs-id="6iq6cwo">
|
|
<li class="cms-border-light" data-hbs-id="0yud899">
|
|
<a
|
|
href="/"
|
|
class="block px-5 py-3 text-sm cms-text-dark hover:cms-bg-light hover:cms-text-accent transition-all"
|
|
data-hbs-id="seraz2p">All Products</a
|
|
>
|
|
</li>
|
|
<li class="cms-border-light" data-hbs-id="4k3fruf">
|
|
<a
|
|
href="/"
|
|
class="block px-5 py-3 text-sm cms-text-dark hover:cms-bg-light hover:cms-text-accent transition-all"
|
|
data-hbs-id="y9e557l">Categories</a
|
|
>
|
|
</li>
|
|
<li data-hbs-id="6bty7ge">
|
|
<a
|
|
href="/"
|
|
class="block px-5 py-3 text-sm cms-text-dark hover:cms-bg-light hover:cms-text-accent transition-all"
|
|
data-hbs-id="bka8wiq">Special Deals</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="relative group nav-item dummy" data-hbs-id="zjhtn9g">
|
|
<a
|
|
href="/deals/"
|
|
class="nav-link flex items-center py-6 cms-text-dark hover:cms-text-accent font-medium text-sm"
|
|
data-hbs-id="e5bldeo">
|
|
Deals
|
|
</a>
|
|
</li>
|
|
<li class="relative group nav-item dummy" data-hbs-id="5g805aw">
|
|
<a
|
|
href="/Test/"
|
|
class="nav-link flex items-center py-6 cms-text-dark hover:cms-text-accent font-medium text-sm"
|
|
data-hbs-id="x8a3ama">
|
|
Satest
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="flex items-center space-x-4" data-hbs-id="u1uotob">
|
|
<button
|
|
type="button"
|
|
class="cms-text-dark hover:cms-text-accent"
|
|
aria-label="Search this site"
|
|
data-ghost-search
|
|
data-hbs-id="m3ow90b">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-search"
|
|
data-hbs-id="hhix62r">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="hidden lg:flex items-center space-x-3" data-hbs-id="znliioa">
|
|
<a
|
|
href="#/portal/signin"
|
|
class="cms-btn bg-transparent cms-text-primary cms-border-primary border hover:cms-bg-primary hover:text-white header-signin site-button px-5 py-2 text-sm rounded-none transition-colors"
|
|
data-portal="signin"
|
|
data-hbs-id="ebbjw2h">Sign in</a
|
|
>
|
|
<a
|
|
href="#/portal/signup"
|
|
class="cms-btn cms-bg-primary text-white cms-border-primary border hover:cms-bg-dark header-subscribe site-button px-4 py-2 text-sm rounded-none transition-colors"
|
|
data-portal="signup"
|
|
data-hbs-id="bhyib0v">Subscribe</a
|
|
>
|
|
<a
|
|
href="#/portal/account"
|
|
class="cms-btn cms-bg-accent text-white cms-border-accent border hover:cms-bg-primary header-account site-button px-4 py-2 hidden text-sm rounded-none transition-colors"
|
|
data-portal="account"
|
|
data-hbs-id="u3k20g8">Account</a
|
|
>
|
|
<!-- HTML Cart Button -->
|
|
<a
|
|
class="flex items-center rounded-md p-2 text-sm transition-colors hover:cms-text-accent focus:outline-none"
|
|
href="/cart"
|
|
data-hbs-id="0cw765p">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
class="h-6 w-6"
|
|
data-hbs-id="crv2iml">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
|
|
></path>
|
|
</svg>
|
|
<span
|
|
class="text-sm font-medium inline-block faster-header-cart-quantity"
|
|
style="margin-left: var(--space-1);"
|
|
data-hbs-id="fujo194">0</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="mobile-menu"
|
|
class="fixed inset-y-0 left-0 w-full max-w-xs bg-white shadow-xl transform -translate-x-full transition-transform duration-300 ease-in-out z-50 lg:hidden"
|
|
data-hbs-id="2kagh9q">
|
|
<div class="flex flex-col h-full" data-hbs-id="m0wg6sm">
|
|
<div
|
|
class="flex items-center justify-between p-4 cms-border-light"
|
|
data-hbs-id="zpksxa3">
|
|
<div class="flex items-center" data-hbs-id="g4ejayb">
|
|
<button
|
|
id="close-mobile-menu"
|
|
class="mr-4 cms-text-dark hidden"
|
|
aria-label="Close menu"
|
|
data-hbs-id="rsgx90n">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-menu"
|
|
data-hbs-id="t5pxea5">
|
|
<line x1="4" x2="20" y1="12" y2="12" />
|
|
<line x1="4" x2="20" y1="6" y2="6" />
|
|
<line x1="4" x2="20" y1="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
<a href="/" class="cms-link flex-shrink-0" data-hbs-id="yf473xs">
|
|
<img
|
|
src="https://static.fasterhq.com/favicon.png"
|
|
alt=""
|
|
class="h-8 site-logo"
|
|
/ data-hbs-id="0qgq163">
|
|
</a>
|
|
</div>
|
|
<button
|
|
class="cms-text-dark hover:cms-text-accent absolute right-0 top-0 mt-4 mr-4"
|
|
id="close-sidebar-button"
|
|
aria-label="Close sidebar"
|
|
data-hbs-id="dbfeymb">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-x"
|
|
data-hbs-id="ivolhzh">
|
|
<path d="M18 6 6 18" />
|
|
<path d="m6 6 12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto py-6 px-8" data-hbs-id="ffp0djd">
|
|
<nav data-hbs-id="tu91ppd">
|
|
<ul class="space-y-6 site-navigation" data-hbs-id="2tnaqbq">
|
|
<li class="mobile-menu-item dummy" data-hbs-id="ub9qqcc">
|
|
<div class="flex items-center justify-between" data-hbs-id="ifapll5">
|
|
<a href="#" class="cms-text-dark text-base hover:cms-text-accent"
|
|
data-hbs-id="r0kan1l">Home</a
|
|
>
|
|
<button
|
|
class="mobile-submenu-toggle cms-text-neutral hover:cms-text-accent focus:outline-none"
|
|
aria-label="Toggle submenu"
|
|
data-hbs-id="a58jajb">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 256 256"
|
|
fill="currentColor"
|
|
data-hbs-id="fet0kjb">
|
|
<rect width="256" height="256" fill="none"></rect>
|
|
<polyline
|
|
points="208 96 128 176 48 96"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="24"
|
|
></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<ul class="mobile-submenu dropdown-menu mt-2 ml-4 pl-4 hidden" data-hbs-id="qflj2cg">
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="1j7yowe">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="wv1xj9u">Welcome</a
|
|
>
|
|
</li>
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="gtyu8rb">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="2xeetrf">Featured Content</a
|
|
>
|
|
</li>
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="1i54bhn">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="p5asuel">What's New</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="mobile-menu-item dummy" data-hbs-id="0qgb1e9">
|
|
<div class="flex items-center justify-between" data-hbs-id="gydrzuy">
|
|
<a href="#" class="text-gray-800 hover:text-accent text-base"
|
|
data-hbs-id="jb9cxi8">About Us</a
|
|
>
|
|
<button
|
|
class="mobile-submenu-toggle cms-text-neutral hover:cms-text-accent focus:outline-none"
|
|
aria-label="Toggle submenu"
|
|
data-hbs-id="pb9hmru">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 256 256"
|
|
fill="currentColor"
|
|
data-hbs-id="zvb0cww">
|
|
<rect width="256" height="256" fill="none"></rect>
|
|
<polyline
|
|
points="208 96 128 176 48 96"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="24"
|
|
></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<ul
|
|
class="mobile-submenu dropdown-menu mt-2 ml-4 pl-4 cms-border-light hidden"
|
|
data-hbs-id="d5jbhqt">
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="d8ifcd2">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="ydl1g21">Company</a
|
|
>
|
|
</li>
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="b8p1zbf">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="ekjssit">Our Team</a
|
|
>
|
|
</li>
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="wr4mdmk">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="nfwp3cw">Careers</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="mobile-menu-item dummy" data-hbs-id="gcusa4l">
|
|
<div class="flex items-center justify-between" data-hbs-id="7lzcro4">
|
|
<a href="#" class="text-gray-800 hover:text-accent text-base"
|
|
data-hbs-id="9a09whg">Products</a
|
|
>
|
|
<button
|
|
class="mobile-submenu-toggle dropdown-menu text-gray-400 hover:text-accent focus:outline-none"
|
|
aria-label="Toggle submenu"
|
|
data-hbs-id="4d9l7f4">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 256 256"
|
|
fill="currentColor"
|
|
data-hbs-id="buee78p">
|
|
<rect width="256" height="256" fill="none"></rect>
|
|
<polyline
|
|
points="208 96 128 176 48 96"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="24"
|
|
></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<ul
|
|
class="mobile-submenu mt-2 ml-4 pl-4 border-l border-gray-200 hidden"
|
|
data-hbs-id="rrycko9">
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="1x2z6bj">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="bmgn6zg">All Products</a
|
|
>
|
|
</li>
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="6sjq04m">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="pfmnkpb">Categories</a
|
|
>
|
|
</li>
|
|
<li style="padding: var(--space-2) 0;" data-hbs-id="9nr2b6z">
|
|
<a href="/" class="cms-text-neutral text-base hover:cms-text-accent"
|
|
data-hbs-id="gqfk13g">Special Deals</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="cms-border-light p-4 flex justify-center gap-4" data-hbs-id="0foj3s4">
|
|
<a
|
|
href="#/portal/signin"
|
|
class="cms-btn bg-transparent cms-text-primary cms-border-primary border hover:cms-bg-primary hover:text-white w-1/2 px-4 py-2 text-sm text-center transition-colors"
|
|
data-portal="signin"
|
|
data-hbs-id="ky4ny4t">Sign in</a
|
|
>
|
|
<a
|
|
href="#/portal/signup"
|
|
class="cms-btn cms-bg-primary text-white cms-border-primary border hover:cms-bg-dark w-1/2 px-4 py-2 text-sm text-center transition-colors"
|
|
data-portal="signup"
|
|
data-hbs-id="nllqspw">Subscribe</a
|
|
>
|
|
<a
|
|
href="#/portal/account"
|
|
class="cms-btn cms-bg-accent text-white cms-border-accent border hover:cms-bg-primary w-1/2 hidden px-4 py-2 text-sm text-center transition-colors"
|
|
data-portal="account"
|
|
data-hbs-id="rz4jhb9">Account</a
|
|
>
|
|
<a
|
|
class="flex items-center rounded-md p-2 text-sm transition-colors hover:cms-text-accent focus:outline-none"
|
|
href="/cart"
|
|
data-hbs-id="n9ckpi3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
class="h-6 w-6"
|
|
data-hbs-id="9cl6xvg">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
|
|
></path>
|
|
</svg>
|
|
<span
|
|
class="text-sm font-medium inline-block faster-header-cart-quantity"
|
|
style="margin-left: var(--space-1);"
|
|
data-hbs-id="89e4ytz">0</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<style>
|
|
/* Dropdown Menu */
|
|
.group:hover .dropdown-menu {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Active Navigation Link */
|
|
.site-navigation .active {
|
|
color: var(--brand-accent) !important;
|
|
font-weight: 600;
|
|
position: relative;
|
|
}
|
|
|
|
.site-navigation .active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 32px;
|
|
height: 2px;
|
|
background-color: var(--brand-accent);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Header States - Applied to ALL pages */
|
|
|
|
/* Base State: Transparent background at top of page */
|
|
#ai_header {
|
|
transition: all 300ms ease;
|
|
}
|
|
|
|
body:not(.scrolled) #ai_header {
|
|
background-color: transparent !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
body:not(.scrolled) #ai_header .nav-link,
|
|
body:not(.scrolled) #ai_header .site-button,
|
|
body:not(.scrolled) #ai_header svg,
|
|
body:not(.scrolled) #ai_header .mobile-toggle {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Scrolled State: White background */
|
|
body.scrolled #ai_header {
|
|
background-color: white !important;
|
|
border-color: #e5e7eb !important;
|
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
|
|
}
|
|
|
|
body.scrolled #ai_header .nav-link,
|
|
body.scrolled #ai_header .site-button,
|
|
body.scrolled #ai_header svg,
|
|
body.scrolled #ai_header .mobile-toggle {
|
|
color: var(--dark-gray) !important;
|
|
}
|
|
|
|
/* Hover Effects */
|
|
.nav-link:hover {
|
|
color: var(--brand-accent) !important;
|
|
}
|
|
|
|
/* Active Links Override - Always Brand Accent */
|
|
.site-navigation .active {
|
|
color: var(--brand-accent) !important;
|
|
}
|
|
|
|
.site-navigation .active:hover {
|
|
color: var(--brand-accent) !important;
|
|
}
|
|
|
|
/* Ensure active links stay accent color in all states */
|
|
body:not(.scrolled) .site-navigation .active,
|
|
body.scrolled .site-navigation .active {
|
|
color: var(--brand-accent) !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const closeSidebarButton = document.getElementById('close-sidebar-button');
|
|
const closeMobileMenuButton = document.getElementById('close-mobile-menu');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const overlay = document.getElementById('overlay');
|
|
const submenuToggles = document.querySelectorAll('.mobile-submenu-toggle');
|
|
const header = document.getElementById('ai_header');
|
|
|
|
// Scroll state management for all pages
|
|
function handleScroll() {
|
|
if (window.scrollY > 0) {
|
|
document.body.classList.add('scrolled');
|
|
} else {
|
|
document.body.classList.remove('scrolled');
|
|
}
|
|
}
|
|
|
|
// Add scroll listener
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
// Check initial scroll position
|
|
handleScroll();
|
|
|
|
function toggleMobileMenu() {
|
|
const isOpen = mobileMenu.classList.contains('translate-x-0');
|
|
|
|
if (isOpen) {
|
|
mobileMenu.classList.remove('translate-x-0');
|
|
mobileMenu.classList.add('-translate-x-full');
|
|
overlay.classList.remove('opacity-50', 'pointer-events-auto');
|
|
overlay.classList.add('opacity-0', 'pointer-events-none');
|
|
document.body.classList.remove('overflow-hidden');
|
|
} else {
|
|
mobileMenu.classList.remove('-translate-x-full');
|
|
mobileMenu.classList.add('translate-x-0');
|
|
overlay.classList.remove('opacity-0', 'pointer-events-none');
|
|
overlay.classList.add('opacity-50', 'pointer-events-auto');
|
|
document.body.classList.add('overflow-hidden');
|
|
}
|
|
}
|
|
|
|
function toggleSubmenu(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const parentItem = event.currentTarget.closest('.mobile-menu-item');
|
|
const submenu = parentItem.querySelector('.mobile-submenu');
|
|
const toggle = event.currentTarget;
|
|
|
|
if (submenu) {
|
|
submenu.classList.toggle('hidden');
|
|
toggle.classList.toggle('active');
|
|
|
|
const isExpanded = !submenu.classList.contains('hidden');
|
|
toggle.setAttribute('aria-expanded', isExpanded);
|
|
}
|
|
}
|
|
|
|
mobileMenuButton.addEventListener('click', toggleMobileMenu);
|
|
closeSidebarButton.addEventListener('click', toggleMobileMenu);
|
|
closeMobileMenuButton.addEventListener('click', toggleMobileMenu);
|
|
overlay.addEventListener('click', toggleMobileMenu);
|
|
|
|
submenuToggles.forEach(toggle => {
|
|
toggle.addEventListener('click', toggleSubmenu);
|
|
toggle.addEventListener('touchstart', toggleSubmenu, { passive: false });
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth >= 1024 && mobileMenu.classList.contains('translate-x-0')) {
|
|
toggleMobileMenu();
|
|
}
|
|
});
|
|
|
|
function setActiveNavLink() {
|
|
const currentPath = window.location.pathname;
|
|
const currentHash = window.location.hash;
|
|
const currentSearch = window.location.search;
|
|
|
|
const normalizedCurrentPath = currentPath === '/' ? '/' : currentPath.replace(/\/$/, '').toLowerCase();
|
|
|
|
const navLinks = document.querySelectorAll('.site-navigation a:not(.dropdown-menu a)');
|
|
|
|
navLinks.forEach(link => {
|
|
const linkHref = link.getAttribute('href') ? link.getAttribute('href').toLowerCase() : "";
|
|
|
|
link.classList.remove('active');
|
|
if (!linkHref) return;
|
|
|
|
let isActive = false;
|
|
|
|
if (linkHref.startsWith('#')) {
|
|
isActive = currentHash === linkHref;
|
|
} else if (linkHref.startsWith('http')) {
|
|
isActive = false;
|
|
} else {
|
|
const normalizedLinkPath = linkHref === '/' ? '/' : linkHref.replace(/\/$/, '').toLowerCase();
|
|
|
|
if (normalizedLinkPath === '/' && normalizedCurrentPath === '/') {
|
|
isActive = true;
|
|
}
|
|
else if (normalizedLinkPath !== '/' && normalizedCurrentPath.startsWith(normalizedLinkPath)) {
|
|
const nextChar = normalizedCurrentPath[normalizedLinkPath.length];
|
|
isActive = !nextChar || nextChar === '/' || nextChar === '?' || nextChar === '#';
|
|
}
|
|
else {
|
|
const linkText = link.textContent.trim().toLowerCase();
|
|
const pathSegments = normalizedCurrentPath.split('/').filter(Boolean);
|
|
|
|
if (pathSegments.length > 0) {
|
|
isActive = pathSegments.some(segment =>
|
|
segment.toLowerCase() === linkText ||
|
|
linkText === segment.toLowerCase().replace(/[-_]/g, ' ')
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (isActive) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
|
|
const dropdownLinks = document.querySelectorAll('.dropdown-menu a');
|
|
dropdownLinks.forEach(link => {
|
|
const linkHref = link.getAttribute('href');
|
|
link.classList.remove('active');
|
|
|
|
if (linkHref && linkHref !== '#') {
|
|
const normalizedLinkPath = linkHref === '/' ? '/' : linkHref.replace(/\/$/, '');
|
|
|
|
if (normalizedLinkPath === normalizedCurrentPath) {
|
|
link.classList.add('active');
|
|
const parentNav = link.closest('.group')?.querySelector('a');
|
|
if (parentNav) {
|
|
parentNav.classList.add('active');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
setActiveNavLink();
|
|
|
|
setTimeout(() => {
|
|
const firstNavLink = document.querySelector('.site-navigation .nav-link');
|
|
if (firstNavLink) {
|
|
firstNavLink.classList.add('active');
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|