From 27cab6b8d008b1a5f9c9f98c2f076c66beadbaef Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Fri, 20 Feb 2026 00:15:36 +0800
Subject: [PATCH] Add mobile responsive sidebar, OpenClaw route

---
 dashboard/frontend/src/App.svelte             | 10 +++++++++-
 .../frontend/src/components/Sidebar.svelte    | 19 ++++++++++++++++---
 dashboard/frontend/src/routes/OpenClaw.svelte | 13 +++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 dashboard/frontend/src/routes/OpenClaw.svelte

diff --git a/dashboard/frontend/src/App.svelte b/dashboard/frontend/src/App.svelte
index d936f00..df8143f 100644
--- a/dashboard/frontend/src/App.svelte
+++ b/dashboard/frontend/src/App.svelte
@@ -5,6 +5,7 @@
   import Gitea from "./routes/Gitea.svelte";
   import Files from "./routes/Files.svelte";
   import Terminal from "./routes/Terminal.svelte";
+  import OpenClaw from "./routes/OpenClaw.svelte";
   import Settings from "./routes/Settings.svelte";
   import Login from "./routes/Login.svelte";
   import { onMount } from "svelte";
@@ -12,6 +13,7 @@
 
   let page = $state("dashboard");
   let dark = $state(false);
+  let sidebarOpen = $state(false);
   let authorized = $state(false);
   let loading = $state(true);
 
@@ -70,9 +72,13 @@
   <Login />
 {:else}
   <div class="flex h-screen overflow-hidden bg-surface-50 {dark ? 'dark bg-surface-900' : ''}">
-    <Sidebar bind:page {dark} {toggleTheme} {logout} />
+    <Sidebar bind:page {dark} {toggleTheme} {logout} bind:sidebarOpen />
     <main class="flex-1 overflow-auto">
       <div class="max-w-[1400px] mx-auto p-6 lg:p-8">
+        <!-- Mobile hamburger -->
+        <button class="md:hidden mb-4 p-2 rounded-lg hover:bg-surface-200 {dark ? 'hover:bg-surface-700 text-surface-300' : 'text-surface-600'}" onclick={() => sidebarOpen = true} aria-label="Open menu">
+          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
+        </button>
         {#if page === "dashboard"}
           <Dashboard />
         {:else if page === "docker"}
@@ -83,6 +89,8 @@
           <Files />
         {:else if page === "terminal"}
           <Terminal />
+        {:else if page === "openclaw"}
+          <OpenClaw />
         {:else if page === "settings"}
           <Settings />
         {/if}
diff --git a/dashboard/frontend/src/components/Sidebar.svelte b/dashboard/frontend/src/components/Sidebar.svelte
index 396f80e..84718ba 100644
--- a/dashboard/frontend/src/components/Sidebar.svelte
+++ b/dashboard/frontend/src/components/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script>
-  let { page = $bindable("dashboard"), dark = false, toggleTheme = () => {}, logout = () => {} } = $props();
+  let { page = $bindable("dashboard"), dark = false, toggleTheme = () => {}, logout = () => {}, sidebarOpen = $bindable(false) } = $props();
 
   const links = [
     { id: "dashboard", label: "Overview", icon: "grid" },
@@ -7,6 +7,7 @@
     { id: "gitea", label: "Repos", icon: "git" },
     { id: "files", label: "Files", icon: "folder" },
     { id: "terminal", label: "Terminal", icon: "terminal" },
+    { id: "openclaw", label: "OpenClaw", icon: "openclaw" },
     { id: "settings", label: "Settings", icon: "settings" },
   ];
 
@@ -20,9 +21,19 @@
   function extHref(port) {
     return `${location.protocol}//${location.hostname}:${port}`;
   }
+
+  function navigate(id) {
+    page = id;
+    sidebarOpen = false;
+  }
 </script>
 
-<aside class="w-[240px] h-screen flex flex-col shrink-0 border-r border-surface-200 bg-white transition-colors duration-200 {dark ? 'bg-surface-800 border-surface-700' : ''}">
+<!-- Mobile overlay -->
+{#if sidebarOpen}
+  <button class="fixed inset-0 bg-black/40 z-40 md:hidden" onclick={() => sidebarOpen = false} aria-label="Close sidebar"></button>
+{/if}
+
+<aside class="fixed inset-y-0 left-0 z-50 w-[240px] h-screen flex flex-col shrink-0 border-r border-surface-200 bg-white transition-transform duration-200 md:static md:translate-x-0 {dark ? 'bg-surface-800 border-surface-700' : ''} {sidebarOpen ? 'translate-x-0' : '-translate-x-full'}">
   <!-- Logo -->
   <div class="px-5 py-5 flex items-center gap-3">
     <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-md">
@@ -44,7 +55,7 @@
             ? 'bg-primary-50 text-primary-700 shadow-sm ' + (dark ? 'bg-primary-900/30 text-primary-300' : '')
             : 'text-surface-500 hover:bg-surface-100 hover:text-surface-700 ' + (dark ? 'hover:bg-surface-700 hover:text-surface-200 text-surface-400' : '')
           }"
-        onclick={() => page = link.id}
+        onclick={() => navigate(link.id)}
       >
         <span class="w-5 h-5 flex items-center justify-center">
           {#if link.icon === "grid"}
@@ -57,6 +68,8 @@
             <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
           {:else if link.icon === "terminal"}
             <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+          {:else if link.icon === "openclaw"}
+            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
           {:else if link.icon === "settings"}
             <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
           {/if}
diff --git a/dashboard/frontend/src/routes/OpenClaw.svelte b/dashboard/frontend/src/routes/OpenClaw.svelte
new file mode 100644
index 0000000..6bb993b
--- /dev/null
+++ b/dashboard/frontend/src/routes/OpenClaw.svelte
@@ -0,0 +1,13 @@
+<div class="space-y-4">
+  <div>
+    <h1 class="text-2xl font-bold text-surface-900 tracking-tight">OpenClaw</h1>
+    <p class="text-sm text-surface-400 mt-1">AI Assistant</p>
+  </div>
+
+  <iframe
+    src="{location.protocol}//{location.hostname}:3100"
+    title="OpenClaw"
+    class="w-full h-[calc(100vh-10rem)] rounded-xl border border-surface-200 shadow-lg"
+    allow="clipboard-read; clipboard-write"
+  ></iframe>
+</div>