From 7b4a45df49103827736460c024d3e4e69058be0f Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Sun, 28 Jun 2026 17:55:26 +0200
Subject: [PATCH] fix: mobile sidebar slide-in overlay with hamburger and panel
 toggle buttons

- LeftSidebar/RightSidebar: added className prop for 'open' class
- Topbar: wired hamburger onClick + added mobile-drawer-toggle button for right panel
- App.tsx: added SettingsModal import/state/render, passed className props to sidebars
- styles.css: mobile sidebars now fixed slide-in overlays (translateX) instead of display:none
- ui.types.ts: added className to RightSidebarProps, onOpenLeftDrawer/onOpenRightDrawer to TopbarProps
- Tested at 390px viewport: both sidebars slide in correctly, transform verified via DOM
---
 frontend/src/App.tsx                     |  8 ++++++
 frontend/src/components/LeftSidebar.tsx  |  4 +--
 frontend/src/components/RightSidebar.tsx |  3 +-
 frontend/src/components/Topbar.tsx       |  7 +++--
 frontend/src/styles.css                  | 35 ++++++++++++++++++++++--
 frontend/src/types/ui.types.ts           |  4 +++
 6 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f0ea0ab..f354e8b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,6 +18,7 @@ import StatusBar from './components/StatusBar';
 import MobileDrawers from './components/MobileDrawers';
 import BackgroundImport from './components/BackgroundImport';
 import HistoryPanel from './components/HistoryPanel';
+import SettingsModal from './components/SettingsModal';
 import { BackgroundService, type BackgroundConfig } from './services/backgroundService';
 import { HistoryManager, type CADStateSnapshot, type HistoryEntry } from './history';
 import { getCommandRegistry } from './services/commandRegistry';
