From 85bb238e734283480393e3eecf5c8269a65fc563 Mon Sep 17 00:00:00 2001
From: A0 Orchestrator <orchestrator@media-on.de>
Date: Fri, 3 Jul 2026 23:30:15 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20mobile=20dashboard=20=E2=80=94=20slide-?=
 =?UTF-8?q?in=20treeview=20+=20info=20panel=20+=20hamburger=20+=20scrim?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Dashboard.tsx | 15 +++++-
 frontend/src/styles/auth.css     | 78 +++++++++++++++++++++++++++++++-
 2 files changed, 89 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 25255cf..fecf33f 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -45,6 +45,8 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
   const [savingProject, setSavingProject] = useState(false);
   const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [mobileTreeOpen, setMobileTreeOpen] = useState(false);
+  const [mobileInfoOpen, setMobileInfoOpen] = useState(false);
 
   const fetchAll = useCallback(async () => {
     if (!token) return;
@@ -207,6 +209,7 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
 
   const handleProjectCardClick = (projectId: string) => {
     setSelectedProjectId(projectId);
+    setMobileInfoOpen(true);
   };
 
   const handleSaveProject = async () => {
@@ -383,6 +386,9 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
     <div className="dashboard-page">
       <header className="dashboard-header">
         <div className="dashboard-brand">
+          <button className="dashboard-hamburger" aria-label="Ordner" onClick={() => setMobileTreeOpen(true)}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>
           <h1>Web CAD</h1>
           <span className="dashboard-user">{user?.name} ({user?.role})</span>
         </div>
@@ -392,8 +398,12 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
         </div>
       </header>
 
+      {(mobileTreeOpen || mobileInfoOpen) && (
+        <div className="dashboard-scrim" onClick={() => { setMobileTreeOpen(false); setMobileInfoOpen(false); }} />
+      )}
       <div className="dashboard-3col">
-        <div className="dashboard-treeview" onContextMenu={(e) => handleContextMenu(e, null)}>
+        <div className={`dashboard-treeview${mobileTreeOpen ? ' mobile-open' : ''}`} onContextMenu={(e) => handleContextMenu(e, null)}>
+          <button className="mobile-panel-close" onClick={() => setMobileTreeOpen(false)}>×</button>
           <div className="treeview-header">
             <h3>Ordner</h3>
             <button
@@ -532,7 +542,8 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
           )}
         </div>
 
-        <div className="dashboard-info-panel">
+        <div className={`dashboard-info-panel${mobileInfoOpen ? ' mobile-open' : ''}`}>
+          <button className="mobile-panel-back" onClick={() => setMobileInfoOpen(false)}>← Zurück</button>
           {selectedProject ? (
             <>
               <input
diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css
index c43f765..78e7be8 100644
--- a/frontend/src/styles/auth.css
+++ b/frontend/src/styles/auth.css
@@ -601,13 +601,87 @@
   text-align: center;
 }
 
+/* Mobile Hamburger Button — nur auf Mobile sichtbar */
+.dashboard-hamburger { display: none; }
+
 @media (max-width: 768px) {
+  .dashboard-hamburger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 4px;
+    margin-right: 8px;
+  }
+
   .dashboard-3col {
     grid-template-columns: 1fr;
+    position: relative;
   }
-  .dashboard-treeview, .dashboard-info-panel {
-    display: none;
+
+  /* Treeview: slide-in von links */
+  .dashboard-treeview {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(280px, 80vw);
+    z-index: 200;
+    transform: translateX(-100%);
+    transition: transform 280ms cubic-bezier(.32,.72,0,1);
+    box-shadow: 4px 0 16px rgba(0,0,0,0.3);
   }
+  .dashboard-treeview.mobile-open {
+    transform: translateX(0);
+  }
+
+  /* Info-Panel: slide-in von rechts */
+  .dashboard-info-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(320px, 85vw);
+    z-index: 200;
+    transform: translateX(100%);
+    transition: transform 280ms cubic-bezier(.32,.72,0,1);
+    box-shadow: -4px 0 16px rgba(0,0,0,0.3);
+  }
+  .dashboard-info-panel.mobile-open {
+    transform: translateX(0);
+  }
+
+  /* Scrim */
+  .dashboard-scrim {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 150;
+  }
+
+  /* Mobile Panel Close/Back Buttons */
+  .mobile-panel-close, .mobile-panel-back {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 8px 12px;
+    font-size: 16px;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+
+/* Desktop: Mobile-Buttons verstecken */
+@media (min-width: 769px) {
+  .mobile-panel-close, .mobile-panel-back { display: none; }
+  .dashboard-scrim { display: none; }
 }
 
 .dashboard-header {