From 95bc2105dc31f8aff9f3833cf4050e570a9f9330 Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Mon, 9 Sep 2024 04:40:08 +0700
Subject: [PATCH] fix: navbar styling

---
 src/components/Header.astro   | 13 ++++-------
 src/components/MobileMenu.tsx |  2 +-
 src/scripts/main.ts           | 44 +++++++++++++++++++++++++++++++----
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3abf923..5a85f55 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,12 +3,11 @@ import path from "./path.json";
 import { basics } from "@cv";
 import MobileMenu from "./MobileMenu";
 const { nickname } = basics;
-const currentPath = Astro.url.pathname;
 ---
 
-<header id="header" class="fixed top-0 z-50 w-full print:hidden">
+<header id="header" class="absolute top-0 z-50 w-full print:hidden">
   <div
-    class="mx-auto flex h-14 max-w-5xl select-none items-center justify-between border-b border-l-0 border-r-0 border-neutral-600/40 bg-neutral-900/60 px-6 backdrop-blur-2xl lg:rounded-b-xl lg:border-l lg:border-r"
+    class="mx-auto flex h-20 max-w-5xl select-none items-center justify-between border-b border-transparent bg-transparent px-6 transition-all duration-300 lg:rounded-b-xl lg:border-l lg:border-r"
   >
     <a
       href="/"
@@ -24,9 +23,7 @@ const currentPath = Astro.url.pathname;
           path.map((link) => (
             <a
               href={link.url}
-              class={`relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0 ${
-                currentPath === link.url ? "text-white" : ""
-              }`}
+              class="relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0"
             >
               {link.name}
             </a>
@@ -38,9 +35,7 @@ const currentPath = Astro.url.pathname;
           path.map((link) => (
             <a
               href={link.url}
-              class={`relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0 ${
-                currentPath === link.url ? "text-white" : ""
-              }`}
+              class="relative flex w-full items-center justify-center px-4 py-2 text-center font-medium tracking-wide duration-200 ease-out hover:text-white sm:w-auto sm:py-0"
             >
               {link.name}
             </a>
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 1d1d123..ec034a7 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -47,7 +47,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ children }) => {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
             transition={{ duration: 0.2 }}
-            className="fixed left-0 top-14 z-40 w-full flex-col items-end justify-start bg-neutral-900/95 pb-4 pt-2 text-sm sm:hidden"
+            className="fixed left-0 top-14 z-40 w-full flex-col items-end justify-start rounded-2xl border border-dashed border-neutral-600 bg-black pb-4 pt-2 text-sm sm:hidden"
           >
             {children}
           </motion.div>
diff --git a/src/scripts/main.ts b/src/scripts/main.ts
index f7e3313..e4d957a 100644
--- a/src/scripts/main.ts
+++ b/src/scripts/main.ts
@@ -1,6 +1,7 @@
 interface Window {
   stickyHeaderFuncionality: () => void;
   evaluateHeaderPosition: () => void;
+  applyMenuItemClasses: () => void;
 }
 
 let headerElement: HTMLElement | null = null;
@@ -9,6 +10,7 @@ document.addEventListener("DOMContentLoaded", () => {
   headerElement = document.getElementById("header");
 
   window.stickyHeaderFuncionality();
+  window.applyMenuItemClasses();
   window.evaluateHeaderPosition();
 });
 
@@ -19,11 +21,45 @@ window.stickyHeaderFuncionality = () => {
 };
 
 window.evaluateHeaderPosition = () => {
+  const stickyClasses = ["fixed", "h-14"];
+  const unstickyClasses = ["absolute", "h-20"];
+  const stickyClassesContainer = [
+    "border-neutral-300/50",
+    "bg-white/80",
+    "dark:border-neutral-600/40",
+    "dark:bg-neutral-900/60",
+    "backdrop-blur-2xl",
+  ];
+  const unstickyClassesContainer = ["border-transparent", "bg-transparent"];
+
   if (window.scrollY > 16 && headerElement) {
-    headerElement.classList.add("h-14");
-    headerElement.classList.remove("h-[75px]");
+    headerElement.classList.add(...stickyClasses);
+    headerElement.classList.remove(...unstickyClasses);
+
+    const container = headerElement.querySelector("div");
+    if (container) {
+      container.classList.add(...stickyClassesContainer);
+      container.classList.remove(...unstickyClassesContainer);
+    }
   } else if (headerElement) {
-    headerElement.classList.remove("h-14");
-    headerElement.classList.add("h-[75px]");
+    headerElement.classList.remove(...stickyClasses);
+    headerElement.classList.add(...unstickyClasses);
+
+    const container = headerElement.querySelector("div");
+    if (container) {
+      container.classList.remove(...stickyClassesContainer);
+      container.classList.add(...unstickyClassesContainer);
+    }
   }
 };
+
+window.applyMenuItemClasses = () => {
+  const menuItems = document.querySelectorAll<HTMLAnchorElement>("nav a");
+  menuItems.forEach((menuItem) => {
+    if (menuItem.pathname === window.location.pathname) {
+      menuItem.classList.add("text-white");
+    } else {
+      menuItem.classList.remove("text-white");
+    }
+  });
+};