diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
index 8f4eb6a2..6a4a2516 100644
--- a/frontend/src/components/app-sidebar.tsx
+++ b/frontend/src/components/app-sidebar.tsx
@@ -25,7 +25,6 @@ import {
SidebarMenuButton,
SidebarMenuItem,
SidebarRail,
- SidebarTrigger,
useSidebar,
} from "@/components/ui/sidebar";
import {
@@ -113,7 +112,6 @@ export function AppSidebar({
{showExpandedContent ? Jyotisha : null}
-
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 8a59b9d7..60a54b1e 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -1,6 +1,7 @@
"use client";
import { Tooltip } from "@base-ui/react/tooltip";
+import { PanelLeft } from "lucide-react";
import {
createContext,
forwardRef,
@@ -37,7 +38,7 @@ export type SidebarContextValue = {
type SidebarProviderContextValue = SidebarContextValue & {
readonly setInsetTrigger: (element: HTMLButtonElement | null) => void;
- readonly setSidebarTrigger: (element: HTMLButtonElement | null) => void;
+ readonly setSidebarSurface: (element: HTMLElement | null) => void;
};
export type SidebarProviderProps = ComponentProps<"div"> & {
@@ -84,7 +85,7 @@ export function SidebarProvider({
const openMobileRef = useRef(false);
const userChangedDesktopState = useRef(false);
const insetTriggerRef = useRef(null);
- const sidebarTriggerRef = useRef(null);
+ const sidebarSurfaceRef = useRef(null);
const wasMobileOpen = useRef(false);
const isControlled = controlledOpen !== undefined;
const open = controlledOpen ?? uncontrolledOpen;
@@ -134,7 +135,7 @@ export function SidebarProvider({
useEffect(() => {
if (openMobile && !wasMobileOpen.current) {
- const focusDrawer = window.requestAnimationFrame(() => sidebarTriggerRef.current?.focus());
+ const focusDrawer = window.requestAnimationFrame(() => sidebarSurfaceRef.current?.focus());
wasMobileOpen.current = true;
return () => window.cancelAnimationFrame(focusDrawer);
}
@@ -158,7 +159,7 @@ export function SidebarProvider({
isMobile,
toggleSidebar,
setInsetTrigger: (element) => { insetTriggerRef.current = element; },
- setSidebarTrigger: (element) => { sidebarTriggerRef.current = element; },
+ setSidebarSurface: (element) => { sidebarSurfaceRef.current = element; },
};
return (
@@ -176,8 +177,8 @@ export function SidebarProvider({
}
export function Sidebar({ id, className, ...props }: ComponentProps<"aside">) {
- const { isMobile, open, openMobile, setOpenMobile } = useSidebar();
- const sidebar = ;
+ const { isMobile, open, openMobile, setOpenMobile, setSidebarSurface } = useSidebarContext();
+ const sidebar = ;
return <>
{sidebar}
{isMobile && openMobile ?