wip: zen

packages/console/app/src/routes/workspace/[id].css

@@ -16,38 +16,110 @@
   justify-content: flex-end;
 }
 
-[data-component="workspace-nav-items"] {
+/* Desktop Navigation */
-  display: flex;
+[data-component="nav-desktop"] {
-  flex-direction: column;
+  display: block;
-  gap: var(--space-2);
 
-  [data-nav-button] {
+  @media (max-width: 48rem) {
-    padding: var(--space-3) var(--space-4);
+    display: none;
-    border-radius: var(--border-radius-sm);
+  }
-    color: var(--color-text-muted);
-    text-decoration: none;
-    font-size: var(--font-size-sm);
-    font-weight: 500;
-    transition: all 0.15s ease;
 
-    &:hover {
+  [data-component="workspace-nav-items"] {
-      color: var(--color-text);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+
+    [data-nav-button] {
+      padding: var(--space-3) var(--space-4);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      transition: all 0.15s ease;
+
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &.active {
+        color: var(--color-text);
+        font-weight: 700;
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: calc(-1 * var(--space-0-5));
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background-color: var(--color-text);
+          border-radius: 0 2px 2px 0;
+        }
+      }
     }
+  }
+}
 
-    &.active {
+/* Mobile Navigation */
-      color: var(--color-text);
+[data-component="nav-mobile"] {
-      font-weight: 700;
+  display: none;
+
+  @media (max-width: 48rem) {
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [data-component="workspace-nav-items"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: max-content;
+    height: 100%;
+
+    [data-nav-button] {
+      padding: var(--space-2) var(--space-3);
+      padding-bottom: calc(var(--space-2) + 4px);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      transition: all 0.15s ease;
+      white-space: nowrap;
+      flex-shrink: 0;
       position: relative;
 
-      &::before {
+      &:hover {
-        content: '';
+        color: var(--color-text);
-        position: absolute;
+      }
-        left: calc(-1 * var(--space-0-5));
+
-        top: 0;
+      &.active {
-        bottom: 0;
+        color: var(--color-text);
-        width: 2px;
+        font-weight: 700;
-        background-color: var(--color-text);
+
-        border-radius: 0 2px 2px 0;
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background-color: var(--color-text);
+          border-radius: 2px 2px 0 0;
+        }
       }
     }
   }
@@ -221,5 +293,16 @@
     border-right: none;
     border-bottom: 1px solid var(--color-border);
     padding: var(--space-4);
+    justify-content: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-shrink: 0;
+    min-height: fit-content;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }

packages/console/app/src/routes/workspace/[id].tsx

@@ -6,29 +6,54 @@ import "./[id].css"
 export default function WorkspaceLayout(props: RouteSectionProps) {
   const params = useParams()
   const userInfo = createAsync(() => querySessionInfo(params.id))
+
   return (
     <main data-page="workspace">
       <div data-component="workspace-container">
         <nav data-component="workspace-nav">
-          <div data-component="workspace-nav-items">
+          <nav data-component="nav-desktop">
-            <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+            <div data-component="workspace-nav-items">
-              Zen
+              <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
-            </A>
+                Zen
-            <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
-              API Keys
-            </A>
-            <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
-              Members
-            </A>
-            <Show when={userInfo()?.isAdmin}>
-              <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
-                Billing
               </A>
-              <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+              <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
-                Settings
+                API Keys
               </A>
-            </Show>
+              <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
-          </div>
+                Members
+              </A>
+              <Show when={userInfo()?.isAdmin}>
+                <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                  Billing
+                </A>
+                <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                  Settings
+                </A>
+              </Show>
+            </div>
+          </nav>
+
+          <nav data-component="nav-mobile">
+            <div data-component="workspace-nav-items">
+              <A href={`/workspace/${params.id}`} end activeClass="active" data-nav-button>
+                Zen
+              </A>
+              <A href={`/workspace/${params.id}/keys`} activeClass="active" data-nav-button>
+                API Keys
+              </A>
+              <A href={`/workspace/${params.id}/members`} activeClass="active" data-nav-button>
+                Members
+              </A>
+              <Show when={userInfo()?.isAdmin}>
+                <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
+                  Billing
+                </A>
+                <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                  Settings
+                </A>
+              </Show>
+            </div>
+          </nav>
         </nav>
         <div data-component="workspace-content">{props.children}</div>
       </div>