Better Header

src/assets/styles/base.css

@@ -35,8 +35,26 @@
   }
 }
 
-#header.scroll {
+#header.scroll > div:first-child {
-  @apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
+  @apply bg-white md:bg-white/90 md:backdrop-blur-md;
+  box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
+}
+.dark #header.scroll > div:first-child,
+#header.scroll.dark > div:first-child {
+  @apply bg-white md:bg-[#030621e6] border-b border-gray-500/20;
+  box-shadow: none;
+}
+/* #header.scroll > div:last-child {
+  @apply py-3;
+} */
+
+#header.expanded nav {
+  position: fixed;
+  top: 70px;
+  left: 0;
+  right: 0;
+  bottom: 70px !important;
+  padding: 0 5px;
 }
 
 .dropdown:hover .dropdown-menu {

src/components/common/BasicScripts.astro

@@ -36,17 +36,19 @@ import { SITE } from '~/config.mjs';
     let ticking = true;
 
     attachEvent('#header nav', 'click', function () {
-      document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
+      document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded");
-      document.body.classList.remove('overflow-hidden');
+      document.body.classList.remove("overflow-hidden");
-      document.getElementById('header')?.classList.remove('h-screen');
+      document.getElementById("header")?.classList.remove("h-screen");
-      document.querySelector('#header nav')?.classList.add('hidden');
+      document.querySelector("#header nav")?.classList.add("hidden");
     });
 
-    attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
+    attachEvent('[data-aw-toggle-menu]', 'click', function () {
-      elem.classList.toggle('expanded');
+      document.body.classList.toggle("overflow-hidden");
-      document.body.classList.toggle('overflow-hidden');
+      document.getElementById("header")?.classList.toggle("h-screen");
-      document.getElementById('header')?.classList.toggle('h-screen');
+      document.getElementById("header")?.classList.toggle("expanded");
-      document.querySelector('#header nav')?.classList.toggle('hidden');
+      document.getElementById("header")?.classList.toggle("bg-page");
+      document.querySelector("#header nav")?.classList.toggle("hidden");
+      document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden");
     });
 
     attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@@ -119,8 +121,9 @@ import { SITE } from '~/config.mjs';
     if (elem) {
       elem.classList.remove('expanded');
     }
-    document.body.classList.remove('overflow-hidden');
+    document.body.classList.remove("overflow-hidden");
-    document.getElementById('header')?.classList.remove('h-screen');
+    document.getElementById("header")?.classList.remove("h-screen");
-    document.querySelector('#header nav')?.classList.add('hidden');
+    document.getElementById("header")?.classList.remove("expanded");
+    document.querySelector("#header nav")?.classList.add("hidden");
   };
 </script>

src/components/widgets/Header.astro

@@ -1,10 +1,11 @@
 ---
-import { Icon } from 'astro-icon/components';
+import { Icon } from "astro-icon/components";
-import Logo from '~/components/Logo.astro';
+import Logo from "~/components/Logo.astro";
-import ToggleTheme from '~/components/common/ToggleTheme.astro';
+import ToggleTheme from "~/components/common/ToggleTheme.astro";
-import ToggleMenu from '~/components/common/ToggleMenu.astro';
+import ToggleMenu from "~/components/common/ToggleMenu.astro";
 
