From f7f97bf9e529ee91f313ac9ee8c69d41bcb669bb Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Fri, 8 May 2026 13:23:16 +0200 Subject: [PATCH] fix(frontend): keep sidebar links absolute when basePath is empty MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dashboard sidebar built tab keys as basePath + 'panel/...'. In dev the window-injected basePath is '' so the resulting key was a relative path like 'panel/settings'. When the browser resolved that against the current /panel/settings URL it produced /panel/panel/settings — visible as broken navigation between Dashboard and Settings. Force a leading slash so the keys are always absolute regardless of whether the host injected a basePath. Co-Authored-By: Claude Opus 4.7 --- frontend/src/components/AppSidebar.vue | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue index fa3d58e7..04dcb482 100644 --- a/frontend/src/components/AppSidebar.vue +++ b/frontend/src/components/AppSidebar.vue @@ -35,12 +35,19 @@ const iconByName = { logout: LogoutOutlined, }; +// basePath comes from Go (`/` by default, `/myprefix/` when configured) so +// these concatenations land on absolute paths. In dev we synthesize the prop +// from a window global which can be empty — force a leading slash so the +// browser doesn't resolve the link relative to the current pathname (which +// would turn /panel/settings + 'panel/...' into /panel/panel/...). +const prefix = props.basePath?.startsWith('/') ? props.basePath : `/${props.basePath || ''}`; + const tabs = [ - { key: `${props.basePath}panel/`, icon: 'dashboard', title: 'Dashboard' }, - { key: `${props.basePath}panel/inbounds`, icon: 'user', title: 'Inbounds' }, - { key: `${props.basePath}panel/settings`, icon: 'setting', title: 'Settings' }, - { key: `${props.basePath}panel/xray`, icon: 'tool', title: 'Xray' }, - { key: `${props.basePath}logout/`, icon: 'logout', title: 'Logout' }, + { key: `${prefix}panel/`, icon: 'dashboard', title: 'Dashboard' }, + { key: `${prefix}panel/inbounds`, icon: 'user', title: 'Inbounds' }, + { key: `${prefix}panel/settings`, icon: 'setting', title: 'Settings' }, + { key: `${prefix}panel/xray`, icon: 'tool', title: 'Xray' }, + { key: `${prefix}logout/`, icon: 'logout', title: 'Logout' }, ]; const activeTab = ref([props.requestUri]);