web: start: serparator for menu

Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>

web/components/side-nav/side-nav.css

@@ -38,3 +38,18 @@
 }
 
 .item:hover .icon { color: #cdd6f4; }
+
+.section-header {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #45475a;
+  padding: 14px 12px 4px;
+}
+
+.separator {
+  height: 1px;
+  background: #313244;
+  margin: 6px 4px;
+}

web/components/side-nav/side-nav.js

@@ -76,6 +76,14 @@ class SideNav extends HTMLElement {
     const current = this.#currentHref()
 
     const links = this.#items.map(item => {
+      if (item.type === 'separator') {
+        return `<div class="separator"></div>`
+      }
+      if (item.type === 'section') {
+        return `<div class="section-header">${item.label ?? ''}</div>`
+      }
+      // Skip malformed entries (missing href or label)
+      if (!item.href || !item.label) return ''
       const active = item.href === current
       return `<a href="${item.href}" class="item ${active ? 'active' : ''}">
         <span class="icon">${resolveIcon(item.icon)}</span>