jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add mobile responsive sidebar, OpenClaw route
Deploy Dashboard / deploy (push) Failing after 3m30s
Details

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-20 00:15:36 +08:00
parent 28149b991e
commit 27cab6b8d0
3 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/components/Sidebar.svelte
+16 -3
View File
@@ -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}