From 514c2b631f975745bada80c8e3bed45d4b2bbe29 Mon Sep 17 00:00:00 2001
From: Christoph Stade <59069119+chris234567@users.noreply.github.com>
Date: Sat, 23 Aug 2025 17:12:38 -0500
Subject: [PATCH] Add first occurrence highlighting to location dropdown

---
 src/lib/Nav.svelte | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index da840c29..c78391f9 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -41,6 +41,25 @@
   beforeNavigate(close)
 
   const crawl_links = nav.flatMap((itm) => itm?.subNav ?? [])
+
+  function markFirstLetters(
+  subNav: { title: string; url: string; spanCols?: boolean; lightFont?: boolean }[]
+) {
+  const seen = new Set<string>()
+  return subNav.map(item => {
+    const firstChar = item.title[0]
+    const upper = firstChar.toUpperCase()
+    const isFirst = !seen.has(upper)
+    seen.add(upper)
+    return {
+      ...item,
+      firstChar,
+      rest: item.title.slice(1),
+      highlight: isFirst
+    }
+  })
+}
+
 </script>
 
 <svelte:window
@@ -107,6 +126,19 @@
               4
             )}, 1fr);"
           >
+          {#if title === 'Standorte'}
+            {#each markFirstLetters(subNav) as { url, spanCols, lightFont, firstChar, rest, highlight }}
+              <li class:spanCols class:lightFont>
+                <a on:click={close} aria-current={isCurrent(url)} href={url}>
+                  {#if highlight}
+                    <span class="highlight">{firstChar}</span>{rest}
+                  {:else}
+                    {firstChar}{rest}
+                  {/if}
+                </a>
+              </li>
+            {/each}
+          {:else}
             {#each subNav as { title, url, spanCols, lightFont }}
               <li class:spanCols class:lightFont>
                 <a on:click={close} aria-current={isCurrent(url)} href={url}>
@@ -114,6 +146,7 @@
                 </a>
               </li>
             {/each}
+          {/if}
           </ul>
         {/if}
       </li>
@@ -229,4 +262,8 @@
   nav.desktop button:first-child {
     display: none;
   }
+  .highlight {
+    color: var(--green);
+    font-weight: bold;
+  }
 </style>