feat(web): add responsive workbench navigation

apps/web_v1/src/App.css

@@ -231,6 +231,10 @@
   justify-content: flex-end;
 }
 
+.mobile-nav-button {
+  display: none;
+}
+
 .dock-icon {
   position: relative;
   display: inline-block;
@@ -1898,6 +1902,13 @@
 
 .status-user {
   gap: var(--space-2);
+}
+
+.status-profile {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
   border: 0;
   background: transparent;
   color: rgba(255, 255, 255, 0.86);
@@ -1905,10 +1916,22 @@
   cursor: pointer;
 }
 
-.status-user:hover .status-name {
+.status-profile:hover .status-name {
   color: #fff;
 }
 
+.status-avatar {
+  width: 24px;
+  height: 24px;
+  display: inline-grid;
+  flex: 0 0 24px;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 12px;
+}
+
 .status-tasks {
   justify-content: center;
 }
@@ -2046,8 +2069,77 @@
   }
 }
 
-@media (max-width: 1180px) {
-  .workbench-shell {
-    min-width: 1180px;
+@media (max-width: 767px) {
+  .topbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--space-2);
+    padding: 0 var(--space-3);
+  }
+
+  .topbar .global-search {
+    display: none;
+  }
+
+  .topbar-actions {
+    gap: var(--space-1);
+  }
+
+  .topbar-actions .arco-space-item:last-child {
+    display: none;
+  }
+
+  .mobile-nav-button {
+    display: inline-flex;
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .workbench-main {
+    position: relative;
+  }
+
+  .project-rail,
+  .channel-sidebar {
+    position: fixed !important;
+    top: 58px;
+    bottom: 32px;
+    left: 0;
+    z-index: 20;
+    height: auto !important;
+    max-width: calc(100vw - 48px);
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateX(-100%);
+    transition: transform 160ms ease, visibility 160ms ease;
+  }
+
+  .project-rail.open,
+  .channel-sidebar.open {
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateX(0);
+  }
+
+  .nav-backdrop {
+    position: fixed;
+    inset: 58px 0 32px;
+    z-index: 19;
+    border: 0;
+    background: rgba(29, 33, 41, 0.38);
+    padding: 0;
+  }
+
+  .stage {
+    width: 100%;
+    padding: var(--space-3);
+  }
+
+  .statusbar {
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0 var(--space-3);
+  }
+
+  .status-system {
+    display: none;
   }
 }