Add responsive mobile layout and drawer menu

src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Menu, Wrench } from 'lucide-react';
 import { Sidebar } from './components/Sidebar';
 import { DashboardView } from './views/DashboardView';
 import { DispatchingView } from './views/DispatchingView';
@@ -9,6 +10,7 @@ import { SupabaseSyncView } from './views/SupabaseSyncView';
 
 export const App: React.FC = () => {
   const [activeTab, setActiveTab] = useState('dashboard');
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const renderView = () => {
     switch (activeTab) {
@@ -31,7 +33,29 @@ export const App: React.FC = () => {
 
   return (
     <div className="app-container">
-      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
+      {/* Mobile Header Bar */}
+      <header className="mobile-top-bar">
+        <button 
+          className="mobile-hamburger-btn"
+          onClick={() => setMobileMenuOpen(true)}
+          aria-label="Menü öffnen"
+        >
+          <Menu size={24} />
+        </button>
+
+        <div className="mobile-brand">
+          <Wrench size={20} color="#38bdf8" />
+          <span>Handwerksfreund</span>
+        </div>
+      </header>
+
+      <Sidebar 
+        activeTab={activeTab} 
+        setActiveTab={setActiveTab}
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+      />
+
       <main className="main-content">
         {renderView()}
       </main>

src/components/LiveOrdersTable.tsx

@@ -9,6 +9,7 @@ export const LiveOrdersTable: React.FC<LiveOrdersTableProps> = ({ orders }) => {
   return (
     <div className="content-card">
       <h2 className="card-heading">Heutige Live-Aufträge (Dispatching)</h2>
+      <div className="table-responsive">
         <table className="orders-table">
           <thead>
             <tr>
@@ -38,5 +39,6 @@ export const LiveOrdersTable: React.FC<LiveOrdersTableProps> = ({ orders }) => {
           </tbody>
         </table>
       </div>
+    </div>
   );
 };

src/components/Sidebar.tsx

@@ -6,15 +6,23 @@ import {
   Package, 
   Users, 
   Clock, 
-  Database 
+  Database,
+  X
 } from 'lucide-react';
 
 interface SidebarProps {
   activeTab: string;
   setActiveTab: (tab: string) => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
+export const Sidebar: React.FC<SidebarProps> = ({ 
+  activeTab, 
+  setActiveTab,
+  isOpen,
+  onClose
+}) => {
   const menuItems = [
     { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
     { id: 'dispatching', label: 'Dispatching', icon: CalendarDays },
@@ -24,13 +32,38 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) =>
     { id: 'supabase', label: 'Supabase Sync', icon: Database },
   ];
 
+  const handleSelect = (tabId: string) => {
+    setActiveTab(tabId);
+    onClose(); // Close mobile sidebar on selection
+  };
+
   return (
-    <aside className="sidebar">
+    <>
+      {/* Mobile Backdrop */}
+      {isOpen && (
+        <div 
+          className="sidebar-backdrop"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+      )}
+
+      <aside className={`sidebar ${isOpen ? 'open' : ''}`}>
         <div className="brand">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
             <Wrench className="brand-icon" size={24} />
             <span>Handwerksfreund</span>
           </div>
 
+          <button 
+            className="mobile-close-btn"
+            onClick={onClose}
+            aria-label="Menü schließen"
+          >
+            <X size={24} />
+          </button>
+        </div>
+
         <nav>
           <ul className="nav-list">
             {menuItems.map((item) => {
@@ -40,8 +73,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) =>
                 <li key={item.id}>
                   <button
                     className={`nav-item ${isActive ? 'active' : ''}`}
-                  onClick={() => setActiveTab(item.id)}
+                    onClick={() => handleSelect(item.id)}
-                  style={{ width: '100%', background: 'none', border: 'none', textAlign: 'left' }}
                   >
                     <Icon className="icon" size={20} />
                     <span>{item.label}</span>
@@ -52,5 +84,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) =>
           </ul>
         </nav>
       </aside>
+    </>
   );
 };

src/index.css

@@ -31,12 +31,62 @@ body {
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 .app-container {
   display: flex;
   min-height: 100vh;
   width: 100vw;
+  position: relative;
+}
+
+/* Mobile Top Navigation Bar (Hidden on Desktop) */
+.mobile-top-bar {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--bg-sidebar);
+  color: #ffffff;
+  padding: 14px 20px;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  width: 100%;
+}
+
+.mobile-hamburger-btn {
+  background: none;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 8px;
+}
+
+.mobile-hamburger-btn:hover {
+  background-color: var(--bg-sidebar-hover);
+}
+
+.mobile-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+/* Sidebar Backdrop for Mobile */
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 49;
 }
 
 /* Sidebar Styles */
@@ -48,12 +98,14 @@ body {
   flex-direction: column;
   padding: 24px 16px;
   flex-shrink: 0;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 50;
 }
 
 .brand {
   display: flex;
   align-items: center;
-  gap: 12px;
+  justify-content: space-between;
   color: #ffffff;
   font-size: 1.25rem;
   font-weight: 700;
@@ -64,6 +116,21 @@ body {
   color: #38bdf8;
 }
 
+.mobile-close-btn {
+  display: none;
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.mobile-close-btn:hover {
+  color: #ffffff;
+  background-color: var(--bg-sidebar-hover);
+}
+
 .nav-list {
   list-style: none;
   display: flex;
@@ -83,6 +150,10 @@ body {
   cursor: pointer;
   transition: all 0.2s ease;
   text-decoration: none;
+  width: 100%;
+  background: none;
+  border: none;
+  text-align: left;
 }
 
 .nav-item:hover {
@@ -109,9 +180,10 @@ body {
   display: flex;
   flex-direction: column;
   gap: 32px;
+  max-width: 100%;
 }
 
-/* Top Header */
+/* Top Header Bar */
 .header-bar {
   display: flex;
   justify-content: space-between;
@@ -121,6 +193,8 @@ body {
   border-radius: 16px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
   border: 1px solid var(--border-color);
+  flex-wrap: wrap;
+  gap: 16px;
 }
 
 .header-title {
@@ -137,6 +211,10 @@ body {
   font-size: 0.9rem;
   font-weight: 600;
   color: #10b981;
+  background-color: #f0fdf4;
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1px solid #bbf7d0;
 }
 
 .status-dot {
@@ -197,6 +275,7 @@ body {
   border-radius: 16px;
   padding: 28px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  overflow: hidden;
 }
 
 .card-heading {
@@ -206,11 +285,19 @@ body {
   color: var(--text-primary);
 }
 
+/* Table Container for Mobile Horizontal Scroll */
+.table-responsive {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* Table Styles */
 .orders-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 12px;
+  min-width: 500px; /* Ensures table readability on small screens */
 }
 
 .orders-table th {
@@ -219,6 +306,7 @@ body {
   font-weight: 600;
   color: var(--text-secondary);
   padding: 0 16px 8px 16px;
+  white-space: nowrap;
 }
 
 .orders-table td {
@@ -228,6 +316,7 @@ body {
   background-color: #ffffff;
   border-top: 1px solid #f1f5f9;
   border-bottom: 1px solid #f1f5f9;
+  white-space: nowrap;
 }
 
 .orders-table tr td:first-child {
@@ -278,6 +367,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 14px;
+  word-break: break-word;
 }
 
 .status-item {
@@ -298,11 +388,90 @@ body {
   color: #ffffff;
 }
 
+/* ==========================================================================
+   Responsive Breakpoints
+   ========================================================================== */
+
+/* Tablet & Mobile Layout (< 1024px) */
 @media (max-width: 1024px) {
   .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+
   .dashboard-grid {
     grid-template-columns: 1fr;
   }
 }
+
+/* Mobile Phone Layout (< 768px) */
+@media (max-width: 768px) {
+  .app-container {
+    flex-direction: column;
+  }
+
+  .mobile-top-bar {
+    display: flex;
+  }
+
+  .sidebar-backdrop {
+    display: block;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100vh;
+    transform: translateX(-100%);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .mobile-close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .main-content {
+    padding: 20px 16px;
+    gap: 20px;
+  }
+
+  .header-bar {
+    padding: 16px 20px;
+    border-radius: 12px;
+  }
+
+  .header-title {
+    font-size: 1.35rem;
+  }
+
+  .kpi-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .kpi-card {
+    padding: 16px 18px;
+    border-radius: 12px;
+  }
+
+  .kpi-value {
+    font-size: 1.45rem;
+  }
+
+  .content-card {
+    padding: 20px 16px;
+    border-radius: 12px;
+  }
+
+  .card-heading {
+    font-size: 1.1rem;
+    margin-bottom: 14px;
+  }
+}

src/views/DispatchingView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CalendarDays, Plus, UserCheck } from 'lucide-react';
+import { Plus, UserCheck } from 'lucide-react';
 
 export const DispatchingView: React.FC = () => {
   const scheduleData = [
@@ -30,11 +30,12 @@ export const DispatchingView: React.FC = () => {
       </header>
 
       <section className="content-card">
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', gap: '10px' }}>
           <h2 className="card-heading" style={{ margin: 0 }}>Tagesdisposition (Heute)</h2>
           <span style={{ fontSize: '0.9rem', color: '#64748b', fontWeight: 600 }}>10 Monteure im System</span>
         </div>
 
+        <div className="table-responsive">
           <table className="orders-table">
             <thead>
               <tr>
@@ -66,6 +67,7 @@ export const DispatchingView: React.FC = () => {
               ))}
             </tbody>
           </table>
+        </div>
       </section>
     </>
   );

src/views/InventoryView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Package, AlertTriangle } from 'lucide-react';
+import { AlertTriangle } from 'lucide-react';
 
 export const InventoryView: React.FC = () => {
   const parts = [
@@ -21,6 +21,7 @@ export const InventoryView: React.FC = () => {
 
       <section className="content-card">
         <h2 className="card-heading">Ersatzteilbestand & Bestellwarnungen</h2>
+        <div className="table-responsive">
           <table className="orders-table">
             <thead>
               <tr>
@@ -56,6 +57,7 @@ export const InventoryView: React.FC = () => {
               ))}
             </tbody>
           </table>
+        </div>
       </section>
     </>
   );

src/views/TimeTrackingView.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Clock, CheckCircle } from 'lucide-react';
 
 export const TimeTrackingView: React.FC = () => {
   const timeEntries = [
@@ -18,6 +17,7 @@ export const TimeTrackingView: React.FC = () => {
 
       <section className="content-card">
         <h2 className="card-heading">Erfasste Arbeitszeiten der Monteure</h2>
+        <div className="table-responsive">
           <table className="orders-table">
             <thead>
               <tr>
@@ -48,6 +48,7 @@ export const TimeTrackingView: React.FC = () => {
               ))}
             </tbody>
           </table>
+        </div>
       </section>
     </>
   );