Underline navigation on hover

morr0ne · May 19, 2024 · 36bd20f · 36bd20f
1 parent 41bc2bb
commit 36bd20f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 21 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,15 +1,15 @@
 ---
-// import HeaderLink from './HeaderLink.astro';
+import HeaderLink from './HeaderLink.astro';
 // import { SITE_TITLE } from '@consts';
 // import { CakeSlice } from 'lucide-astro';
 ---
 
 <header class="flex flex-row text-xl">
   <nav class="my-4">
-    <a href="/">/home</a>
-    <a href="/posts">/posts</a>
-    <a href="/projects">/projects</a>
-    <a href="/about">/about</a>
+    <HeaderLink href="/">/home</HeaderLink>
+    <HeaderLink href="/posts">/posts</HeaderLink>
+    <HeaderLink href="/projects">/projects</HeaderLink>
+    <HeaderLink href="/about">/about</HeaderLink>
     <!-- <a href="https://cake.morrone.dev" target="_blank">
       <CakeSlice class="inline-flex" size="18"/>
     </a> -->

diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
@@ -3,23 +3,9 @@ import type { HTMLAttributes } from 'astro/types';
 
 type Props = HTMLAttributes<'a'>;
 
-const { href, class: className, ...props } = Astro.props;
-
-const { pathname } = Astro.url;
-const subpath = pathname.match(/[^\/]+/g);
-const isActive = href === pathname || href === '/' + subpath?.[0];
+const { href } = Astro.props;
 ---
 
-<a href={href} class:list={[className, { active: isActive }]} {...props}>
+<a href={href} class="hover:underline ml-2 inline-block">
   <slot />
 </a>
-<style>
-  a {
-    display: inline-block;
-    text-decoration: none;
-  }
-  a.active {
-    font-weight: bolder;
-    text-decoration: underline;
-  }
-</style>