| 1 |
1eb203e |
Mrdn |
2y ago |
import { FC, PropsWithChildren } from "react"; |
| 2 |
1eb203e |
Mrdn |
2y ago |
import { SidebarContext } from "./sidebar-provider" |
| 3 |
1eb203e |
Mrdn |
2y ago |
import { SidebarItemGroup } from "./types" |
| 4 |
1eb203e |
Mrdn |
2y ago |
import { VariantProps, cva } from "class-variance-authority" |
| 5 |
1eb203e |
Mrdn |
2y ago |
import { cn } from "@marzneshin/utils"; |
| 6 |
1eb203e |
Mrdn |
2y ago |
import { SidebarHeader } from "./sidebar-header"; |
| 7 |
1eb203e |
Mrdn |
2y ago |
import { SidebarFooter } from "./sidebar-footer"; |
| 8 |
1eb203e |
Mrdn |
2y ago |
import { SidebarBody } from "./sidebar-body"; |
| 9 |
1eb203e |
Mrdn |
2y ago |
import { SidebarItem } from "./sidebar-item"; |
| 10 |
1eb203e |
Mrdn |
2y ago |
import { SidebarGroup } from "./sidebar-group"; |
| 11 |
1eb203e |
Mrdn |
2y ago |
|
| 12 |
1eb203e |
Mrdn |
2y ago |
const sidebarVariants = cva("flex flex-col justify-between h-full w-full", { |
| 13 |
1eb203e |
Mrdn |
2y ago |
variants: { |
| 14 |
1eb203e |
Mrdn |
2y ago |
variant: { |
| 15 |
1eb203e |
Mrdn |
2y ago |
default: "" |
| 16 |
1eb203e |
Mrdn |
2y ago |
} |
| 17 |
1eb203e |
Mrdn |
2y ago |
} |
| 18 |
1eb203e |
Mrdn |
2y ago |
}); |
| 19 |
1eb203e |
Mrdn |
2y ago |
|
| 20 |
1eb203e |
Mrdn |
2y ago |
interface ContentComposition { |
| 21 |
1eb203e |
Mrdn |
2y ago |
Header: typeof SidebarHeader; |
| 22 |
1eb203e |
Mrdn |
2y ago |
Footer: typeof SidebarFooter; |
| 23 |
1eb203e |
Mrdn |
2y ago |
Body: typeof SidebarBody; |
| 24 |
1eb203e |
Mrdn |
2y ago |
Group: typeof SidebarGroup; |
| 25 |
1eb203e |
Mrdn |
2y ago |
Item: typeof SidebarItem; |
| 26 |
1eb203e |
Mrdn |
2y ago |
} |
| 27 |
1eb203e |
Mrdn |
2y ago |
|
| 28 |
1eb203e |
Mrdn |
2y ago |
export interface SidebarProps |
| 29 |
1eb203e |
Mrdn |
2y ago |
extends React.HTMLAttributes<HTMLDivElement>, |
| 30 |
1eb203e |
Mrdn |
2y ago |
VariantProps<typeof sidebarVariants> { |
| 31 |
1eb203e |
Mrdn |
2y ago |
sidebar: SidebarItemGroup; |
| 32 |
1eb203e |
Mrdn |
2y ago |
collapsed: boolean; |
| 33 |
1eb203e |
Mrdn |
2y ago |
setCollapsed: (state: boolean) => void; |
| 34 |
1eb203e |
Mrdn |
2y ago |
} |
| 35 |
1eb203e |
Mrdn |
2y ago |
|
| 36 |
1eb203e |
Mrdn |
2y ago |
const Sidebar: FC<SidebarProps & PropsWithChildren> & ContentComposition = |
| 37 |
1eb203e |
Mrdn |
2y ago |
({ collapsed, setCollapsed, sidebar, variant, className, children, ...props }) => { |
| 38 |
1eb203e |
Mrdn |
2y ago |
return ( |
| 39 |
1eb203e |
Mrdn |
2y ago |
<SidebarContext.Provider value={{ sidebar, collapsed, setCollapsed }} > |
| 40 |
1eb203e |
Mrdn |
2y ago |
<div className={cn(sidebarVariants({ variant, className }))} {...props}> |
| 41 |
1eb203e |
Mrdn |
2y ago |
{children} |
| 42 |
1eb203e |
Mrdn |
2y ago |
</div> |
| 43 |
1eb203e |
Mrdn |
2y ago |
</SidebarContext.Provider> |
| 44 |
1eb203e |
Mrdn |
2y ago |
) |
| 45 |
1eb203e |
Mrdn |
2y ago |
} |
| 46 |
1eb203e |
Mrdn |
2y ago |
|
| 47 |
1eb203e |
Mrdn |
2y ago |
Sidebar.Header = SidebarHeader; |
| 48 |
1eb203e |
Mrdn |
2y ago |
Sidebar.Footer = SidebarFooter; |
| 49 |
1eb203e |
Mrdn |
2y ago |
Sidebar.Body = SidebarBody; |
| 50 |
1eb203e |
Mrdn |
2y ago |
Sidebar.Item = SidebarItem; |
| 51 |
1eb203e |
Mrdn |
2y ago |
Sidebar.Group = SidebarGroup; |
| 52 |
1eb203e |
Mrdn |
2y ago |
Sidebar.displayName = "Sidebar" |
| 53 |
1eb203e |
Mrdn |
2y ago |
|
| 54 |
1eb203e |
Mrdn |
2y ago |
export { Sidebar, sidebarVariants } |