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>
<ScrollArea className="h-[calc(100vh-64px)]">
<SidebarGroup>
<SidebarGroupLabel>Collections (Ctrl + /)</SidebarGroupLabel>
<SidebarGroupLabel>Collections</SidebarGroupLabel>
<SidebarMenu>
{collections.map(renderCollectionItem)}
</SidebarMenu>
TestMasterUI/src/components/api-tester/MainContentArea.jsx
+3 -4
View File
@@ -173,7 +173,7 @@ const ScenarioMode = ({
};
return (
<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">
<ScenarioNavigation
contextPath="/"
@@ -184,10 +184,9 @@ const ScenarioMode = ({
</div>
<div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden">
<ScenarioEditor/>
</div>
</SidebarProvider>
<div className="navigation-sidebar min-w-[0px] border-l bg-gray-100">
<SidebarProvider cookieName="sidebar-right:state" shortcut="/">
<APINavigation
contextPath="/"
side="right"
@@ -195,8 +194,8 @@ const ScenarioMode = ({
isApiMode={isApiMode}
onToggleMode={onToggleMode}
/>
</SidebarProvider>
</div>
</SidebarProvider>
</div>
);
};
TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
+1 -1
View File
@@ -102,7 +102,7 @@ const ScenarioEditor = () => {
}, []);
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 (
TestMasterUI/src/components/api-tester/ScenarioNavigation.jsx
+1 -1
View File
@@ -140,7 +140,7 @@ const ScenarioNavigation = ({
<SidebarContent>
<ScrollArea className="h-[calc(100%-64px)]">
<SidebarGroup>
<SidebarGroupLabel>Scenarios (Ctrl + .)</SidebarGroupLabel>
<SidebarGroupLabel>Scenarios</SidebarGroupLabel>
<SidebarMenu>
{scenarios.map(renderScenarioItem)}
</SidebarMenu>
TestMasterUI/src/components/ui/sidebar.jsx
+330 -240
View File
@@ -1,190 +1,265 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import { PanelLeft } from "lucide-react"
import { PanelLeft } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
TooltipProvider,
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_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
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() {
const context = React.useContext(SidebarContext)
// ─── GLOBAL CONTEXT (for state of both sidebars) ─────────────────────────────
const SidebarContext = React.createContext(null);
export function useSidebar() {
const context = React.useContext(SidebarContext);
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((
{
defaultOpen = true,
open: openProp,
onOpenChange: setOpenProp,
// ─── SIDEBAR PROVIDER ─────────────────────────────────────────────────────────
const SidebarProvider = React.forwardRef(({
// allow separate default values and control for left/right
defaultOpenLeft = true,
defaultOpenRight = true,
openLeft: openLeftProp,
openRight: openRightProp,
onOpenChangeLeft: setOpenLeftProp,
onOpenChangeRight: setOpenRightProp,
cookieNameLeft = "sidebar:left:state",
cookieNameRight = "sidebar:right:state",
className,
style,
children,
cookieName,
shortcut,
shortcut, // (optional; we use our own constants below)
...props
},
ref
) => {
const isMobile = useIsMobile()
const [openMobile, setOpenMobile] = React.useState(false)
}, ref) => {
const isMobile = useIsMobile();
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = React.useState(defaultOpen)
const open = openProp ?? _open
const setOpen = React.useCallback((value) => {
const openState = typeof value === "function" ? value(open) : value
if (setOpenProp) {
setOpenProp(openState)
// Mobile states for left and right sidebars.
const [openMobileLeft, setOpenMobileLeft] = React.useState(false);
const [openMobileRight, setOpenMobileRight] = React.useState(false);
// Desktop state for left sidebar.
const [_openLeft, _setOpenLeft] = React.useState(defaultOpenLeft);
const openLeft = openLeftProp ?? _openLeft;
const setOpenLeft = React.useCallback((value) => {
const openState = typeof value === "function" ? value(openLeft) : value;
if (setOpenLeftProp) {
setOpenLeftProp(openState);
} 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.
document.cookie = `${cookieName}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
}, [setOpenProp, open])
// Desktop state for right sidebar.
const [_openRight, _setOpenRight] = React.useState(defaultOpenRight);
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 toggleSidebar = React.useCallback(() => {
const toggleSidebarLeft = React.useCallback(() => {
return isMobile
? setOpenMobile((open) => !open)
: setOpen((open) => !open);
}, [isMobile, setOpen, setOpenMobile])
? setOpenMobileLeft((open) => !open)
: setOpenLeft((open) => !open);
}, [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(() => {
const handleKeyDown = (event) => {
if (
event.key === shortcut &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault()
toggleSidebar()
if (event.metaKey || event.ctrlKey) {
if (event.key === SIDEBAR_LEFT_KEYBOARD_SHORTCUT) {
event.preventDefault();
toggleSidebarLeft();
} else if (event.key === SIDEBAR_RIGHT_KEYBOARD_SHORTCUT) {
event.preventDefault();
toggleSidebarRight();
}
}
window.addEventListener("keydown", handleKeyDown)
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar])
// 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"
}, [toggleSidebarLeft, toggleSidebarRight]);
const contextValue = React.useMemo(() => ({
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar,
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar])
openLeft,
setOpenLeft,
openRight,
setOpenRight,
openMobileLeft,
setOpenMobileLeft,
openMobileRight,
setOpenMobileRight,
toggleSidebarLeft,
toggleSidebarRight,
stateLeft,
stateRight,
}), [
isMobile,
openLeft,
setOpenLeft,
openRight,
setOpenRight,
openMobileLeft,
setOpenMobileLeft,
openMobileRight,
setOpenMobileRight,
toggleSidebarLeft,
toggleSidebarRight,
stateLeft,
stateRight,
]);
return (
(<SidebarContext.Provider value={contextValue}>
<SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}>
<div
style={
{
style={{
"--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style
}
}
...style,
}}
className={cn(
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
className
)}
ref={ref}
{...props}>
{...props}
>
{children}
</div>
</TooltipProvider>
</SidebarContext.Provider>)
</SidebarContext.Provider>
);
})
SidebarProvider.displayName = "SidebarProvider"
});
SidebarProvider.displayName = "SidebarProvider";
const Sidebar = React.forwardRef((
{
// ─── SIDEBAR COMPONENT ───────────────────────────────────────────────────────
const Sidebar = React.forwardRef(({
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
className,
children,
...props
},
ref
) => {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
}, ref) => {
const {
isMobile,
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") {
return (
(<div
<SidebarInstanceContext.Provider value={{ side, state: currentState }}>
<div
className={cn(
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
className
)}
ref={ref}
{...props}>
{...props}
>
{children}
</div>)
</div>
</SidebarInstanceContext.Provider>
);
}
if (isMobile) {
const openMobile = side === "left" ? openMobileLeft : openMobileRight;
const setOpenMobile = side === "left" ? setOpenMobileLeft : setOpenMobileRight;
return (
(<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SidebarInstanceContext.Provider value={{ side, state: currentState }}>
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
}
}
side={side}>
style={{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
}}
side={side}
>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>)
</Sheet>
</SidebarInstanceContext.Provider>
);
}
return (
(<div
<SidebarInstanceContext.Provider value={{ side, state: currentState }}>
<div
ref={ref}
className="group peer hidden md:block text-sidebar-foreground"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-state={currentState}
data-collapsible={currentState === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}>
{/* This is what handles the sidebar gap on desktop */}
data-side={side}
>
{/* Sidebar gap */}
<div
className={cn(
"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"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
)} />
)}
/>
<div
className={cn(
"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[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"
? "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",
className
)}
{...props}>
{...props}
>
<div
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}
</div>
</div>
</div>)
</div>
</SidebarInstanceContext.Provider>
);
})
Sidebar.displayName = "Sidebar"
});
Sidebar.displayName = "Sidebar";
const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
const { toggleSidebar } = useSidebar()
// ─── SIDEBAR TRIGGER (and similar components) ───────────────────────────────
const SidebarTrigger = React.forwardRef(({ side = "left", className, onClick, ...props }, ref) => {
const { toggleSidebarLeft, toggleSidebarRight } = useSidebar();
const toggleSidebar = side === "left" ? toggleSidebarLeft : toggleSidebarRight;
return (
(<Button
<Button
ref={ref}
data-sidebar="trigger"
variant="ghost"
size="icon"
className={cn("h-7 w-7", className)}
onClick={(event) => {
onClick?.(event)
toggleSidebar()
onClick?.(event);
toggleSidebar();
}}
{...props}>
<PanelLeft />
{...props}
>
{side === "left" ? <PanelLeft /> : <PanelLeft className="rotate-180" />}
<span className="sr-only">Toggle Sidebar</span>
</Button>)
</Button>
);
})
SidebarTrigger.displayName = "SidebarTrigger"
const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
const { toggleSidebar } = useSidebar()
});
SidebarTrigger.displayName = "SidebarTrigger";
const SidebarRail = React.forwardRef(({ side = "left", className, ...props }, ref) => {
const { toggleSidebarLeft, toggleSidebarRight } = useSidebar();
const toggleSidebar = side === "left" ? toggleSidebarLeft : toggleSidebarRight;
return (
(<button
<button
ref={ref}
data-sidebar="rail"
aria-label="Toggle Sidebar"
@@ -252,110 +333,117 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
onClick={toggleSidebar}
title="Toggle Sidebar"
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",
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]: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-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
"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",
side === "left"
? "[[data-sidebar][data-side=left]_&]:cursor-w-resize"
: "[[data-sidebar][data-side=right]_&]:cursor-e-resize",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarRail.displayName = "SidebarRail"
});
SidebarRail.displayName = "SidebarRail";
// ─── REMAINING SIDEBAR SUB-COMPONENTS (Inset, Input, Header, etc.) ─────────
const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
return (
(<main
<main
ref={ref}
className={cn(
"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",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarInset.displayName = "SidebarInset"
});
SidebarInset.displayName = "SidebarInset";
const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
return (
(<Input
<Input
ref={ref}
data-sidebar="input"
className={cn(
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarInput.displayName = "SidebarInput"
});
SidebarInput.displayName = "SidebarInput";
const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
return (
(<div
<div
ref={ref}
data-sidebar="header"
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) => {
return (
(<div
<div
ref={ref}
data-sidebar="footer"
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) => {
return (
(<Separator
<Separator
ref={ref}
data-sidebar="separator"
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) => {
return (
(<div
<div
ref={ref}
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarContent.displayName = "SidebarContent"
});
SidebarContent.displayName = "SidebarContent";
const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
return (
(<div
<div
ref={ref}
data-sidebar="group"
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 Comp = asChild ? Slot : "div"
const Comp = asChild ? Slot : "div";
return (
(<Comp
<Comp
ref={ref}
data-sidebar="group-label"
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",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"
});
SidebarGroupLabel.displayName = "SidebarGroupLabel";
const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : "button";
return (
(<Comp
<Comp
ref={ref}
data-sidebar="group-action"
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",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarGroupAction.displayName = "SidebarGroupAction"
});
SidebarGroupAction.displayName = "SidebarGroupAction";
const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="group-content"
className={cn("w-full text-sm", className)}
{...props} />
))
SidebarGroupContent.displayName = "SidebarGroupContent"
{...props}
/>
));
SidebarGroupContent.displayName = "SidebarGroupContent";
const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu"
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props} />
))
SidebarMenu.displayName = "SidebarMenu"
{...props}
/>
));
SidebarMenu.displayName = "SidebarMenu";
const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (
<li
ref={ref}
data-sidebar="menu-item"
className={cn("group/menu-item relative", className)}
{...props} />
))
SidebarMenuItem.displayName = "SidebarMenuItem"
{...props}
/>
));
SidebarMenuItem.displayName = "SidebarMenuItem";
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",
@@ -434,10 +525,9 @@ const sidebarMenuButtonVariants = cva(
size: "default",
},
}
)
);
const SidebarMenuButton = React.forwardRef((
{
const SidebarMenuButton = React.forwardRef(({
asChild = false,
isActive = false,
variant = "default",
@@ -445,11 +535,11 @@ const SidebarMenuButton = React.forwardRef((
tooltip,
className,
...props
},
ref
) => {
const Comp = asChild ? Slot : "button"
const { isMobile, state } = useSidebar()
}, ref) => {
const Comp = asChild ? Slot : "button";
// Use the global context for mobile info and the local sidebar state for collapse info.
const { isMobile } = useSidebar();
const { state } = useSidebarInstance();
const button = (
<Comp
@@ -458,42 +548,42 @@ const SidebarMenuButton = React.forwardRef((
data-size={size}
data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props} />
)
{...props}
/>
);
if (!tooltip) {
return button
return button;
}
if (typeof tooltip === "string") {
tooltip = {
children: tooltip,
}
};
}
return (
(<Tooltip>
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent
side="right"
align="center"
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 Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : "button";
return (
(<Comp
<Comp
ref={ref}
data-sidebar="menu-action"
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",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"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",
className
)}
{...props} />)
{...props}
/>
);
})
SidebarMenuAction.displayName = "SidebarMenuAction"
});
SidebarMenuAction.displayName = "SidebarMenuAction";
const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (
<div
@@ -521,37 +612,36 @@ const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"
{...props}
/>
));
SidebarMenuBadge.displayName = "SidebarMenuBadge";
const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
}, [])
}, []);
return (
(<div
<div
ref={ref}
data-sidebar="menu-skeleton"
className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
{...props}>
{...props}
>
{showIcon && (
<Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
)}
<Skeleton
className="h-4 flex-1 max-w-[--skeleton-width]"
data-sidebar="menu-skeleton-text"
style={
{
"--skeleton-width": width
}
} />
</div>)
style={{
"--skeleton-width": width,
}}
/>
</div>
);
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
});
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (
<ul
@@ -562,19 +652,18 @@ const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />
))
SidebarMenuSub.displayName = "SidebarMenuSub"
{...props}
/>
));
SidebarMenuSub.displayName = "SidebarMenuSub";
const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
const SidebarMenuSubButton = React.forwardRef(
({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
const SidebarMenuSubItem = React.forwardRef((props, ref) => <li ref={ref} {...props} />);
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";
return (
(<Comp
<Comp
ref={ref}
data-sidebar="menu-sub-button"
data-size={size}
@@ -587,11 +676,11 @@ const SidebarMenuSubButton = React.forwardRef(
"group-data-[collapsible=icon]:hidden",
className
)}
{...props} />)
{...props}
/>
);
}
)
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
});
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
export {
Sidebar,
@@ -617,5 +706,6 @@ export {
SidebarRail,
SidebarSeparator,
SidebarTrigger,
useSidebar,
}
// useSidebar,
// useSidebarInstance,
};