@@ -146,6 +147,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
   // Mobile drawers
   const [mobileLeftOpen, setMobileLeftOpen] = useState(false);
   const [mobileRightOpen, setMobileRightOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const [activeDrawerTab, setActiveDrawerTab] = useState<DrawerTab>('tool');
 
   // Background
@@ -936,6 +938,9 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onRedo={handleRedo}
         onThemeToggle={handleThemeToggle}
         theme={theme}
+        onOpenSettings={() => setSettingsOpen(true)}
+        onOpenLeftDrawer={() => setMobileLeftOpen(true)}
+        onOpenRightDrawer={() => setMobileRightOpen(true)}
       />
       <RibbonBar
         activeTab={activeRibbonTab}
@@ -948,6 +953,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           onToolChange={handleToolChange}
           selectedTemplate={selectedTemplate}
           onTemplateSelect={handleTemplateSelect}
+          className={mobileLeftOpen ? 'open' : ''}
         />
         <CanvasArea
           cursorPos={cursorPos}
@@ -1010,6 +1016,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           onKISend={handleKISend}
           onKISuggestionClick={handleSuggestionClick}
           kiLoading={kiLoading}
+          className={mobileRightOpen ? 'open' : ''}
         />
       </div>
       <CommandLine
@@ -1040,6 +1047,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onCloseRight={() => setMobileRightOpen(false)}
         onRightTabChange={setActiveDrawerTab}
       />
+      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
       <BackgroundImport
         open={bgImportOpen}
         onClose={() => setBgImportOpen(false)}
diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx
index a0e9d9a..4963703 100644
--- a/frontend/src/components/LeftSidebar.tsx
+++ b/frontend/src/components/LeftSidebar.tsx
@@ -56,9 +56,9 @@ const sections: Array<{ label: string; tools: ToolDef[] }> = [
   { label: 'Bestuhlung', tools: sectionBestuhlung },
 ];
 
-const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, selectedTemplate, onTemplateSelect, onCollapse }) => {
+const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, selectedTemplate, onTemplateSelect, onCollapse, className }) => {
   return (
-    <aside className="leftbar" aria-label="Werkzeugpalette">
+    <aside className={`leftbar${className ? ' ' + className : ''}`} aria-label="Werkzeugpalette">
       <div className="leftbar-header">
         <span className="leftbar-title">Werkzeuge</span>
         <button className="leftbar-toggle" aria-label="Linke Leiste ausblenden" onClick={onCollapse}>
diff --git a/frontend/src/components/RightSidebar.tsx b/frontend/src/components/RightSidebar.tsx
index 9126604..1ddd932 100644
--- a/frontend/src/components/RightSidebar.tsx
+++ b/frontend/src/components/RightSidebar.tsx
@@ -14,6 +14,7 @@ const tabs: Array<{ id: RightPanel; label: string; svg: React.ReactNode; badge?:
 
 const RightSidebar: React.FC<RightSidebarProps> = ({
   activePanel, onPanelChange, selectedElement, layers, blocks,
+  className,
   activeLayerId, onSelectLayer, onAddLayer, onToggleLayer,
   onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock,
   onReorder, onAddSubLayer,
@@ -24,7 +25,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
   kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
 }) => {
   return (
-    <aside className="rightbar" aria-label="Eigenschaften-Panels">
+    <aside className={`rightbar${className ? ' ' + className : ''}`} aria-label="Eigenschaften-Panels">
       <div className="rightbar-tabs" role="tablist">
         {tabs.map((tab) => (
           <button
diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
index 1df92a7..f651235 100644
--- a/frontend/src/components/Topbar.tsx
+++ b/frontend/src/components/Topbar.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import type { TopbarProps } from '../types/ui.types';
 
-const Topbar: React.FC<TopbarProps> = ({ projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme, onOpenSettings }) => {
+const Topbar: React.FC<TopbarProps> = ({ projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme, onOpenSettings, onOpenLeftDrawer, onOpenRightDrawer }) => {
   return (
     <header className="topbar" role="banner">
       <div className="topbar-left">
-        <button className="hamburger-btn" aria-label="Werkzeuge öffnen">
+        <button className="hamburger-btn" aria-label="Werkzeuge öffnen" onClick={onOpenLeftDrawer}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
         </button>
         <div className="app-logo" aria-hidden="true">
@@ -46,6 +46,9 @@ const Topbar: React.FC<TopbarProps> = ({ projectName, savedStatus, onUndo, onRed
           <option value="de">DE</option>
           <option value="en">EN</option>
         </select>
+        <button className="icon-btn-top mobile-drawer-toggle" aria-label="Panel öffnen" title="Panel öffnen" onClick={onOpenRightDrawer}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
+        </button>
         <button className="icon-btn-top" aria-label="Benachrichtigungen" title="Benachrichtigungen">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
         </button>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index bf75f21..15b204f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -318,6 +318,7 @@ a:hover { text-decoration: underline; }
 }
 .hamburger-btn:hover { background: var(--color-surface-2); }
 .hamburger-btn svg { width: 20px; height: 20px; }
+.mobile-drawer-toggle { display: none; }
 
 /* Right vertical tab bar (mobile only, HIDDEN by default on desktop) */
 .right-tab-bar { display: none; }
@@ -1195,7 +1196,8 @@ a:hover { text-decoration: underline; }
 
   /* Topbar: hamburger left, project center, notifications right */
   .hamburger-btn { display: flex; }
-  .app-name, .saved-badge, .lang-select, .topbar > .topbar-right > *:not(.hamburger-btn):not(.icon-btn-top[aria-label="Benachrichtigungen"]):not(.avatar) {
+  .mobile-drawer-toggle { display: flex; }
+  .app-name, .saved-badge, .lang-select, .topbar > .topbar-right > *:not(.hamburger-btn):not(.mobile-drawer-toggle):not(.icon-btn-top[aria-label="Benachrichtigungen"]):not(.avatar) {
     display: none;
   }
   .topbar { padding: 0 8px; gap: 6px; }
@@ -1236,9 +1238,36 @@ a:hover { text-decoration: underline; }
 
   /* Main area: NO left/right desktop columns, canvas + right tab bar */
   .app-body {
-    grid-template-columns: 1fr var(--mobile-right-tab-w);
+    grid-template-columns: 1fr;
   }
-  .leftbar, .rightbar { display: none; }
+  /* Sidebars become slide-in overlays on mobile */
+  .leftbar, .rightbar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    width: var(--drawer-w);
+    max-width: 88vw;
+    background: var(--color-surface);
+    box-shadow: var(--shadow-drawer);
+    transition: transform var(--t-drawer);
+    will-change: transform;
+  }
+  .leftbar {
+    left: 0;
+    transform: translateX(-100%);
+    border-right: 1px solid var(--color-border);
+  }
+  .rightbar {
+    right: 0;
+    transform: translateX(100%);
+    border-left: 1px solid var(--color-border);
+    width: var(--drawer-w);
+  }
+  .leftbar.open { transform: translateX(0); }
+  .rightbar.open { transform: translateX(0); }
 
   /* Right tab bar (vertical icon bar, ALWAYS visible on mobile) */
   .right-tab-bar {
diff --git a/frontend/src/types/ui.types.ts b/frontend/src/types/ui.types.ts
index 01727f0..38d4cfd 100644
--- a/frontend/src/types/ui.types.ts
+++ b/frontend/src/types/ui.types.ts
@@ -65,6 +65,8 @@ export interface TopbarProps {
   onThemeToggle: () => void;
   theme: Theme;
   onOpenSettings?: () => void;
+  onOpenLeftDrawer?: () => void;
+  onOpenRightDrawer?: () => void;
 }
 
 export interface SettingsModalProps {
@@ -84,6 +86,7 @@ export interface LeftSidebarProps {
   selectedTemplate?: string | null;
   onTemplateSelect?: (templateName: string | null) => void;
   onCollapse?: () => void;
+  className?: string;
 }
 
 export interface CanvasAreaProps {
@@ -155,6 +158,7 @@ export interface RightSidebarProps {
   onKISuggestionClick?: (suggestion: KISuggestion) => void;
   kiLoading?: boolean;
   onUpdateElement?: (el: CADElement) => void;
+  className?: string;
 }
 
 export interface PropertiesPanelProps {