style: active link different color, underline

brown-ccv · Apr 29, 2024 · 42627c4 · 42627c4
1 parent 0e47ba8
commit 42627c4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 20 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -11,7 +11,7 @@ const { isHidden = true } = Astro.props
 
       let isHidden = true
       const button = this.querySelector("button")
-      const menuElement: HTMLElement = document.getElementById("#menu-body")!
+      const menuElement: HTMLElement = document.getElementById("menu-body")!
       button?.addEventListener("click", () => {
         isHidden = !isHidden
         if (isHidden) {
@@ -35,7 +35,7 @@ const { isHidden = true } = Astro.props
       {
         LINKS.map((data) =>
           <HeaderLink href=`/${data}`
-                      class="text-lg py-2.5 px-4 text-black no-underline hover:text-gray-600"
+                      class="text-base pt-2.5 px-4 text-neutral-500 hover:text-gray-600 active:text-neutral-900 "
           >{data.toUpperCase()}</HeaderLink>)
       }
     </div>
@@ -51,15 +51,16 @@ const { isHidden = true } = Astro.props
       </button>
 
     </navbar-hamburger>
+    <div id="menu-body" data-hidden={isHidden} class="hidden">
+      <ul class="flex flex-col items-end font-medium mt-4 absolute top-16 right-6 md:right-14">
+        {
+          LINKS.map((data) =>
+            <HeaderLink href=`/${data}`
+                        class="text-base pt-2.5 px-4 text-neutral-500 hover:text-gray-600 active:text-neutral-900"
+            >{data.toUpperCase()}</HeaderLink>)
+        }
+      </ul>
+    </div>
   </nav>
-  <div id="menu-body" data-hidden={isHidden} class="hidden">
-    <ul class="flex flex-col items-end font-medium mt-4">
-      {
-        LINKS.map((data) =>
-          <HeaderLink href=`/${data}`
-                      class="text-lg py-2.5 px-4 text-black decoration-0 hover:text-gray-600"
-          >{data.toUpperCase()}</HeaderLink>)
-      }
-    </ul>
-  </div>
+
 </header>
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
@@ -14,7 +14,9 @@ const isActive = href === pathname || href === "/" + subpath?.[0]
   href={href}
   class:list={[
     className,
-    { "text-lg py-2.5 px-4 text-black font-semibold border-b-4 hover:text-gray-600": isActive },
+    {
+      "text-neutral-900 font-semibold hover:text-gray-600 underline underline-offset-8": isActive,
+    },
   ]}
   {...props}
 >

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -75,16 +75,9 @@
         @apply flex;
         @apply items-center;
         @apply py-8;
-        @apply text-neutral-500;
         @apply uppercase;
     }
 
-    nav a:active {
-        @apply text-neutral-900;
-        @apply border-b-2;
-        @apply border-neutral-900;
-    }
-
     main {
         @apply flex;
         @apply flex-col;