Header: add animations

.gitignore

@@ -22,3 +22,5 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+server/*.js

package.json

@@ -9,10 +9,12 @@
     "build:server": "tsc -p server",
     "build:client": "astro check && astro build",
     "build": "npm run build:server & npm run build:client",
+    "start": "node server/index.js",
     "bstart": "npm run build && npm run start",
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.4",
     "@astrojs/node": "^9.1.3",
     "@fastify/middie": "^9.0.3",
     "@fastify/static": "^8.1.1",
@@ -22,6 +24,7 @@
     "astro-icon": "^1.1.5",
     "fastify": "^5.2.1",
     "tailwindcss": "^4.0.14",
+    "typescript": "^5.8.2",
     "vite": "^6.2.2",
     "wisp-server-node": "^1.1.7"
   },

src/components/Header.astro

@@ -13,15 +13,15 @@ const path = Astro.url.pathname;
         </a>
     </div>
 </div>
-<div class="fixed w-full h-full z-10 flex flex-row hidden pointer-events-auto" id="navigation">
+<div class="fixed w-full h-full z-10 flex flex-row pointer-events-auto invisible transition duration-500" id="navigation">
-    <div class="flex flex-col gap-6 w-72 h-full bg-(--background) border-r border-r-(--border) p-6">
+    <div id="innerNav" class="flex flex-col gap-6 w-72 h-full bg-(--background) border-r border-r-(--border) p-6 transition duration-250 shadow-lg">
         <div class="w-full flex flex-row justify-between">
             <Icon name="lucide:radius" class="w-10 h-10 rotate-180 text-(--foreground)" />
             <button id="exitNav">
                 <Icon name="lucide:x" class="text-(--muted-foreground)" />
             </button>
         </div>
-        <div class="flex flex-col gap-3"> 
+        <div class="flex flex-col gap-3 transition duration-500"> 
             <div class="text-(--secondary-foreground) w-full border-b border-b-(--border) pb-3 flex flex-col gap-3">
                 <a href="/" class=`flex flex-row gap-2 items-center rounded-lg h-10 w-full whitespace-nowrap px-4 py-2 font-medium text-sm ${path === '/' ? 'bg-(--secondary)': 'bg-(--background)'} transition-all duration-200 hover:bg-(--secondary) hover:scale-105 focus:ring-(--ring) focus:ring-2`>
                     <Icon name="lucide:house" class="text-lg w-6 h-6" /> Home
@@ -40,26 +40,40 @@ const path = Astro.url.pathname;
             </div>
         </div>
     </div>
-    <span id="body-hide" class="flex-grow h-full opacity-85 bg-(--background) brightness-20"></span>
+    <span id="body-hide" class="flex-grow h-full bg-(--background) brightness-20 transition duration-500"></span>
 </div>
+<style>
+    #innerNav {
+        transform: translateX(-100%);
+    }
+    #body-hide {
+        opacity: 0%;
+    }
+</style>
 <script>    
     const handler = () => {
-        const open = false;
         const menuButton = document.getElementById("menu") as HTMLButtonElement;
         const navigation = document.getElementById("navigation") as HTMLDivElement;
         const bodyHider = document.getElementById("body-hide") as HTMLSpanElement;
         const exitNav = document.getElementById("exitNav") as HTMLButtonElement;
+        const innerNav = document.getElementById("innerNav") as HTMLDivElement;
 
         menuButton.addEventListener("click", () => { 
-            navigation.classList.remove("hidden");
+            navigation.classList.remove("invisible");
+            bodyHider.style.opacity = "85%";
+            innerNav.style.transform = "translateX(0%)";
         });
 
         exitNav.addEventListener("click", () => {
-            navigation.classList.add("hidden");
+            bodyHider.style.opacity = "0%";
+            navigation.classList.add("invisible");
+            innerNav.style.transform = "translateX(-100%)";
         });
 
         bodyHider.addEventListener("click", () => {
-            navigation.classList.add("hidden");
+            bodyHider.style.opacity = "0%";
+            navigation.classList.add("invisible");
+            innerNav.style.transform = "translateX(-100%)";
         });
     }
 

src/pages/index.astro

@@ -19,9 +19,9 @@ const randomSplash = genSplash();
                 <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
                 <h1 class="text-6xl font-semibold">Radius</h1>
             </div>
-            <div class="flex flex-row items-center gap-2 w-[26rem] border border-(--input) rounded-lg h-12 p-2">
+            <div class="flex flex-row items-center gap-2 w-4/5 md:w-[26rem] border border-(--input) rounded-lg h-12 p-2">
                 <Icon name="lucide:search" />
-                <input type="text" name="Search" class="text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
+                <input type="text" name="Search" class="text-md md:text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
             </div>
             <p class="text-base"> { randomSplash } </p>
         </div>

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"],
+  "exclude": ["dist", "server"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {