diff --git a/diplomas/src/components/app-sidebar.jsx b/diplomas/src/components/app-sidebar.jsx index a94a5df..976a38d 100644 --- a/diplomas/src/components/app-sidebar.jsx +++ b/diplomas/src/components/app-sidebar.jsx @@ -57,7 +57,7 @@ export function AppSidebar({ ...props }) { <SidebarMenu> <SidebarMenuItem> <SidebarMenuButton size="lg" asChild> - <div className="flex"> + <div> <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"> <GalleryVerticalEnd className="size-4" /> </div> diff --git a/diplomas/src/components/ui/sidebar.jsx b/diplomas/src/components/ui/sidebar.jsx index 4192b68..4f40eeb 100644 --- a/diplomas/src/components/ui/sidebar.jsx +++ b/diplomas/src/components/ui/sidebar.jsx @@ -251,6 +251,31 @@ function SidebarTrigger({ className, onClick, ...props }) { ); } +function SidebarRail({ className, ...props }) { + const { toggleSidebar } = useSidebar(); + + return ( + <button + data-sidebar="rail" + data-slot="sidebar-rail" + aria-label="Toggle Sidebar" + tabIndex={-1} + onClick={toggleSidebar} + title="Toggle Sidebar" + className={cn( + "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", + "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", + "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", + "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", + "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", + "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", + className + )} + {...props} + /> + ); +} + function SidebarInset({ className, ...props }) { return ( <main