djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar 수정

Browse Source
This commit is contained in:
현성필
2025-02-05 11:03:13 +09:00
parent 54bf2a897b
commit 58b7c43be5
5 changed files with 563 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TestMasterUI/src/components/api-tester/APINavigation.jsx
+1 -1
View File
@@ -240,7 +240,7 @@ const APINavigation = ({
<SidebarContent> <SidebarContent>
<ScrollArea className="h-[calc(100vh-64px)]"> <ScrollArea className="h-[calc(100vh-64px)]">
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel>Collections (Ctrl + /)</SidebarGroupLabel> <SidebarGroupLabel>Collections</SidebarGroupLabel>
<SidebarMenu> <SidebarMenu>
{collections.map(renderCollectionItem)} {collections.map(renderCollectionItem)}
</SidebarMenu> </SidebarMenu>
TestMasterUI/src/components/api-tester/MainContentArea.jsx
+3 -4
View File
@@ -173,7 +173,7 @@ const ScenarioMode = ({
}; };
return ( return (
<div className="scenario-mode flex flex-1 h-[calc(100vh-57px)]"> <div className="scenario-mode flex flex-1 h-[calc(100vh-57px)]">
<SidebarProvider cookieName="sidebar-left:state" shortcut="."> <SidebarProvider>
<div className="navigation-sidebar min-w-[0px] border-r bg-gray-100"> <div className="navigation-sidebar min-w-[0px] border-r bg-gray-100">
<ScenarioNavigation <ScenarioNavigation
contextPath="/" contextPath="/"
@@ -184,10 +184,9 @@ const ScenarioMode = ({
</div> </div>
<div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden"> <div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden">
<ScenarioEditor/> <ScenarioEditor/>
</div> </div>
</SidebarProvider>
<div className="navigation-sidebar min-w-[0px] border-l bg-gray-100"> <div className="navigation-sidebar min-w-[0px] border-l bg-gray-100">
<SidebarProvider cookieName="sidebar-right:state" shortcut="/">
<APINavigation <APINavigation
contextPath="/" contextPath="/"
side="right" side="right"
@@ -195,8 +194,8 @@ const ScenarioMode = ({
isApiMode={isApiMode} isApiMode={isApiMode}
onToggleMode={onToggleMode} onToggleMode={onToggleMode}
/> />
</SidebarProvider>
</div> </div>
</SidebarProvider>
</div> </div>
); );
}; };
TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
+1 -1
View File
@@ -102,7 +102,7 @@ const ScenarioEditor = () => {
}, []); }, []);
if (!currentFlowData) { if (!currentFlowData) {
return <div className="flex items-center justify-center h-full">왼쪽에서 시나리오를 선택해 주세요 (Ctrl + .)</div>; return <div className="flex items-center justify-center h-full">왼쪽에서 시나리오를 선택해 주세요</div>;
} }
return ( return (
TestMasterUI/src/components/api-tester/ScenarioNavigation.jsx
+1 -1
View File
@@ -140,7 +140,7 @@ const ScenarioNavigation = ({
<SidebarContent> <SidebarContent>
<ScrollArea className="h-[calc(100%-64px)]"> <ScrollArea className="h-[calc(100%-64px)]">
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel>Scenarios (Ctrl + .)</SidebarGroupLabel> <SidebarGroupLabel>Scenarios</SidebarGroupLabel>
<SidebarMenu> <SidebarMenu>
{scenarios.map(renderScenarioItem)} {scenarios.map(renderScenarioItem)}
</SidebarMenu> </SidebarMenu>
TestMasterUI/src/components/ui/sidebar.jsx
+330 -240
View File
@@ -1,190 +1,265 @@
import * as React from "react" import * as React from "react";
import { Slot } from "@radix-ui/react-slot" import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority"; import { cva } from "class-variance-authority";
import { PanelLeft } from "lucide-react" import { PanelLeft } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile" import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator";
import { Sheet, SheetContent } from "@/components/ui/sheet" import { Sheet, SheetContent } from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton" import { Skeleton } from "@/components/ui/skeleton";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip" } from "@/components/ui/tooltip";
const SIDEBAR_COOKIE_NAME = "sidebar:state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
const SidebarContext = React.createContext(null) // Use different keyboard shortcuts for left and right sidebars.
const SIDEBAR_LEFT_KEYBOARD_SHORTCUT = ".";
const SIDEBAR_RIGHT_KEYBOARD_SHORTCUT = "/";
function useSidebar() { // ─── GLOBAL CONTEXT (for state of both sidebars) ─────────────────────────────
const context = React.useContext(SidebarContext)
const SidebarContext = React.createContext(null);
export function useSidebar() {
const context = React.useContext(SidebarContext);
if (!context) { if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.") throw new Error("useSidebar must be used within a SidebarProvider.");
}
return context;
} }
return context // ─── LOCAL INSTANCE CONTEXT (for the current sidebar instance) ─────────────
const SidebarInstanceContext = React.createContext(null);
export function useSidebarInstance() {
const context = React.useContext(SidebarInstanceContext);
if (!context) {
throw new Error("useSidebarInstance must be used within a Sidebar component.");
}
return context;
} }
const SidebarProvider = React.forwardRef(( // ─── SIDEBAR PROVIDER ─────────────────────────────────────────────────────────
{
defaultOpen = true, const SidebarProvider = React.forwardRef(({
open: openProp, // allow separate default values and control for left/right
onOpenChange: setOpenProp, defaultOpenLeft = true,
defaultOpenRight = true,
openLeft: openLeftProp,
openRight: openRightProp,
onOpenChangeLeft: setOpenLeftProp,
onOpenChangeRight: setOpenRightProp,
cookieNameLeft = "sidebar:left:state",
cookieNameRight = "sidebar:right:state",
className, className,
style, style,
children, children,
cookieName, shortcut, // (optional; we use our own constants below)
shortcut,
...props ...props
}, }, ref) => {
ref const isMobile = useIsMobile();
) => {
const isMobile = useIsMobile()
const [openMobile, setOpenMobile] = React.useState(false)
// This is the internal state of the sidebar. // Mobile states for left and right sidebars.
// We use openProp and setOpenProp for control from outside the component. const [openMobileLeft, setOpenMobileLeft] = React.useState(false);
const [_open, _setOpen] = React.useState(defaultOpen) const [openMobileRight, setOpenMobileRight] = React.useState(false);
const open = openProp ?? _open
const setOpen = React.useCallback((value) => { // Desktop state for left sidebar.
const openState = typeof value === "function" ? value(open) : value const [_openLeft, _setOpenLeft] = React.useState(defaultOpenLeft);
if (setOpenProp) { const openLeft = openLeftProp ?? _openLeft;
setOpenProp(openState) const setOpenLeft = React.useCallback((value) => {
const openState = typeof value === "function" ? value(openLeft) : value;
if (setOpenLeftProp) {
setOpenLeftProp(openState);
} else { } else {
_setOpen(openState) _setOpenLeft(openState);
} }
document.cookie = `${cookieNameLeft}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
}, [setOpenLeftProp, openLeft, cookieNameLeft]);
// This sets the cookie to keep the sidebar state. // Desktop state for right sidebar.
document.cookie = `${cookieName}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` const [_openRight, _setOpenRight] = React.useState(defaultOpenRight);
}, [setOpenProp, open]) const openRight = openRightProp ?? _openRight;
const setOpenRight = React.useCallback((value) => {
const openState = typeof value === "function" ? value(openRight) : value;
if (setOpenRightProp) {
setOpenRightProp(openState);
} else {
_setOpenRight(openState);
}
document.cookie = `${cookieNameRight}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
}, [setOpenRightProp, openRight, cookieNameRight]);
// Helper to toggle the sidebar. const toggleSidebarLeft = React.useCallback(() => {
const toggleSidebar = React.useCallback(() => {
return isMobile return isMobile
? setOpenMobile((open) => !open) ? setOpenMobileLeft((open) => !open)
: setOpen((open) => !open); : setOpenLeft((open) => !open);
}, [isMobile, setOpen, setOpenMobile]) }, [isMobile, setOpenLeft, setOpenMobileLeft]);
// Adds a keyboard shortcut to toggle the sidebar. const toggleSidebarRight = React.useCallback(() => {
return isMobile
? setOpenMobileRight((open) => !open)
: setOpenRight((open) => !open);
}, [isMobile, setOpenRight, setOpenMobileRight]);
const stateLeft = openLeft ? "expanded" : "collapsed";
const stateRight = openRight ? "expanded" : "collapsed";
// Keyboard shortcuts (Ctrl/Cmd + key) to toggle each sidebar.
React.useEffect(() => { React.useEffect(() => {
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if ( if (event.metaKey || event.ctrlKey) {
event.key === shortcut && if (event.key === SIDEBAR_LEFT_KEYBOARD_SHORTCUT) {
(event.metaKey || event.ctrlKey) event.preventDefault();
) { toggleSidebarLeft();
event.preventDefault() } else if (event.key === SIDEBAR_RIGHT_KEYBOARD_SHORTCUT) {
toggleSidebar() event.preventDefault();
toggleSidebarRight();
} }
} }
};
window.addEventListener("keydown", handleKeyDown) window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar]) }, [toggleSidebarLeft, toggleSidebarRight]);
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed"
const contextValue = React.useMemo(() => ({ const contextValue = React.useMemo(() => ({
state,
open,
setOpen,
isMobile, isMobile,
openMobile, openLeft,
setOpenMobile, setOpenLeft,
toggleSidebar, openRight,
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]) setOpenRight,
openMobileLeft,
setOpenMobileLeft,
openMobileRight,
setOpenMobileRight,
toggleSidebarLeft,
toggleSidebarRight,
stateLeft,
stateRight,
}), [
isMobile,
openLeft,
setOpenLeft,
openRight,
setOpenRight,
openMobileLeft,
setOpenMobileLeft,
openMobileRight,
setOpenMobileRight,
toggleSidebarLeft,
toggleSidebarRight,
stateLeft,
stateRight,
]);
return ( return (
(<SidebarContext.Provider value={contextValue}> <SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<div <div
style={ style={{
{
"--sidebar-width": SIDEBAR_WIDTH, "--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON, "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style ...style,
} }}
}
className={cn( className={cn(
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
className className
)} )}
ref={ref} ref={ref}
{...props}> {...props}
>
{children} {children}
</div> </div>
</TooltipProvider> </TooltipProvider>
</SidebarContext.Provider>) </SidebarContext.Provider>
); );
}) });
SidebarProvider.displayName = "SidebarProvider" SidebarProvider.displayName = "SidebarProvider";
const Sidebar = React.forwardRef(( // ─── SIDEBAR COMPONENT ───────────────────────────────────────────────────────
{
const Sidebar = React.forwardRef(({
side = "left", side = "left",
variant = "sidebar", variant = "sidebar",
collapsible = "offcanvas", collapsible = "offcanvas",
className, className,
children, children,
...props ...props
}, }, ref) => {
ref const {
) => { isMobile,
const { isMobile, state, openMobile, setOpenMobile } = useSidebar() stateLeft,
stateRight,
openMobileLeft,
openMobileRight,
setOpenMobileLeft,
setOpenMobileRight,
} = useSidebar();
// Choose the appropriate state for this sidebar instance.
const currentState = side === "left" ? stateLeft : stateRight;
// Wrap the sidebar content in a local context provider so that child components
// can easily determine (for example) if their parent sidebar is collapsed.
if (collapsible === "none") { if (collapsible === "none") {
return ( return (
(<div <SidebarInstanceContext.Provider value={{ side, state: currentState }}>
<div
className={cn( className={cn(
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
className className
)} )}
ref={ref} ref={ref}
{...props}> {...props}
>
{children} {children}
</div>) </div>
</SidebarInstanceContext.Provider>
); );
} }
if (isMobile) { if (isMobile) {
const openMobile = side === "left" ? openMobileLeft : openMobileRight;
const setOpenMobile = side === "left" ? setOpenMobileLeft : setOpenMobileRight;
return ( return (
(<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}> <SidebarInstanceContext.Provider value={{ side, state: currentState }}>
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent <SheetContent
data-sidebar="sidebar" data-sidebar="sidebar"
data-mobile="true" data-mobile="true"
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
style={ style={{
{ "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
"--sidebar-width": SIDEBAR_WIDTH_MOBILE }}
} side={side}
} >
side={side}>
<div className="flex h-full w-full flex-col">{children}</div> <div className="flex h-full w-full flex-col">{children}</div>
</SheetContent> </SheetContent>
</Sheet>) </Sheet>
</SidebarInstanceContext.Provider>
); );
} }
return ( return (
(<div <SidebarInstanceContext.Provider value={{ side, state: currentState }}>
<div
ref={ref} ref={ref}
className="group peer hidden md:block text-sidebar-foreground" className="group peer hidden md:block text-sidebar-foreground"
data-state={state} data-state={currentState}
data-collapsible={state === "collapsed" ? collapsible : ""} data-collapsible={currentState === "collapsed" ? collapsible : ""}
data-variant={variant} data-variant={variant}
data-side={side}> data-side={side}
{/* This is what handles the sidebar gap on desktop */} >
{/* Sidebar gap */}
<div <div
className={cn( className={cn(
"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear", "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
@@ -193,58 +268,64 @@ const Sidebar = React.forwardRef((
variant === "floating" || variant === "inset" variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
)} /> )}
/>
<div <div
className={cn( className={cn(
"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex", "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
side === "left" side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset" variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l", : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
className className
)} )}
{...props}> {...props}
>
<div <div
data-sidebar="sidebar" data-sidebar="sidebar"
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"> className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
>
{children} {children}
</div> </div>
</div> </div>
</div>) </div>
</SidebarInstanceContext.Provider>
); );
}) });
Sidebar.displayName = "Sidebar" Sidebar.displayName = "Sidebar";
const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => { // ─── SIDEBAR TRIGGER (and similar components) ───────────────────────────────
const { toggleSidebar } = useSidebar()
const SidebarTrigger = React.forwardRef(({ side = "left", className, onClick, ...props }, ref) => {
const { toggleSidebarLeft, toggleSidebarRight } = useSidebar();
const toggleSidebar = side === "left" ? toggleSidebarLeft : toggleSidebarRight;
return ( return (
(<Button <Button
ref={ref} ref={ref}
data-sidebar="trigger" data-sidebar="trigger"
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn("h-7 w-7", className)} className={cn("h-7 w-7", className)}
onClick={(event) => { onClick={(event) => {
onClick?.(event) onClick?.(event);
toggleSidebar() toggleSidebar();
}} }}
{...props}> {...props}
<PanelLeft /> >
{side === "left" ? <PanelLeft /> : <PanelLeft className="rotate-180" />}
<span className="sr-only">Toggle Sidebar</span> <span className="sr-only">Toggle Sidebar</span>
</Button>) </Button>
); );
}) });
SidebarTrigger.displayName = "SidebarTrigger" SidebarTrigger.displayName = "SidebarTrigger";
const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
const { toggleSidebar } = useSidebar()
const SidebarRail = React.forwardRef(({ side = "left", className, ...props }, ref) => {
const { toggleSidebarLeft, toggleSidebarRight } = useSidebar();
const toggleSidebar = side === "left" ? toggleSidebarLeft : toggleSidebarRight;
return ( return (
(<button <button
ref={ref} ref={ref}
data-sidebar="rail" data-sidebar="rail"
aria-label="Toggle Sidebar" aria-label="Toggle Sidebar"
@@ -252,110 +333,117 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
onClick={toggleSidebar} onClick={toggleSidebar}
title="Toggle Sidebar" title="Toggle Sidebar"
className={cn( className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border",
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize", side === "left"
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", ? "[[data-sidebar][data-side=left]_&]:cursor-w-resize"
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar", : "[[data-sidebar][data-side=right]_&]:cursor-e-resize",
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarRail.displayName = "SidebarRail" SidebarRail.displayName = "SidebarRail";
// ─── REMAINING SIDEBAR SUB-COMPONENTS (Inset, Input, Header, etc.) ─────────
const SidebarInset = React.forwardRef(({ className, ...props }, ref) => { const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<main <main
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex min-h-svh flex-1 flex-col bg-background", "relative flex min-h-svh flex-1 flex-col bg-background",
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow", "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarInset.displayName = "SidebarInset" SidebarInset.displayName = "SidebarInset";
const SidebarInput = React.forwardRef(({ className, ...props }, ref) => { const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<Input <Input
ref={ref} ref={ref}
data-sidebar="input" data-sidebar="input"
className={cn( className={cn(
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarInput.displayName = "SidebarInput" SidebarInput.displayName = "SidebarInput";
const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => { const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<div <div
ref={ref} ref={ref}
data-sidebar="header" data-sidebar="header"
className={cn("flex flex-col gap-2 p-2", className)} className={cn("flex flex-col gap-2 p-2", className)}
{...props} />) {...props}
/>
); );
}) });
SidebarHeader.displayName = "SidebarHeader" SidebarHeader.displayName = "SidebarHeader";
const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => { const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<div <div
ref={ref} ref={ref}
data-sidebar="footer" data-sidebar="footer"
className={cn("flex flex-col gap-2 p-2", className)} className={cn("flex flex-col gap-2 p-2", className)}
{...props} />) {...props}
/>
); );
}) });
SidebarFooter.displayName = "SidebarFooter" SidebarFooter.displayName = "SidebarFooter";
const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => { const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<Separator <Separator
ref={ref} ref={ref}
data-sidebar="separator" data-sidebar="separator"
className={cn("mx-2 w-auto bg-sidebar-border", className)} className={cn("mx-2 w-auto bg-sidebar-border", className)}
{...props} />) {...props}
/>
); );
}) });
SidebarSeparator.displayName = "SidebarSeparator" SidebarSeparator.displayName = "SidebarSeparator";
const SidebarContent = React.forwardRef(({ className, ...props }, ref) => { const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<div <div
ref={ref} ref={ref}
data-sidebar="content" data-sidebar="content"
className={cn( className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarContent.displayName = "SidebarContent" SidebarContent.displayName = "SidebarContent";
const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => { const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
return ( return (
(<div <div
ref={ref} ref={ref}
data-sidebar="group" data-sidebar="group"
className={cn("relative flex w-full min-w-0 flex-col p-2", className)} className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props} />) {...props}
/>
); );
}) });
SidebarGroup.displayName = "SidebarGroup" SidebarGroup.displayName = "SidebarGroup";
const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => { const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "div" const Comp = asChild ? Slot : "div";
return ( return (
(<Comp <Comp
ref={ref} ref={ref}
data-sidebar="group-label" data-sidebar="group-label"
className={cn( className={cn(
@@ -363,56 +451,59 @@ const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...pro
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarGroupLabel.displayName = "SidebarGroupLabel" SidebarGroupLabel.displayName = "SidebarGroupLabel";
const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => { const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
(<Comp <Comp
ref={ref} ref={ref}
data-sidebar="group-action" data-sidebar="group-action"
className={cn( className={cn(
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden", "after:absolute after:-inset-2 after:md:hidden",
"group-data-[collapsible=icon]:hidden", "group-data-[collapsible=icon]:hidden",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarGroupAction.displayName = "SidebarGroupAction" SidebarGroupAction.displayName = "SidebarGroupAction";
const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => ( const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (
<div <div
ref={ref} ref={ref}
data-sidebar="group-content" data-sidebar="group-content"
className={cn("w-full text-sm", className)} className={cn("w-full text-sm", className)}
{...props} /> {...props}
)) />
SidebarGroupContent.displayName = "SidebarGroupContent" ));
SidebarGroupContent.displayName = "SidebarGroupContent";
const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => ( const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (
<ul <ul
ref={ref} ref={ref}
data-sidebar="menu" data-sidebar="menu"
className={cn("flex w-full min-w-0 flex-col gap-1", className)} className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props} /> {...props}
)) />
SidebarMenu.displayName = "SidebarMenu" ));
SidebarMenu.displayName = "SidebarMenu";
const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => ( const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (
<li <li
ref={ref} ref={ref}
data-sidebar="menu-item" data-sidebar="menu-item"
className={cn("group/menu-item relative", className)} className={cn("group/menu-item relative", className)}
{...props} /> {...props}
)) />
SidebarMenuItem.displayName = "SidebarMenuItem" ));
SidebarMenuItem.displayName = "SidebarMenuItem";
const sidebarMenuButtonVariants = cva( const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -434,10 +525,9 @@ const sidebarMenuButtonVariants = cva(
size: "default", size: "default",
}, },
} }
) );
const SidebarMenuButton = React.forwardRef(( const SidebarMenuButton = React.forwardRef(({
{
asChild = false, asChild = false,
isActive = false, isActive = false,
variant = "default", variant = "default",
@@ -445,11 +535,11 @@ const SidebarMenuButton = React.forwardRef((
tooltip, tooltip,
className, className,
...props ...props
}, }, ref) => {
ref const Comp = asChild ? Slot : "button";
) => { // Use the global context for mobile info and the local sidebar state for collapse info.
const Comp = asChild ? Slot : "button" const { isMobile } = useSidebar();
const { isMobile, state } = useSidebar() const { state } = useSidebarInstance();
const button = ( const button = (
<Comp <Comp
@@ -458,42 +548,42 @@ const SidebarMenuButton = React.forwardRef((
data-size={size} data-size={size}
data-active={isActive} data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)} className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props} /> {...props}
) />
);
if (!tooltip) { if (!tooltip) {
return button return button;
} }
if (typeof tooltip === "string") { if (typeof tooltip === "string") {
tooltip = { tooltip = {
children: tooltip, children: tooltip,
} };
} }
return ( return (
(<Tooltip> <Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger> <TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent <TooltipContent
side="right" side="right"
align="center" align="center"
hidden={state !== "collapsed" || isMobile} hidden={state !== "collapsed" || isMobile}
{...tooltip} /> {...tooltip}
</Tooltip>) />
</Tooltip>
); );
}) });
SidebarMenuButton.displayName = "SidebarMenuButton" SidebarMenuButton.displayName = "SidebarMenuButton";
const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => { const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
(<Comp <Comp
ref={ref} ref={ref}
data-sidebar="menu-action" data-sidebar="menu-action"
className={cn( className={cn(
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0", "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden", "after:absolute after:-inset-2 after:md:hidden",
"peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=default]/menu-button:top-1.5",
@@ -503,10 +593,11 @@ const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOn
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
className className
)} )}
{...props} />) {...props}
/>
); );
}) });
SidebarMenuAction.displayName = "SidebarMenuAction" SidebarMenuAction.displayName = "SidebarMenuAction";
const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => ( const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (
<div <div
@@ -521,37 +612,36 @@ const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (
"group-data-[collapsible=icon]:hidden", "group-data-[collapsible=icon]:hidden",
className className
)} )}
{...props} /> {...props}
)) />
SidebarMenuBadge.displayName = "SidebarMenuBadge" ));
SidebarMenuBadge.displayName = "SidebarMenuBadge";
const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => { const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
// Random width between 50 to 90%.
const width = React.useMemo(() => { const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`; return `${Math.floor(Math.random() * 40) + 50}%`;
}, []) }, []);
return ( return (
(<div <div
ref={ref} ref={ref}
data-sidebar="menu-skeleton" data-sidebar="menu-skeleton"
className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)} className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
{...props}> {...props}
>
{showIcon && ( {showIcon && (
<Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" /> <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
)} )}
<Skeleton <Skeleton
className="h-4 flex-1 max-w-[--skeleton-width]" className="h-4 flex-1 max-w-[--skeleton-width]"
data-sidebar="menu-skeleton-text" data-sidebar="menu-skeleton-text"
style={ style={{
{ "--skeleton-width": width,
"--skeleton-width": width }}
} />
} /> </div>
</div>)
); );
}) });
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton" SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => ( const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (
<ul <ul
@@ -562,19 +652,18 @@ const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (
"group-data-[collapsible=icon]:hidden", "group-data-[collapsible=icon]:hidden",
className className
)} )}
{...props} /> {...props}
)) />
SidebarMenuSub.displayName = "SidebarMenuSub" ));
SidebarMenuSub.displayName = "SidebarMenuSub";
const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => <li ref={ref} {...props} />) const SidebarMenuSubItem = React.forwardRef((props, ref) => <li ref={ref} {...props} />);
SidebarMenuSubItem.displayName = "SidebarMenuSubItem" SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
const SidebarMenuSubButton = React.forwardRef(
({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";
return ( return (
(<Comp <Comp
ref={ref} ref={ref}
data-sidebar="menu-sub-button" data-sidebar="menu-sub-button"
data-size={size} data-size={size}
@@ -587,11 +676,11 @@ const SidebarMenuSubButton = React.forwardRef(
"group-data-[collapsible=icon]:hidden", "group-data-[collapsible=icon]:hidden",
className className
)} )}
{...props} />) {...props}
/>
); );
} });
) SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
export { export {
Sidebar, Sidebar,
@@ -617,5 +706,6 @@ export {
SidebarRail, SidebarRail,
SidebarSeparator, SidebarSeparator,
SidebarTrigger, SidebarTrigger,
useSidebar, // useSidebar,
} // useSidebarInstance,
};