Add mobile responsive sidebar, OpenClaw route

2026-02-20 00:15:36 +08:00
parent 28149b991e
commit 27cab6b8d0
3 changed files with 38 additions and 4 deletions
@@ -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}
@@ -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}
@@ -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>