feat: mobile-responsive dashboard v2

frontend/src/components/layout/Topbar.vue

@@ -4,10 +4,17 @@ import { icons } from '../../composables/icons'
 defineProps<{
   connected?: boolean
 }>()
+
+defineEmits<{
+  'toggle-sidebar': []
+}>()
 </script>
 
 <template>
   <header class="topbar">
+    <!-- Hamburger (mobile only) -->
+    <button class="hamburger" @click="$emit('toggle-sidebar')" v-html="icons.list || ''"></button>
+
     <!-- Search -->
     <div class="search">
       <span class="search-icon" v-html="icons.search || ''"></span>
@@ -24,9 +31,9 @@ defineProps<{
     </span>
 
     <!-- Ask Iris Button -->
-    <button class="btn btn-primary">
+    <button class="btn btn-primary ask-iris-btn">
       <span class="btn-icon" v-html="icons.spark || ''"></span>
-      Ask Iris
+      <span class="ask-label">Ask Iris</span>
     </button>
   </header>
 </template>
@@ -138,4 +145,65 @@ defineProps<{
   height: 15px;
 }
 
+.hamburger {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .topbar {
+    padding: 0 14px;
+  }
+
+  .search {
+    flex: 1;
+    max-width: none;
+  }
+
+  .hamburger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    border: none;
+    background: transparent;
+    color: var(--tx-2);
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+
+  .hamburger:hover {
+    background: rgba(124,108,255,.1);
+    color: var(--tx);
+  }
+
+  .hamburger :deep(svg) {
+    width: 20px;
+    height: 20px;
+  }
+
+  .pill {
+    display: none;
+  }
+
+  .ask-iris-btn {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    border-radius: 9px;
+    flex: 0 0 auto;
+  }
+
+  .ask-label {
+    display: none;
+  }
+
+  .ask-iris-btn .btn-icon {
+    display: flex;
+  }
+}
+
 </style>