feat: mobile-responsive dashboard v2

frontend/src/layouts/NexusLayout.vue

@@ -3,7 +3,9 @@
  * NexusLayout — V2 Dashboard Shell
  * Flex row, 100vh, overflow hidden.
  * Sidebar (248px) + Main (flex:1, flex-column)
+ * Mobile: Sidebar als Overlay mit Hamburger-Toggle
  */
+import { ref } from 'vue'
 import { RouterView } from 'vue-router'
 import { useAgentStore } from '../stores/agents'
 import GalaxyBackground from '../components/background/GalaxyBackground.vue'
@@ -11,14 +13,35 @@ import Sidebar from '../components/layout/Sidebar.vue'
 import Topbar from '../components/layout/Topbar.vue'
 
 const agentStore = useAgentStore()
+
+/* ── Mobile Sidebar State ───────────────────────── */
+const mobileMenuOpen = ref(false)
+
+function closeMobileMenu() {
+  mobileMenuOpen.value = false
+}
 </script>
 
 <template>
   <div class="nexus-layout">
     <GalaxyBackground />
-    <Sidebar />
+    <Sidebar
+      :mobile-open="mobileMenuOpen"
+      @close="closeMobileMenu"
+    />
+
+    <!-- Mobile Backdrop -->
+    <div
+      v-if="mobileMenuOpen"
+      class="mobile-backdrop"
+      @click="closeMobileMenu"
+    ></div>
+
     <main class="nexus-main">
-      <Topbar :connected="agentStore.isConnected" />
+      <Topbar
+        :connected="agentStore.isConnected"
+        @toggle-sidebar="mobileMenuOpen = !mobileMenuOpen"
+      />
       <div class="nexus-content">
         <RouterView />
       </div>
@@ -49,4 +72,22 @@ const agentStore = useAgentStore()
   overflow: hidden;
   min-height: 0;
 }
+
+.mobile-backdrop {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .nexus-main {
+    width: 100%;
+  }
+
+  .mobile-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
 </style>