From 4089a14bb82c8755c719d401b1d86fc00a59347a Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Tue, 12 May 2026 00:41:59 +0200
Subject: [PATCH] feat(appshell): refine section label styling for sidebar nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Section headings ("Beheer" / organisation name, "Platform") were
already uppercase + muted but read as bold paragraph dividers more
than as quiet group markers. Tighten letter-spacing, drop weight
from semibold to medium, lighten the color one step (surface-500 →
surface-400), and shrink text to 11px so the headings recede and
let the nav items themselves carry the visual weight.

Spacing nudged from mt-4/mb-2/px-2 → mt-6/mb-1/px-3: more breathing
room above each group, less below (the items already have py-2 on
top), and the heading left-edge now lines up with the icons of the
nav items beneath it (both at px-3).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/app/src/layouts/components/AppShell.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/layouts/components/AppShell.vue b/apps/app/src/layouts/components/AppShell.vue
index 6ca7f231..20ad13e5 100644
--- a/apps/app/src/layouts/components/AppShell.vue
+++ b/apps/app/src/layouts/components/AppShell.vue
@@ -103,7 +103,7 @@ function toggleUserMenu(event: Event) {
         >
           <div
             v-if="isHeading(item)"
-            class="mt-4 mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-surface-500"
+            class="mt-6 mb-1 px-3 text-[11px] font-medium uppercase tracking-widest text-surface-400"
           >
             {{ item.heading }}
           </div>
@@ -140,7 +140,7 @@ function toggleUserMenu(event: Event) {
         >
           <div
             v-if="isHeading(item)"
-            class="mt-4 mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-surface-500"
+            class="mt-6 mb-1 px-3 text-[11px] font-medium uppercase tracking-widest text-surface-400"
           >
             {{ item.heading }}
           </div>