feat: add ci

src/components/Nav.astro

@@ -1,6 +1,7 @@
 ---
 import { useTranslations, useTranslatedPath } from "../i18n/utils";
 import Logo from "./Logo.astro";
+import ToggleTheme from "@components/ThemeToggle.svelte";
 
 function isActive(path: string) {
   return Astro.url.pathname === path ? "active" : "";
@@ -10,10 +11,6 @@ const t = useTranslations(Astro);
 const translatePath = useTranslatedPath(Astro);
 
 const paths = [
-  {
-    link: translatePath("/"),
-    component: Logo,
-  },
   {
     link: translatePath("/blog"),
     text: t("nav.blog"),
@@ -33,16 +30,26 @@ const paths = [
 ];
 ---
 
-<ul class="flex my-4 divide-x divide-x-1 divide-x-neutral">
+<ul class="flex my-4 h-12">
+  <li><a href="#main-content" class="skip-link">Skip to main content</a></li>
+  <li
+    class="border-none bg-transparent my-2 mr-4 logo grid place-content-center"
+  >
+    <a
+      href={translatePath("/")}
+      class="text-neutral h-9 flex items-center justify-center lowercase"
+    >
+      <Logo />
+    </a>
+  </li>
   {
-    paths.map(({ link, text, component }, i) => (
+    paths.map(({ link, text }, i) => (
       <li
         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 === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
           ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
-          ${component ? "border-none bg-transparent my-2 mr-4 logo" : ""} 
         `}
       >
         <a
@@ -50,20 +57,40 @@ const paths = [
           href={link}
           data-astro-prefetch
         >
-          {component ? <Logo /> : text}
+          {text}
         </a>
       </li>
     ))
   }
+  <li class="w-8 h-6 flex justify-right items-center h-full">
+    <ToggleTheme client:load />
+  </li>
 </ul>
 
 <style>
   ul > li.logo {
     background: none;
     flex: 0;
-    height: 34px;
     margin-left: 0px;
     --fill: #cb5a5a;
     --background-fill: none;
   }
+  /* Visually hide the jump to content button while making it accessible */
+  .skip-link {
+    position: absolute;
+    left: -9999px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  /* Make the jump to content button visible when focused */
+  .skip-link:focus {
+    position: absolute;
+    left: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
 </style>