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/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 {