feat: add some stuff

src/components/Nav.astro

@@ -1,15 +1,14 @@
 ---
-import { getLocale } from "astro-i18n-aut";
 import { useTranslations, useTranslatedPath } from "../i18n/utils";
 import Logo from "./Logo.astro";
 
-function isActive(path) {
+function isActive(path: string) {
   return Astro.url.pathname === path ? "active" : "";
 }
 
-const lang = getLocale(Astro.url);
-const t = useTranslations(lang);
-const translatePath = useTranslatedPath(lang);
+const t = useTranslations(Astro);
+const translatePath = useTranslatedPath(Astro);
+
 const paths = [
   {
     link: translatePath("/"),
@@ -34,85 +33,37 @@ const paths = [
 ];
 ---
 
-<style>
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    height: 50px;
-  }
-  li {
-    display: flex;
-    align-items: center;
-  }
-  a {
-    color: var(--text-color);
-    text-decoration: none;
-    max-height: 100%;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-transform: lowercase;
-  }
-
-  ul > li {
-    border: solid thin var(--outline);
-    border-left: none;
-    position: relative;
-    background: var(--background);
-    flex: 1;
-  }
-
-  ul > li.logo {
-    flex: unset;
-    border: none;
-    padding: 0px;
-    background: none;
-    height: 34px;
-    margin: 8px;
-    margin-left: 0px;
-    --fill: #cb5a5a;
-    --background-fill: none;
-  }
-
-  .logo > a {
-    height: 100%;
-  }
-
-  ul > li > a {
-    padding: 0px;
-  }
-
-  ul > li {
-    display: flex;
-    align-items: center;
-  }
-
-  ul > li.active {
-    background-color: var(--background-color);
-  }
-
-  ul > li:nth-child(2) {
-    border-radius: 0px 0px 0px 10px;
-    border-left: solid thin var(--outline);
-    margin-left: 20px;
-  }
-
-  ul > li:last-child {
-    border-radius: 0px 10px 0px 0px;
-  }
-</style>
-
-<ul>
+<ul class="flex my-4 divide-x divide-x-1 divide-x-neutral">
   {
-    paths.map(({ link, text, component }, index) => (
+    paths.map(({ link, text, component }, i) => (
       <li
-        class={`${component ? "logo" : ""} ${isActive(link) ? "active" : ""}`}
+        class={`
+          flex items-center flex-1 border-t-1 border-b-1 border-neutral
+          ${isActive(link) ? "bg-light" : "bg"}
+          ${i === 1 ? "rounded-bl-md" : ""}
+          ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
+          ${component ? "border-none bg-transparent my-2 mr-4 logo" : ""} 
+        `}
       >
-        <a href={link}>{component ? <Logo /> : text}</a>
+        <a
+          class="text-neutral w-full h-full flex items-center justify-center lowercase"
+          href={link}
+          data-astro-prefetch
+        >
+          {component ? <Logo /> : text}
+        </a>
       </li>
     ))
   }
 </ul>
+
+<style>
+  ul > li.logo {
+    background: none;
+    flex: 0;
+    height: 34px;
+    margin-left: 0px;
+    --fill: #cb5a5a;
+    --background-fill: none;
+  }
+</style>