From 00c2cfe2c984344ce3f9556e0cbe30d497119271 Mon Sep 17 00:00:00 2001
From: Schalli <kschaller@ctl.de>
Date: Tue, 29 Sep 2026 11:17:47 +0200
Subject: [PATCH] style(web): eingeklappte Seitenleiste mit groesseren
 Symbolen, dichter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Kacheln 24 statt 20 px, Navigationssymbole 22 statt 20 px, Eintraege
34 px hoch mit 1 px Abstand (vorher 36 + 2 px) — Nutzerwunsch 29.09.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                               |  4 ++++
 apps/web/src/components/layout/sidebar.tsx | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ded69e6..68e7e5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ Diese Liste beschreibt in einfachen Worten, was sich von Version zu Version an T
 
 ## Unveröffentlicht
 
+### Geändert
+
+- Seitenleiste: Ist sie eingeklappt, sind die Symbole etwas größer und stehen etwas enger beieinander.
+
 ## 1.6.0 – 2026-09-29
 
 ### Neu
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 4ce3a0e..c98d35f 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -116,6 +116,11 @@ export function Sidebar() {
   const moduleItemClass = (active: boolean) =>
     itemClass(active).replace('h-9', 'h-8').replace('gap-3', 'gap-2.5').replace('text-sm', 'text-[13px]');
 
+  // Eingeklappt (Nutzerwunsch 29.09.): Symbole etwas groesser (Kachel 24 statt
+  // 20 px, Navigationssymbole 22 statt 20 px), Eintraege dichter — 34 px hoch
+  // mit 1 px Abstand statt 36 + 2 px.
+  const collapsedItemClass = (active: boolean) => itemClass(active).replace('h-9', 'h-[34px]');
+
   const fetchActiveModules = useCallback(async () => {
     const loadBuiltIn = async () => {
       try {
@@ -203,7 +208,7 @@ export function Sidebar() {
   }, [entries, searchQuery, categoryLabel]);
 
   const navIcon = (children: React.ReactNode) => (
-    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width={isCollapsed ? 22 : 20} height={isCollapsed ? 22 : 20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
       {children}
     </svg>
   );
@@ -211,9 +216,9 @@ export function Sidebar() {
   const sidebarContent = (
     <div className="flex h-full flex-col bg-sidebar">
       <nav className={`flex-1 overflow-y-auto py-3 ${isCollapsed ? 'px-2' : 'px-3'}`}>
-        <ul className="flex flex-col gap-0.5">
+        <ul className={`flex flex-col ${isCollapsed ? 'gap-px' : 'gap-0.5'}`}>
           <li>
-            <Link href="/" className={linkClass('/')} aria-label={t('dashboard')} title={isCollapsed ? t('dashboard') : undefined}>
+            <Link href="/" className={isCollapsed ? collapsedItemClass(isActive('/')) : linkClass('/')} aria-label={t('dashboard')} title={isCollapsed ? t('dashboard') : undefined}>
               {isActive('/') && <SelectionPill />}
               {navIcon(
                 <>
@@ -227,7 +232,7 @@ export function Sidebar() {
             </Link>
           </li>
           <li>
-            <Link href="/marketplace" className={linkClass('/marketplace')} aria-label={t('marketplace')} title={isCollapsed ? t('marketplace') : undefined}>
+            <Link href="/marketplace" className={isCollapsed ? collapsedItemClass(isActive('/marketplace')) : linkClass('/marketplace')} aria-label={t('marketplace')} title={isCollapsed ? t('marketplace') : undefined}>
               {isActive('/marketplace') && <SelectionPill />}
               {navIcon(
                 <>
@@ -242,14 +247,14 @@ export function Sidebar() {
 
         {/* Eingeklappt: nur die Modul-Kacheln untereinander (Name als Tooltip). */}
         {isCollapsed && entries.length > 0 && (
-          <ul className="mt-3 flex flex-col gap-0.5 border-t border-sidebar-border pt-3">
+          <ul className="mt-3 flex flex-col gap-px border-t border-sidebar-border pt-3">
             {entries.map((entry) => {
               const active = isEntryActive(entry);
               return (
                 <li key={entry.key}>
-                  <Link href={entry.href} className={itemClass(active)} aria-label={entry.name} title={entry.name}>
+                  <Link href={entry.href} className={collapsedItemClass(active)} aria-label={entry.name} title={entry.name}>
                     {active && <SelectionPill />}
-                    <ModuleTile slug={entry.tileSlug} size={20} tone={active ? 'accent' : 'neutral'} />
+                    <ModuleTile slug={entry.tileSlug} size={24} tone={active ? 'accent' : 'neutral'} />
                   </Link>
                 </li>
               );