💄 chore: better styling in navigation bar and footer

Author: retrozinndev

src/components/Footer.astro

@@ -1,13 +1,17 @@
 ---
+import { FaHeart } from "react-icons/fa6";
 import { useTranslations } from "../i18n/utils";
+import LinkButton from "./LinkButton.astro";
 
 const lang = (Astro.params.lang || "en") as never;
 const tr = useTranslations(lang);
 ---
 
 <footer class="footer">
-    { tr("footer.txt1") } <i class="nf nf-fa-heart"></i> { tr("footer.txt2") }
-     · <a href="https://github.com/retrozinndev/retrozinn.dev">{ tr("footer.txt3") }</a>
+    { tr("footer.txt1") } <FaHeart size={10} /> { tr("footer.txt2") }
+    · <LinkButton external={true} spacing={false} href="https://github.com/retrozinndev/retrozinn.dev">
+    { tr("footer.txt3") }
+    </a>
 </footer>
 
 <style lang="scss">

src/components/LinkButton.astro

@@ -29,13 +29,12 @@ const { href, external, title, showIcon = true, spacing = true } = Astro.props;
 
     a {
         display: inline-flex;
-        font-size: 1.04em;
         font-weight: 600;
-        color: inherit;
 
         box-shadow: inset 0 0 0 1px colors.$accent-color-dark;
         border-radius: 12px;
         text-decoration: none;
+        text-underline-offset: 2px;
         transition: 150ms linear;
 
         &.space {

src/components/Navigation.tsx

@@ -1,12 +1,12 @@
 import "../styles/components/Navigation.scss";
 
 import { useEffect, useState, type ReactElement } from "react";
-
 import { useTranslations } from "../i18n/utils";
 import { defaultLang } from "../i18n/ui";
+
 import ToggleThemeButton from "./ToggleThemeButton";
 import LanguageSelector from "./LanguageSelector";
-import { AstroJSX } from "astro/jsx-runtime";
+
 
 interface Props {
     lang?: string;
@@ -63,6 +63,7 @@ export default function(props: Props): ReactElement {
         window.addEventListener("scroll", handleScroll);
     });
 
+
     return <div className="navigation-bar">
         <nav className={`navigation ${scrolled ? "scrolled" : ""}`} id="navbar" 
              aria-label="Navigation Bar" onScroll={() => {
@@ -75,25 +76,34 @@ export default function(props: Props): ReactElement {
             }}>
 
             <div className="left-side"> {
-                showProfilePic ? 
-                    <a rel="author" href="https://github.com/retrozinndev">
-                        <img className="profile-pic" 
-                               src="https://1.gravatar.com/avatar/093b64d2016ab8acce8a2fe73cb719f527790d4ecec7f5837db8d46519b38bf8?size=80"
-                               width={32} height={32} alt={ tr("nav.home") } loading="lazy" />
-                    </a>
-                : null
+                showProfilePic ? <a rel="author" href="https://github.com/retrozinndev">
+                    <img className="profile-pic" 
+                      src="https://1.gravatar.com/avatar/093b64d2016ab8acce8a2fe73cb719f527790d4ecec7f5837db8d46519b38bf8?size=80"
+                      width={32} height={32} alt={ tr("nav.home") } loading="lazy" 
+                    />
+                </a> : null
             } </div>
 
             <div className="items" > {
-                    pages.map((page, i) => (
-                        <div className="item" key={i}>
-                            <a href={`${page.hasI18n ? `/${lang}` : ""}${page.href}`} 
-                               target="_self" title={ tr(`nav.${page.name}_tooltip`) }>{ 
-
+                    pages.map((page, i) => 
+                        <div className={`item`} key={i} onLoadStart={e => {
+                            const currentPage = (page.hasI18n ? 
+                                window.location.pathname.replace(/^\/.*(\/)/, "/") 
+                            : window.location.pathname).trimEnd().replace(/\/$/, "").concat(
+                                window.location.hash.startsWith('#') ?
+                                    window.location.hash
+                                : window.location.hash.replace(/^./, "\#&")
+                            ).trim();
+
+                            if(currentPage === page.href.toString()) 
+                                (e.target as HTMLDivElement).classList.add("current");
+                        }}>
+                            <a href={`${page.hasI18n ? `/${lang}` : ""}${page.href}`} target="_self" 
+                              title={ tr(`nav.${page.name}_tooltip`) }> {
                                 tr(`nav.${page.name}`)
                             } </a>
                         </div>
-                    ))
+                    )
                 }
 
                 <div className="item" key={pages.length}>

src/styles/components/Navigation.scss

@@ -45,27 +45,24 @@ $padding-around: 2px;
     flex-wrap: wrap;
     justify-content: center;
 
-    & > .item {
+    & > .item a {
+      -webkit-tap-highlight-color: transparent;
+      text-decoration: none;
       margin: 2px;
       padding: 6px 8px;
       border-radius: 12px;
       transition: 200ms ease-in-out;
-
-      &, & * {
-        -webkit-tap-highlight-color: transparent;
-      }
-
-      & *:is(a) {
-        all: unset;
-        -webkit-tap-highlight-color: unset;
-        color: inherit;
-        font-weight: 600;
-        font-size: 1.05em;
-      }
-
-      &:has(> a):hover, 
-      &:has(> a).current {
-        background: colors.$accent-color-dark;
+      color: inherit;
+      font-weight: 600;
+      font-size: 1.05em;
+      text-decoration-line: underline;
+      text-decoration-thickness: 2px;
+      text-decoration-color: transparent;
+      text-underline-offset: 3px;
+
+      &:hover, 
+      &.current {
+        text-decoration-color: inherit;
         cursor: pointer;
       }
     }