feat: track images with git lfs

src/components/Nav.astro

@@ -3,17 +3,43 @@ import { getLocale } from "astro-i18n-aut";
 import { useTranslations, useTranslatedPath } from "../i18n/utils";
 import Logo from "./Logo.astro";
 
+function isActive(path) {
+  return Astro.url.pathname === path ? "active" : "";
+}
+
 const lang = getLocale(Astro.url);
 const t = useTranslations(lang);
 const translatePath = useTranslatedPath(lang);
+const paths = [
+  {
+    link: translatePath("/"),
+    component: Logo,
+  },
+  {
+    link: translatePath("/blog"),
+    text: t("nav.blog"),
+  },
+  {
+    link: translatePath("/projects"),
+    text: t("nav.projects"),
+  },
+  {
+    link: translatePath("/photos"),
+    text: t("nav.photos"),
+  },
+  {
+    link: translatePath("/videos"),
+    text: t("nav.videos"),
+  },
+];
 ---
 
 <style>
   ul {
     display: flex;
-    gap: 1rem;
     list-style: none;
     padding: 0;
+    height: 50px;
   }
   li {
     display: flex;
@@ -22,26 +48,71 @@ const translatePath = useTranslatedPath(lang);
   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>
-  <li>
-    <a
-      href={translatePath("/")}
-      style="--fill: red; --background-fill: transparent;"
-    >
-      <Logo />
-    </a>
-  </li>
-  <li>
-    <a href={translatePath("/blog")}>
-      {t("nav.blog")}
-    </a>
-  </li>
-  <li>
-    <a href={translatePath("/about")}>
-      {t("nav.about")}
-    </a>
-  </li>
+  {
+    paths.map(({ link, text, component }, index) => (
+      <li
+        class={`${component ? "logo" : ""} ${isActive(link) ? "active" : ""}`}
+      >
+        <a href={link}>{component ? <Logo /> : text}</a>
+      </li>
+    ))
+  }
 </ul>