feat: update navigation toggle functionality and improve header acces…

…sibility

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astrolus",
-  "version": "0.0.1",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -10,11 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@tailwindcss/postcss": "4.0.0-beta.8",
     "@tailwindcss/vite": "4.0.0-beta.8",
     "astro": "^5.1.3",
     "astro-font": "^0.0.72",
-    "postcss": "^8.4.49",
     "tailwindcss": "4.0.0-beta.8"
   }
 }

src/components/AppHeader.astro

@@ -20,59 +20,28 @@ const links = [
 ];
 ---
 
-<script>
-    let isToggled = false;
-    const navlinks = document.querySelector("#navlinks");
-    const hamburger = document.querySelector("#hamburger");
-    const layer = document.querySelector("#navLayer");
-    const links = [...navlinks.querySelector("#links-group").children];
-
-    function toggleNavlinks() {
-        if (isToggled) {
-            navlinks.classList.add("!visible", "!scale-100", "!opacity-100", "!lg:translate-y-0");
-            hamburger.classList.add("toggled");
-            layer.classList.add("origin-top", "scale-y-100");
-        } else {
-            navlinks.classList.remove("!visible", "!scale-100", "!opacity-100", "!lg:translate-y-0");
-            hamburger.classList.remove("toggled");
-            layer.classList.remove("origin-top", "scale-y-100");
-        }
-    }
-    hamburger.addEventListener("click", () => {
-        isToggled = !isToggled;
-        toggleNavlinks();
-    });
-
-    links.forEach((link) => {
-        link.addEventListener("click", () => {
-            isToggled = !isToggled;
-            toggleNavlinks();
-        });
-    });
-</script>
-
 <header>
-    <nav class="absolute z-10 w-full border-b border-black/5 dark:border-white/5 lg:border-transparent">
+    <nav id="nav" class="absolute group z-10 w-full border-b border-black/5 dark:border-white/5 lg:border-transparent">
         <Container>
             <div class="relative flex flex-wrap items-center justify-between gap-6 py-3 md:gap-0 md:py-4">
                 <div class="relative z-20 flex w-full justify-between md:px-0 lg:w-fit">
                     <a href="/#home" aria-label="logo" class="flex items-center space-x-2">
                         <div aria-hidden="true" class="flex space-x-1">
-                            <div class="h-4 w-4 rounded-full bg-gray-900 dark:bg-white"></div>
+                            <div class="size-4 rounded-full bg-gray-900 dark:bg-white"></div>
                             <div class="h-6 w-2 bg-primary"></div>
                         </div>
                         <span class="text-2xl font-bold text-gray-900 dark:text-white">Astrolus</span>
                     </a>
 
                     <div class="relative flex max-h-10 items-center lg:hidden">
-                        <button aria-label="humburger" id="hamburger" class="relative -mr-6 p-6">
-                            <div aria-hidden="true" id="line" class="m-auto h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"></div>
-                            <div aria-hidden="true" id="line2" class="m-auto mt-2 h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"></div>
+                        <button aria-label="humburger" id="hamburger" class="relative -mr-6 p-6 active:scale-95 duration-300">
+                            <div aria-hidden="true" id="line" class="m-auto h-0.5 w-5 rounded bg-gray-950 transition duration-300 dark:bg-white origin-top group-data-[state=active]:rotate-45 group-data-[state=active]:translate-y-1.5"></div>
+                            <div aria-hidden="true" id="line2" class="m-auto mt-2 h-0.5 w-5 rounded bg-gray-950 transition duration-300 dark:bg-white origin-bottom group-data-[state=active]:-rotate-45 group-data-[state=active]:-translate-y-1"></div>
                         </button>
                     </div>
                 </div>
-                <div id="navLayer" aria-hidden="true" class="fixed inset-0 z-10 h-screen w-screen origin-bottom scale-y-0 bg-white/70 backdrop-blur-2xl transition duration-500 dark:bg-gray-900/70 lg:hidden"></div>
-                <div id="navlinks" class="invisible absolute top-full left-0 z-20 w-full origin-top-right translate-y-1 scale-90 flex-col flex-wrap justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none lg:visible lg:relative lg:flex lg:w-fit lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none lg:dark:bg-transparent">
+                <div id="navLayer" aria-hidden="true" class="fixed inset-0 z-10 h-screen w-screen origin-bottom scale-y-0 bg-white/70 backdrop-blur-2xl transition duration-500 group-data-[state=active]:origin-top group-data-[state=active]:scale-y-100 dark:bg-gray-950/70 lg:hidden"></div>
+                <div id="navlinks" class="invisible absolute top-full left-0 z-20 w-full origin-top-right translate-y-1 scale-90 flex-col flex-wrap justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none lg:visible lg:relative lg:flex lg:w-fit lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none lg:dark:bg-transparent group-data-[state=active]:visible group-data-[state=active]:scale-100 group-data-[state=active]:opacity-100 lg:group-data-[state=active]:translate-y-0">
                     <div class="w-full text-gray-600 dark:text-gray-200 lg:w-auto lg:pr-4 lg:pt-0">
                         <div id="links-group" class="flex flex-col gap-6 tracking-wide lg:flex-row lg:gap-0 lg:text-sm">
                             {
@@ -99,3 +68,30 @@ const links = [
         </Container>
     </nav>
 </header>
+
+<script>
+    let isToggled = false;
+    const navbar = document.querySelector("#nav") as HTMLElement;
+    const menuBtn = document.querySelector("#hamburger") as HTMLButtonElement;
+    const links = [...navbar.querySelector("#links-group").children] as HTMLAnchorElement[];
+
+    function toggleNavlinks() {
+        if (isToggled) {
+            navbar.dataset.state = "active";
+        } else {
+            navbar.dataset.state = "";
+        }
+    }
+
+    menuBtn.addEventListener("click", () => {
+        isToggled = !isToggled;
+        toggleNavlinks();
+    });
+
+    links.forEach((link) => {
+        link.addEventListener("click", () => {
+            isToggled = !isToggled;
+            toggleNavlinks();
+        });
+    });
+</script>

src/components/HeroSection.astro

@@ -1,6 +1,5 @@
 ---
 import Container from "./Container.astro"
-
 ---
 
 <div class="relative" id="home">
@@ -11,7 +10,7 @@ import Container from "./Container.astro"
     <Container>
         <div class="relative pt-36 ml-auto">
             <div class="lg:w-2/3 text-center mx-auto">
-                <h1 class="text-gray-900 dark:text-white font-bold text-5xl md:text-6xl xl:text-7xl">Shaping a world with <span class="text-primary dark:text-white">reimagination.</span></h1>
+                <h1 class="text-gray-900 text-balance dark:text-white font-bold text-5xl md:text-6xl xl:text-7xl">Shaping a world with <span class="text-primary dark:text-white">reimagination.</span></h1>
                 <p class="mt-8 text-gray-700 dark:text-gray-300">Odio incidunt nam itaque sed eius modi error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!</p>
                 <div class="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
                     <a