Optimize navigation links

src/lib/components/LeftSidebar.svelte

@@ -8,9 +8,11 @@
   type Props = {
     mode: "simple" | "full";
     activeRoom?: string;
+    activeResource?: string;
+    contactsActive?: boolean;
   };
 
-  let { mode, activeRoom }: Props = $props();
+  let { mode, activeRoom, activeResource, contactsActive }: Props = $props();
 
   // The description of the room currently being viewed (full mode).
   const activeAbout = $derived(
@@ -26,7 +28,7 @@
       href="/"
       class="flex items-center gap-2 py-1 hover:bg-neutral-100 text-neutral-700"
     >
-      Home
+      {mode === "simple" ? "Discussions" : "Home"}
     </a>
 
     {#if mode === "simple"}
@@ -74,13 +76,17 @@
       {#each resourcesStore.list as r (r.slug)}
         <a
           href="/resource/{r.slug}"
-          class="block py-1 text-neutral-500 hover:text-neutral-900"
+          aria-current={activeResource === r.slug ? "page" : undefined}
+          class="block py-1 hover:text-neutral-900
+            {activeResource === r.slug ? 'text-brand' : 'text-neutral-500'}"
           >{r.title}</a
         >
       {/each}
       <a
         href="/contacts"
-        class="block py-1 text-neutral-500 hover:text-neutral-900">Contacts</a
+        aria-current={contactsActive ? "page" : undefined}
+        class="block py-1 hover:text-neutral-900
+          {contactsActive ? 'text-brand' : 'text-neutral-500'}">Contacts</a
       >
     </nav>
   </div>

src/lib/components/MobileMenu.svelte

@@ -10,9 +10,18 @@
     onClose: () => void;
     mode: "simple" | "full";
     activeRoom?: string;
+    activeResource?: string;
+    contactsActive?: boolean;
   };
 
-  let { open, onClose, mode, activeRoom }: Props = $props();
+  let {
+    open,
+    onClose,
+    mode,
+    activeRoom,
+    activeResource,
+    contactsActive,
+  }: Props = $props();
 
   function onLogin() {
     onClose();
@@ -110,7 +119,8 @@
         <a
           href="/"
           onclick={onClose}
-          class="py-2 text-xl text-neutral-700 hover:text-brand">Home</a
+          class="py-2 text-xl text-neutral-700 hover:text-brand"
+          >{mode === "simple" ? "Discussions" : "Home"}</a
         >
 
         {#if mode === "full"}
@@ -146,14 +156,18 @@
             <a
               href="/resource/{r.slug}"
               onclick={onClose}
-              class="block py-1.5 text-xl text-neutral-700 hover:text-brand"
+              aria-current={activeResource === r.slug ? "page" : undefined}
+              class="block py-1.5 text-xl hover:text-brand
+                {activeResource === r.slug ? 'text-brand' : 'text-neutral-700'}"
               >{r.title}</a
             >
           {/each}
           <a
             href="/contacts"
             onclick={onClose}
-            class="block py-1.5 text-lg text-neutral-700 hover:text-brand"
+            aria-current={contactsActive ? "page" : undefined}
+            class="block py-1.5 text-lg hover:text-brand
+              {contactsActive ? 'text-brand' : 'text-neutral-700'}"
             >Contacts</a
           >
         </nav>

src/lib/components/Navbar.svelte

@@ -15,7 +15,11 @@
 <header
   class="sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-2 bg-neutral-100 px-4 md:static md:px-8"
 >
-  <div class="flex min-w-0 items-center gap-2">
+  <a
+    href="/"
+    class="flex min-w-0 items-center gap-2 hover:opacity-90"
+    aria-label="{name} — home"
+  >
     {#if groupStore.data?.picture}
       <img
         src={groupStore.data.picture}
@@ -32,7 +36,7 @@
     <span class="truncate text-2xl font-medium text-neutral-900 md:text-[1.7rem]"
       >{name}</span
     >
-  </div>
+  </a>
   <button
     type="button"
     onclick={onMenuToggle}