feat: mobile-responsive dashboard v2

frontend/src/components/layout/Sidebar.vue

@@ -6,6 +6,14 @@ import { useAgentStore } from '../../stores/agents'
 import { useTaskStore } from '../../stores/tasks'
 import { navigation, icons } from '../../composables/icons'
 import type { NavGroupDef } from '../../composables/icons'
+
+defineProps<{
+  mobileOpen?: boolean
+}>()
+
+defineEmits<{
+  close: []
+}>()
 import NavGroup from './NavGroup.vue'
 import { initials } from '../../utils/format'
 
@@ -63,7 +71,8 @@ const dynamicNavigation = computed<NavGroupDef[]>(() => {
 </script>
 
 <template>
-  <aside class="sidebar">
+  <aside :class="['sidebar', { open: mobileOpen }]">
+    <button class="sidebar-close" @click="$emit('close')" v-html="icons.chevron_left || ''"></button>
     <!-- Brand -->
     <div class="side-top">
       <div class="brand-mark" v-html="icons.command || ''"></div>
@@ -171,6 +180,54 @@ const dynamicNavigation = computed<NavGroupDef[]>(() => {
   background: rgba(124,108,255,.06);
 }
 
+.sidebar-close {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: 100vh;
+    width: 280px;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .sidebar-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 18px;
+    right: 12px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    color: var(--tx-2);
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .sidebar-close:hover {
+    background: rgba(124,108,255,.1);
+    color: var(--tx);
+  }
+
+  .sidebar-close :deep(svg) {
+    width: 18px;
+    height: 18px;
+  }
+}
+
 .avatar {
   width: 34px;
   height: 34px;