xlibs-components/dist/components/ui/sidebar.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { cn } from '../../lib/utils.js';
import { Button } from '../../components/ui/button.js';
const Sidebar = React.forwardRef(({ className, children, collapsed = false, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex h-full w-full flex-col gap-4 border-r bg-white p-4 transition-all duration-300", collapsed ? "w-16" : "w-64", className), "data-collapsed": collapsed, ...props, children: children })));
Sidebar.displayName = "Sidebar";
const SidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex h-[60px] items-center px-2", className), ...props, children: children })));
SidebarHeader.displayName = "SidebarHeader";
const SidebarHeaderTitle = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center text-lg font-semibold", className), ...props, children: children })));
SidebarHeaderTitle.displayName = "SidebarHeaderTitle";
const SidebarHeaderDescription = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props, children: children })));
SidebarHeaderDescription.displayName = "SidebarHeaderDescription";
const SidebarNav = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("nav", { ref: ref, className: cn("flex flex-1 flex-col gap-2", className), ...props, children: children })));
SidebarNav.displayName = "SidebarNav";
const SidebarNavItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col gap-2", className), ...props, children: children })));
SidebarNavItem.displayName = "SidebarNavItem";
const SidebarNavLink = React.forwardRef(({ className, isActive, children, ...props }, ref) => (_jsx("a", { ref: ref, className: cn("flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground", isActive && "bg-accent text-accent-foreground", className), ...props, children: children })));
SidebarNavLink.displayName = "SidebarNavLink";
const SidebarNavButton = React.forwardRef(({ className, isActive, href, children }, ref) => {
    if (href) {
        return (_jsx("a", { href: href, className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground", isActive && "bg-accent text-accent-foreground", className), children: children }));
    }
    return (_jsx("button", { ref: ref, className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground", isActive && "bg-accent text-accent-foreground", className), children: children }));
});
SidebarNavButton.displayName = "SidebarNavButton";
const SidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center gap-2 p-2", className), ...props, children: children })));
SidebarFooter.displayName = "SidebarFooter";
const SidebarGroup = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col gap-4", className), ...props, children: children })));
SidebarGroup.displayName = "SidebarGroup";
const SidebarGroupLabel = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("px-2 text-xs font-semibold", className), ...props, children: children })));
SidebarGroupLabel.displayName = "SidebarGroupLabel";
const SidebarGroupContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col gap-1", className), ...props, children: children })));
SidebarGroupContent.displayName = "SidebarGroupContent";
const SidebarCollapsible = React.forwardRef(({ className, children, open, onOpenChange, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col gap-1", className), ...props, children: children })));
SidebarCollapsible.displayName = "SidebarCollapsible";
const SidebarCollapsibleTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("button", { ref: ref, className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground", className), ...props, children: children })));
SidebarCollapsibleTrigger.displayName = "SidebarCollapsibleTrigger";
const SidebarCollapsibleContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col gap-1", className), ...props, children: children })));
SidebarCollapsibleContent.displayName = "SidebarCollapsibleContent";
const SidebarInset = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col", className), ...props, children: children })));
SidebarInset.displayName = "SidebarInset";
const SidebarTrigger = React.forwardRef(({ className, children, collapsed = false, onCollapsedChange, ...props }, ref) => (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", className: cn("h-6 w-6", className), onClick: () => onCollapsedChange?.(!collapsed), ...props, children: children || (collapsed ? _jsx(PanelLeftOpen, { className: "h-4 w-4" }) : _jsx(PanelLeftClose, { className: "h-4 w-4" })) })));
SidebarTrigger.displayName = "SidebarTrigger";
const SidebarProvider = React.forwardRef(({ className, children, collapsed = false, onCollapsedChange, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex h-full w-full", className), "data-collapsed": collapsed, ...props, children: children })));
SidebarProvider.displayName = "SidebarProvider";
export { Sidebar, SidebarHeader, SidebarHeaderTitle, SidebarHeaderDescription, SidebarNav, SidebarNavItem, SidebarNavLink, SidebarNavButton, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarCollapsible, SidebarCollapsibleTrigger, SidebarCollapsibleContent, SidebarInset, SidebarTrigger, SidebarProvider, };