-import { getHomePermalink, getAsset } from '~/utils/permalinks';
+import { getHomePermalink } from "~/utils/permalinks";
+import { trimSlash, getAsset } from "~/utils/permalinks";
 
 interface Link {
   text?: string;
@@ -14,67 +15,88 @@ interface Link {
 }
 
 interface ActionLink extends Link {
-  type?: string;
+  class?: string;
 }
 
 interface MenuLink extends Link {
-  links?: Array<Link>;
+  links?: Array<MenuLink>;
 }
 
 export interface Props {
+  id?: string;
   links?: Array<MenuLink>;
   actions?: Array<ActionLink>;
   isSticky?: boolean;
+  isDark?: boolean;
+  isFullWidth?: boolean;
   showToggleTheme?: boolean;
   showRssFeed?: boolean;
   position?: string;
 }
 
 const {
+  id = "header",
   links = [],
   actions = [],
   isSticky = false,
+  isDark = false,
+  isFullWidth = false,
   showToggleTheme = false,
   showRssFeed = false,
-  position = 'center',
+  position = "center",
 } = Astro.props;
+
+const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
 ---
 
 <header
   class:list={[
-    { sticky: isSticky, relative: !isSticky },
+    { sticky: isSticky, relative: !isSticky, dark: isDark },
-    'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100 not-prose',
+    "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
   ]}
-  id="header"
+  {...id ? { id } : {}}
 >
-  <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-7xl">
+  <div class="absolute inset-0"></div>
-    <div class:list={[{"mr-auto": position === "right"}, "flex justify-between"]}>
+  <div
+    class:list={[
+      "relative text-default py-3 px-3 md:px-6 mx-auto w-full md:flex md:justify-between",
+      {
+        "max-w-7xl": !isFullWidth,
+      },
+    ]}
+  >
+    <div class:list={[{ "mr-auto rtl:mr-0 rtl:ml-auto": position === "right" }, "flex justify-between"]}>
       <a class="flex items-center" href={getHomePermalink()}>
         <Logo />
       </a>
       <div class="flex items-center md:hidden">
-        {showToggleTheme && <ToggleTheme />}
+        {/* <ToggleTheme /> */}
         <ToggleMenu />
       </div>
     </div>
     <nav
-      class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible md:mx-5"
+      class="items-center w-full md:w-auto hidden md:flex text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:mx-5"
       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">
+      <ul
+        class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium"
+      >
         {
           links.map(({ text, href, links }) => (
-            <li class={links?.length ? 'dropdown' : ''}>
+            <li class={links?.length ? "dropdown" : ""}>
               {links?.length ? (
                 <>
-                  <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center">
+                  <button class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center">
-                    {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
+                    {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
                   </button>
                   <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
                     {links.map(({ text: text2, href: href2 }) => (
                       <li>
                         <a
-                          class="first:rounded-t last:rounded-b md:hover:bg-gray-200 dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap"
+                          class:list={[
+                            "first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap",
+                            { "aw-link-active" : href2 === currentPath}
+                          ]}
                           href={href2}
                         >
                           {text2}
@@ -85,7 +107,10 @@ const {
                 </>
               ) : (
                 <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"
+                  class:list={[
+                    "hover:text-link dark:hover:text-white px-4 py-3 flex items-centers",
+                    { "aw-link-active": href === currentPath }
+                  ]}
                   href={href}
                 >
                   {text}
@@ -96,10 +121,15 @@ const {
         }
       </ul>
     </nav>
-    <div class:list={[{ 'ml-auto': position === 'left' }, 'md:self-center flex items-center md:mb-0']}>
+    <div
-      <div class="hidden items-center md:flex">
+      class:list={[
-        {showToggleTheme && <ToggleTheme iconClass="w-5 h-5" />}
+        { "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" },
-
+        "hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 bottom-0 p-3 md:p-0",
+      ]}
+    >
+      <div class="items-center flex justify-between w-full md:w-auto">
+        <div class="flex">
+          {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
           {
             showRssFeed && (
               <a
@@ -111,23 +141,18 @@ const {
               </a>
             )
           }
+        </div>
         {
           actions?.length ? (
-            <span class="ml-4">
+            <span class="ml-4 rtl:ml-0 rtl:mr-0">
-              {actions.map(({ text, href, type }) => (
+              {actions.map(({ text, href, class: className }) => (
-                <a
+                <a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
-                  class:list={[
-                    'btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm',
-                    { 'btn-ghost': type === 'ghost', 'btn-primary': type === 'primary' },
-                  ]}
-                  href={href}
-                >
                   <Fragment set:html={text} />
                 </a>
               ))}
             </span>
           ) : (
-            ''
+            ""
           )
         }
       </div>

src/data.js

@@ -23,20 +23,24 @@ export const headerData = {
       text: 'Pages',
       links: [
         {
-          text: 'Features',
+          text: 'Features (Anchor Link)',
           href: getPermalink('/#features'),
         },
+        {
+          text: 'Services',
+          href: getPermalink('/services'),
+        },
         {
           text: 'Pricing',
-          href: '#',
+          href: getPermalink('/pricing'),
         },
         {
           text: 'About us',
-          href: '#',
+          href: getPermalink('/about'),
         },
         {
           text: 'Contact',
-          href: '#',
+          href: getPermalink('/contact'),
         },
         {
           text: 'Terms',
@@ -48,13 +52,38 @@ export const headerData = {
         },
       ],
     },
+    {
+      text: "Blog",
+      links: [
+        {
+          text: "Blog List",
+          href: getBlogPermalink(),
+        },
+        {
+          text: "Article",
+          href: getPermalink("get-started-website-with-astro-tailwind-css", "post"),
+        },
+        {
+          text: "Article (with Widgets)",
+          href: getPermalink("markdown-elements-demo-post", "post"),
+        },
+        {
+          text: "Category Page",
+          href: getPermalink("tutorials", "category"),
+        },
+        {
+          text: "Tag Page",
+          href: getPermalink("astro", "tag"),
+        },
+      ],
+    },
     {
       text: 'Widgets',
       href: '#',
     },
     {
-      text: 'Blog',
+      text: 'Contact',
-      href: getBlogPermalink(),
+      href: '#',
     },
   ],
   actions: [{ type: 'button', text: 'Download', href: 'https://github.com/onwidget/astrowind' }],

src/pages/about.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+
+const meta = {
+  title: "About us",
+};
+---
+
+<Layout {meta}>
+  About us
+</Layout>

src/pages/contact.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+
+const meta = {
+  title: "Contact",
+};
+---
+
+<Layout {meta}>
+  Contact
+</Layout>

src/pages/pricing.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+
+const meta = {
+  title: "Pricing",
+};
+---
+
+<Layout {meta}>
+  Pricing
+</Layout>

src/pages/services.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+
+const meta = {
+  title: "Services",
+};
+---
+
+<Layout {meta}>
+  Services
+</Layout>