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({
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 =