Clearer site menu

src/components/MainMenu/Links.astro

@@ -1,23 +1,38 @@
 ---
-type Link = { text: string, href: string, active?: (pathname: string) => boolean }
+type Link = {
+  text: string;
+  href: string;
+  active?: (pathname: string) => boolean;
+};
 const links: Link[] = [
   { text: "Hem", href: "/", active: (pathname) => pathname === "/" },
-  { text: "För Vuxna", href: "/for-vuxna" },
-  { text: "Engagera dig", href: "/engagera-dig" },
+  { text: "Föräldrar", href: "/for-vuxna" },
+  { text: "Volontärer", href: "/engagera-dig" },
   { text: "Vanliga frågor", href: "/faq" },
-]
+];
 
 const active = (link: Link) => {
-  const pathname = new URL(Astro.request.url).pathname
-  return link.active?.(pathname) ?? pathname.startsWith(link.href)
-}
+  const pathname = new URL(Astro.request.url).pathname;
+  return link.active?.(pathname) ?? pathname.startsWith(link.href);
+};
 ---
-<ul class="flex flex-col font-days-one gap-2 justify-end sm:flex-row text-normal" class:list={Astro.props.class}>
-  {links.map((link) =>
-    <li class="flex uppercase group" data-active={active(link)}>
-      <a href={link.href} class="relative flex text-white border-2 px-4 py-2 w-full items-center justify-center group-data-[active]:bg-persian-rose-500">
-        <span class="text-white relative inline-flex text-center">{link.text}</span>
-      </a>
-    </li>
-  )}
+
+<ul
+  class="flex flex-col font-days-one gap-2 justify-end sm:flex-row text-normal"
+  class:list={Astro.props.class}
+>
+  {
+    links.map((link) => (
+      <li class="flex uppercase group" data-active={active(link)}>
+        <a
+          href={link.href}
+          class="relative flex text-white border-2 px-4 py-2 w-full items-center justify-center group-data-[active]:bg-persian-rose-500"
+        >
+          <span class="text-white relative inline-flex text-center">
+            {link.text}
+          </span>
+        </a>
+      </li>
+    ))
+  }
 </ul>