From e68d29760a25efd99786cb51a4b9cb439859592f Mon Sep 17 00:00:00 2001
From: Shishant Biswas <shishantbiswas@gmail.com>
Date: Fri, 18 Sep 2026 19:29:31 +0530
Subject: [PATCH] fix: sidebar link href with

---
 app/src/ui/Admin.tsx                  |  5 +++++
 app/src/ui/components/wouter/Link.tsx | 16 +++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/src/ui/Admin.tsx b/app/src/ui/Admin.tsx
index 766b56a8..c62eedce 100644
--- a/app/src/ui/Admin.tsx
+++ b/app/src/ui/Admin.tsx
@@ -16,6 +16,11 @@ export type BkndAdminConfig = {
     * @default `/`
     */
    basepath?: string;
+   /**
+   * Sub-path for the Admin UI within the base path
+   * @default ``
+   */
+   admin_basepath?: string;
    /**
     * Path to return to when clicking the logo
     * @default `/`
diff --git a/app/src/ui/components/wouter/Link.tsx b/app/src/ui/components/wouter/Link.tsx
index 4c5238d6..d48aa8c2 100644
--- a/app/src/ui/components/wouter/Link.tsx
+++ b/app/src/ui/components/wouter/Link.tsx
@@ -1,5 +1,6 @@
 import { type LinkProps, Link as WouterLink, useRouter } from "wouter";
 import { useEvent } from "../../hooks/use-event";
+import { useBkndOptions } from "ui/client/BkndProvider";
 
 /*
  * Transforms `path` into its relative `base` version
@@ -70,11 +71,13 @@ export function Link({
 
       return false;
    }
-
+   const bkndOptions = useBkndOptions();
+   const adminBasePath = bkndOptions?.admin_basepath ?? "";
    const _href = props.href ?? props.to;
+
    const href = router
       .hrefs(
-         _href[0] === "~" ? _href.slice(1) : router.base + _href,
+         _href[0] === "~" ? adminBasePath + _href.slice(1) : router.base + _href,
          router, // pass router as a second argument for convinience
       )
       .replace("//", "/");
@@ -82,8 +85,10 @@ export function Link({
    const active =
       href.replace(router.base, "").length <= 1 ? href === absPath : isActive(absPath, href);
 
+   // console.log({ adminBasePath, _href, href, bkndOptions })
    if (native) {
-      return <a className={`${active ? "active " : ""}${className}`} {...props} />;
+      // @ts-expect-error update wouter breaks types for anchor tag
+      return <a className={`${active ? "active " : ""}${className}`} {...props} href={href} />;
    }
 
    const wouterOnClick = (e: any) => {
@@ -99,10 +104,11 @@ export function Link({
    };
 
    return (
+      // @ts-expect-error className is not typed on WouterLink
       <WouterLink
-         // @ts-expect-error className is not typed on WouterLink
-         className={`${active ? "active " : ""}${className}`}
          {...props}
+         className={`${active ? "active " : ""}${className}`}
+         href={`~${href}`}
          onClick={wouterOnClick}
       />
    );