From e0a5a41a6bf240c7b1e356bb23b3fb208b2aff82 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 17 Aug 2026 10:14:45 +0200
Subject: [PATCH] feat(start): hamburger toggles start page sidebar, settings
 accessible from start

---
 frontend/src/pages/StartPage.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/StartPage.tsx b/frontend/src/pages/StartPage.tsx
index 56ccdd5..98aead4 100644
--- a/frontend/src/pages/StartPage.tsx
+++ b/frontend/src/pages/StartPage.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '@/store/authStore';
+import { useUIStore } from '@/store/uiStore';
 import { Settings, HelpCircle, LayoutGrid, ArrowRight, Plus } from 'lucide-react';
 
 // Workspace tile definition
@@ -34,6 +35,7 @@ export function StartPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const user = useAuthStore((state) => state.user);
+  const sidebarOpen = useUIStore((state) => state.sidebarOpen);
 
   const menuItems = [
     { id: 'workspaces', label: 'Workspaces', icon: <LayoutGrid className="w-4 h-4" />, active: true },
@@ -43,12 +45,12 @@ export function StartPage() {
 
   return (
     <div className="flex h-full overflow-hidden bg-secondary-50">
-      {/* Left column — menu */}
-      <aside className="w-56 bg-white border-r border-secondary-200 flex flex-col flex-shrink-0">
-        <div className="h-[58px] flex items-center px-4 border-b border-secondary-200">
+      {/* Left column — menu (toggleable via hamburger) */}
+      <aside className={`${sidebarOpen ? 'w-56' : 'w-0'} bg-white border-r border-secondary-200 flex flex-col flex-shrink-0 transition-all duration-200 overflow-hidden`}>
+        <div className="h-[58px] flex items-center px-4 border-b border-secondary-200 w-56 flex-shrink-0">
           <span className="text-xl font-bold text-secondary-900">leocrm</span>
         </div>
-        <nav className="flex-1 overflow-y-auto py-4">
+        <nav className="flex-1 overflow-y-auto py-4 w-56 flex-shrink-0">
           <ul className="space-y-1 px-2">
             {menuItems.map((item) => (
               <li key={item.id}>
@@ -68,7 +70,7 @@ export function StartPage() {
           </ul>
         </nav>
         {/* User info at bottom */}
-        <div className="px-4 py-3 border-t border-secondary-200">
+        <div className="px-4 py-3 border-t border-secondary-200 w-56 flex-shrink-0">
           <p className="text-xs text-secondary-500 truncate">{user?.email}</p>
         </div>
       </aside>