Improve Header widget

src/assets/styles/base.css

@@ -16,6 +16,10 @@
 	}
 }
 
+#header.scroll {
+	@apply border-b dark:border-none border-gray-50 bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
+}
+
 .dropdown:hover .dropdown-menu {
 	display: block;
 }

src/components/common/BasicScripts.astro

@@ -1,10 +1,9 @@
 ---
-import { SITE } from "~/config.mjs"
+import { SITE } from '~/config.mjs';
 ---
 
 <script is:inline define:vars={{ defaultTheme: SITE.defaultTheme }}>
-
+	function applyTheme(theme) {
-function applyTheme(theme) {
 		if (theme === 'dark') {
 			document.documentElement.classList.add('dark');
 		} else {
@@ -12,28 +11,30 @@ function applyTheme(theme) {
 		}
 	}
 
-	if ((defaultTheme && defaultTheme.endsWith(":only")) || (!localStorage.theme && defaultTheme !== "system")) {
+	if ((defaultTheme && defaultTheme.endsWith(':only')) || (!localStorage.theme && defaultTheme !== 'system')) {
-		applyTheme(defaultTheme.replace(":only", ""));
+		applyTheme(defaultTheme.replace(':only', ''));
-	}
+	} else if (
-	else if (
 		localStorage.theme === 'dark' ||
 		(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
 	) {
-		applyTheme("dark")
+		applyTheme('dark');
 	} else {
-		applyTheme("light")
+		applyTheme('light');
 	}
 
 	function attachEvent(selector, event, fn) {
-		const matches = document.querySelectorAll(selector);
+		const matches = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;
 		if (matches && matches.length) {
 			matches.forEach((elem) => {
-				elem.addEventListener(event, () => fn(elem), false);
+				elem.addEventListener(event, (e) => fn(e, elem), false);
 			});
 		}
 	}
 
 	window.onload = function () {
+		let lastKnownScrollPosition = 0;
+		let ticking = false;
+
 		attachEvent('[data-aw-toggle-menu]', 'click', function (elem) {
 			elem.classList.toggle('expanded');
 			document.body.classList.toggle('overflow-hidden');
@@ -42,7 +43,7 @@ function applyTheme(theme) {
 		});
 
 		attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
-			if (defaultTheme.endsWith(":only")) {
+			if (defaultTheme.endsWith(':only')) {
 				return;
 			}
 			document.documentElement.classList.toggle('dark');
@@ -81,7 +82,26 @@ function applyTheme(theme) {
 			newlink.href = href;
 			newlink.click();
 		});
+
+		attachEvent([document], 'scroll', function () {
+			lastKnownScrollPosition = window.scrollY;
+
+			if (!ticking) {
+				window.requestAnimationFrame(() => {
+					const header = document.getElementById('header');
+					if (lastKnownScrollPosition > 100 && !header.classList.contains('scroll')) {
+						document.getElementById('header').classList.add('scroll');
+					} else if (lastKnownScrollPosition <= 100 && header.classList.contains('scroll')) {
+						document.getElementById('header').classList.remove('scroll');
+					}
+					ticking = false;
+				});
+
+				ticking = true;
+			}
+		});
 	};
+
 	window.onpageshow = function () {
 		const elem = document.querySelector('[data-aw-toggle-menu]');
 		if (elem) {

src/components/widgets/Header.astro

@@ -5,12 +5,58 @@ import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';
 
 import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permalinks';
+
+const links = [
+	{
+		text: 'Landing Pages',
+		links: [
+			{
+				text: 'Startup',
+				href: getPermalink('/landing/startup'),
+			},
+			{
+				text: 'Saas',
+				href: getPermalink('/landing/saas'),
+			},
+			{
+				text: 'Mobile App',
+				href: getPermalink('/landing/mobile-app'),
+			},
+		],
+	},
+	{
+		text: 'Pages',
+		links: [
+			{
+				text: 'Services',
+				href: getPermalink('/services'),
+			},
+			{
+				text: 'About us',
+				href: getPermalink('/about'),
+			},
+			{
+				text: 'Contact',
+				href: getPermalink('/contact'),
+			},
+			{
+				text: 'Terms',
+				href: getPermalink('/terms'),
+			},
+			{
+				text: 'Privacy policy',
+				href: getPermalink('/privacy'),
+			},
+		],
+	},
+	{
+		text: 'Blog',
+		href: getBlogPermalink(),
+	},
+];
 ---
 
-<header
+<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-200" id="header">
-	class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm"
-	id="header"
->
 	<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
 		<div class="flex justify-between">
 			<a class="flex items-center" href={getHomePermalink()}>
@@ -26,58 +72,38 @@ import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permal
 			aria-label="Main navigation"
 		>
 			<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
-				<li class="dropdown">
+				{
-					<button
+					links.map(({ text, href, links }) => (
-						class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
+						<li class={links?.length ? 'dropdown' : ''}>
-						>Pages</button
+							{links?.length ? (
-					>
+								<>
-					<ul
+									<button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
-						class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl"
+										{text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
-					>
+									</button>
-						<li>
+									<ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
-							<a
+										{links.map(({ text: text2, href: href2 }) => (
-								class="rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
+											<li>
-								href="#">Features</a
+												<a
-							>
+													class="first:rounded-t last:rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap"
+													href={href2}
+												>
+													{text2}
+												</a>
+											</li>
+										))}
+									</ul>
+								</>
+							) : (
+								<a
+									class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
+									href={href}
+								>
+									{text}
+								</a>
+							)}
 						</li>
-						<li>
+					))
-							<a class="md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap" href="#"
+				}
-								>Profile</a
-							>
-						</li>
-						<li>
-							<a
-								class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-								href="#">Pricing</a
-							>
-						</li>
-						<li>
-							<a
-								class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-								href={getPermalink('/terms')}>Terms and Conditions</a
-							>
-						</li>
-						<li>
-							<a
-								class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-								href={getPermalink('/privacy')}>Privacy Policy</a
-							>
-						</li>
-					</ul>
-				</li>
-				<li>
-					<a
-						class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-						href={getPermalink('useful-resources-to-create-websites', 'post')}
-						>Resources
-					</a>
-				</li>
-				<li>
-					<a
-						class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-						href={getBlogPermalink()}>Blog</a
-					>
-				</li>
 				<li class="md:hidden">
 					<a
 						class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@@ -85,25 +111,22 @@ import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permal
 					>
 				</li>
 			</ul>
-			<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
-				<div class="hidden items-center md:flex">
-					<ToggleTheme iconClass="w-5 h-5" />
-					<a
-						class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
-						aria-label="RSS Feed"
-						href={getPermalink('/rss.xml')}
-					>
-						<Icon name="tabler:rss" class="w-5 h-5" />
-					</a>
-					<a
-						href="https://github.com/onwidget/astrowind"
-						class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
-						aria-label="Astrowind Github"
-					>
-						<Icon name="tabler:brand-github" class="w-5 h-5" />
-					</a>
-				</div>
-			</div>
 		</nav>
+		<div class="md:self-center flex items-center md:mb-0">
+			<div class="hidden items-center md:flex">
+				<ToggleTheme iconClass="w-5 h-5" />
+				<a
+					class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+					aria-label="RSS Feed"
+					href={getPermalink('/rss.xml')}
+				>
+					<Icon name="tabler:rss" class="w-5 h-5" />
+				</a>
+				<a
+					class="btn w-full ml-3 py-2.5 px-6 font-medium text-gray-600 shadow-none"
+					href="https://github.com/onwidget/astrowind">Download</a
+				>
+			</div>
+		</div>
 	</div>
 </header>