@beyondcorp/beyond-ui 1.1.11 → 1.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DashboardHeader/DashboardHeader.d.ts +8 -1
- package/dist/components/DashboardHeader/DashboardHeader.js +4 -2
- package/dist/components/DashboardHeader/DashboardHeader.js.map +1 -1
- package/dist/components/DashboardLayout/DashboardLayout.d.ts +3 -0
- package/dist/components/DashboardLayout/DashboardLayout.js +2 -2
- package/dist/components/DashboardLayout/DashboardLayout.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,13 @@ interface DashboardHeaderProps {
|
|
|
12
12
|
searchPlaceholder?: string;
|
|
13
13
|
onSearchChange?: (value: string) => void;
|
|
14
14
|
style?: React.CSSProperties;
|
|
15
|
+
showBreadcrumbs?: boolean;
|
|
16
|
+
showNotifications?: boolean;
|
|
17
|
+
showSettings?: boolean;
|
|
18
|
+
showProfile?: boolean;
|
|
19
|
+
leftSlot?: React.ReactNode;
|
|
20
|
+
centerSlot?: React.ReactNode;
|
|
21
|
+
rightSlot?: React.ReactNode;
|
|
15
22
|
}
|
|
16
23
|
declare const DashboardHeader: React.ForwardRefExoticComponent<DashboardHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
-
export { DashboardHeader, type BreadcrumbItem };
|
|
24
|
+
export { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };
|
|
@@ -6,15 +6,17 @@ import { Input } from '../Input/Input.js';
|
|
|
6
6
|
import { Button } from '../Button/Button.js';
|
|
7
7
|
import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
|
|
8
8
|
import { Badge } from '../Badge/Badge.js';
|
|
9
|
+
import { useBreakpoint } from '../../hooks/useBreakpoint.js';
|
|
9
10
|
|
|
10
|
-
const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, ...props }, ref) => {
|
|
11
|
+
const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, showBreadcrumbs = true, showNotifications = true, showSettings = true, showProfile = true, leftSlot, centerSlot, rightSlot, ...props }, ref) => {
|
|
11
12
|
const [searchValue, setSearchValue] = React.useState("");
|
|
13
|
+
const { isAbove } = useBreakpoint();
|
|
12
14
|
const handleSearchChange = (e) => {
|
|
13
15
|
const value = e.target.value;
|
|
14
16
|
setSearchValue(value);
|
|
15
17
|
onSearchChange?.(value);
|
|
16
18
|
};
|
|
17
|
-
return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), jsx("nav", { className: "flex items-center space-x-2 text-sm", children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 hover:text-gray-900 transition-colors", children: item.label })) : (jsx("span", { className: "text-gray-900 font-medium", children: item.label }))] }, index))) })] }), showSearch && (jsx("div", { className: "flex-1 max-w-md mx-8", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 border-gray-200 focus:bg-white" })] }) })), jsxs("div", { className: "flex items-center space-x-3", children: [jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", children: [jsx(Bell, { className: "h-5 w-5" }), jsx(Badge, { variant: "danger", className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center", children: "3" })] }) }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) }), jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] })] })] }) }));
|
|
19
|
+
return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4", children: [leftSlot, jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), showBreadcrumbs && isAbove('md') && (jsx("nav", { className: "flex items-center space-x-2 text-sm", children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 hover:text-gray-900 transition-colors", children: item.label })) : (jsx("span", { className: "text-gray-900 font-medium", children: item.label }))] }, index))) }))] }), centerSlot ? (jsx("div", { className: "flex-1 flex justify-center", children: centerSlot })) : (showSearch && (jsx("div", { className: "flex-1 max-w-md mx-8", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 border-gray-200 focus:bg-white" })] }) }))), jsxs("div", { className: "flex items-center space-x-3", children: [rightSlot, showNotifications && (jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", children: [jsx(Bell, { className: "h-5 w-5" }), jsx(Badge, { variant: "danger", className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center", children: "3" })] }) })), showSettings && (jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) })), showProfile && (jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] }))] })] }) }));
|
|
18
20
|
});
|
|
19
21
|
DashboardHeader.displayName = "DashboardHeader";
|
|
20
22
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ninterface DashboardHeaderProps {\n className?: string;\n breadcrumbs?: BreadcrumbItem[];\n onMenuToggle?: () => void;\n sidebarCollapsed?: boolean;\n showSearch?: boolean;\n searchPlaceholder?: string;\n onSearchChange?: (value: string) => void;\n style?: React.CSSProperties;\n}\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n ({
|
|
1
|
+
{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ninterface DashboardHeaderProps {\n className?: string;\n breadcrumbs?: BreadcrumbItem[];\n onMenuToggle?: () => void;\n sidebarCollapsed?: boolean;\n showSearch?: boolean;\n searchPlaceholder?: string;\n onSearchChange?: (value: string) => void;\n style?: React.CSSProperties;\n\n // New flexible API\n showBreadcrumbs?: boolean; // default true\n showNotifications?: boolean; // default true\n showSettings?: boolean; // default true\n showProfile?: boolean; // default true\n\n leftSlot?: React.ReactNode;\n centerSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n ({\n className,\n breadcrumbs = [{ label: \"Dashboard\" }],\n onMenuToggle,\n sidebarCollapsed = false,\n showSearch = true,\n searchPlaceholder = \"Search...\",\n onSearchChange,\n showBreadcrumbs = true,\n showNotifications = true,\n showSettings = true,\n showProfile = true,\n leftSlot,\n centerSlot,\n rightSlot,\n ...props\n }, ref) => {\n const [searchValue, setSearchValue] = React.useState(\"\");\n const { isAbove } = useBreakpoint();\n\n const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n setSearchValue(value);\n onSearchChange?.(value);\n };\n\n return (\n <header\n ref={ref}\n className={cn(\n \"z-30 bg-white border-b border-gray-200 transition-all duration-300\",\n className\n )}\n style={props.style}\n {...props}\n >\n <div className=\"flex items-center justify-between px-6 py-4\">\n {/* Left Section */}\n <div className=\"flex items-center space-x-4\">\n {/* Custom left slot */}\n {leftSlot}\n\n {/* Mobile Menu Button */}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={onMenuToggle}\n className=\"md:hidden\"\n >\n <Menu className=\"h-5 w-5\" />\n </Button>\n\n {/* Breadcrumbs */}\n {showBreadcrumbs && isAbove('md') && (\n <nav className=\"flex items-center space-x-2 text-sm\">\n {breadcrumbs.map((item, index) => (\n <React.Fragment key={index}>\n {index > 0 && (\n <span className=\"text-gray-400\">/</span>\n )}\n {item.href ? (\n <a\n href={item.href}\n className=\"text-gray-600 hover:text-gray-900 transition-colors\"\n >\n {item.label}\n </a>\n ) : (\n <span className=\"text-gray-900 font-medium\">\n {item.label}\n </span>\n )}\n </React.Fragment>\n ))}\n </nav>\n )}\n </div>\n\n {/* Center Section - Search or custom center slot */}\n {centerSlot ? (\n <div className=\"flex-1 flex justify-center\">{centerSlot}</div>\n ) : (\n showSearch && (\n <div className=\"flex-1 max-w-md mx-8\">\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n <Input\n type=\"text\"\n placeholder={searchPlaceholder}\n value={searchValue}\n onChange={handleSearchChange}\n className=\"pl-10 bg-gray-50 border-gray-200 focus:bg-white\"\n />\n </div>\n </div>\n )\n )}\n\n {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Custom right slot */}\n {rightSlot}\n\n {/* Notifications */}\n {showNotifications && (\n <div className=\"relative\">\n <Button variant=\"ghost\" size=\"sm\" className=\"relative\">\n <Bell className=\"h-5 w-5\" />\n <Badge\n variant=\"danger\"\n className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n >\n 3\n </Badge>\n </Button>\n </div>\n )}\n\n {/* Settings */}\n {showSettings && (\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* User Profile */}\n {showProfile && (\n <div className=\"flex items-center space-x-3 pl-3 border-l border-gray-200\">\n <div className=\"hidden sm:block text-right\">\n <p className=\"text-sm font-medium text-gray-900\">John Doe</p>\n <p className=\"text-xs text-gray-500\">Administrator</p>\n </div>\n <Avatar size=\"sm\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n </div>\n )}\n </div>\n </div>\n </header>\n );\n }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ import { type BreadcrumbItem } from "../DashboardHeader";
|
|
|
9
9
|
*
|
|
10
10
|
* These props are forwarded to Sidebar for dynamic header branding.
|
|
11
11
|
*/
|
|
12
|
+
import type { DashboardHeaderProps } from "../DashboardHeader";
|
|
12
13
|
interface DashboardLayoutProps {
|
|
13
14
|
children: React.ReactNode;
|
|
14
15
|
className?: string;
|
|
@@ -33,6 +34,8 @@ interface DashboardLayoutProps {
|
|
|
33
34
|
logoutButtonProps?: import("../Sidebar/LogoutButton").LogoutButtonProps;
|
|
34
35
|
/** Props for Sidebar profile section (avatar, name, email, etc.) */
|
|
35
36
|
profileSectionProps?: SidebarProfileSectionProps;
|
|
37
|
+
/** Props to customize DashboardHeader */
|
|
38
|
+
dashboardHeaderProps?: DashboardHeaderProps;
|
|
36
39
|
}
|
|
37
40
|
declare const DashboardLayout: React.ForwardRefExoticComponent<DashboardLayoutProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
41
|
export { DashboardLayout };
|
|
@@ -4,7 +4,7 @@ import { cn } from '../../utils/cn.js';
|
|
|
4
4
|
import { Sidebar } from '../Sidebar/Sidebar.js';
|
|
5
5
|
import { DashboardHeader } from '../DashboardHeader/DashboardHeader.js';
|
|
6
6
|
|
|
7
|
-
const DashboardLayout = React.forwardRef(({ children, className, sidebarMenuItems, activeSidebarItem, breadcrumbs, onSidebarItemClick, showSearch, searchPlaceholder, onSearchChange, sidebarTitle, sidebarTitleLetter, sidebarHeaderClassName, profileButtonProps, logoutButtonProps, profileSectionProps, ...props }, ref) => {
|
|
7
|
+
const DashboardLayout = React.forwardRef(({ children, className, sidebarMenuItems, activeSidebarItem, breadcrumbs, onSidebarItemClick, showSearch, searchPlaceholder, onSearchChange, sidebarTitle, sidebarTitleLetter, sidebarHeaderClassName, profileButtonProps, logoutButtonProps, profileSectionProps, dashboardHeaderProps, ...props }, ref) => {
|
|
8
8
|
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
|
|
9
9
|
const toggleSidebar = () => {
|
|
10
10
|
setSidebarCollapsed(prev => !prev);
|
|
@@ -25,7 +25,7 @@ const DashboardLayout = React.forwardRef(({ children, className, sidebarMenuItem
|
|
|
25
25
|
right: 0,
|
|
26
26
|
width: `calc(100% - ${sidebarCollapsed ? "4rem" : "18rem"})`,
|
|
27
27
|
transition: "left 0.3s, width 0.3s",
|
|
28
|
-
} }), jsx("div", { className: cn("relative w-full h-full", props.disableSidebarMargin ? "" : ""), style: {
|
|
28
|
+
}, ...dashboardHeaderProps }), jsx("div", { className: cn("relative w-full h-full", props.disableSidebarMargin ? "" : ""), style: {
|
|
29
29
|
marginLeft: sidebarCollapsed ? "4rem" : "18rem",
|
|
30
30
|
marginTop: "4.5rem", // Header height (py-4 + border)
|
|
31
31
|
height: "calc(100vh - 4.5rem)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Sidebar, type MenuItem, type SidebarProfileSectionProps } from \"../Sidebar\";\r\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\r\n\r\n/**\r\n * DashboardLayoutProps\r\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\r\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\r\n * - sidebarHeaderClassName: Optional className for SidebarHeader\r\n *\r\n * These props are forwarded to Sidebar for dynamic header branding.\r\n */\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n sidebarMenuItems?: MenuItem[];\r\n activeSidebarItem?: string;\r\n breadcrumbs?: BreadcrumbItem[];\r\n onSidebarItemClick?: (itemId: string) => void;\r\n showSearch?: boolean;\r\n searchPlaceholder?: string;\r\n onSearchChange?: (value: string) => void;\r\n sidebarClassName?: string;\r\n disableSidebarMargin?: boolean;\r\n /** Sidebar header title (default: \"Beyond\") */\r\n sidebarTitle?: string;\r\n /** Sidebar header letter (default: \"B\") */\r\n sidebarTitleLetter?: string;\r\n /** Optional className for SidebarHeader */\r\n sidebarHeaderClassName?: string;\r\n /** Props for ProfileButton in Sidebar */\r\n profileButtonProps?: import(\"../Sidebar/ProfileButton\").ProfileButtonProps;\r\n /** Props for LogoutButton in Sidebar */\r\n logoutButtonProps?: import(\"../Sidebar/LogoutButton\").LogoutButtonProps;\r\n /** Props for Sidebar profile section (avatar, name, email, etc.) */\r\n profileSectionProps?: SidebarProfileSectionProps;\r\n}\r\n\r\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\r\n ({\r\n children,\r\n className,\r\n sidebarMenuItems,\r\n activeSidebarItem,\r\n breadcrumbs,\r\n onSidebarItemClick,\r\n showSearch,\r\n searchPlaceholder,\r\n onSearchChange,\r\n sidebarTitle,\r\n sidebarTitleLetter,\r\n sidebarHeaderClassName,\r\n profileButtonProps,\r\n logoutButtonProps,\r\n profileSectionProps,\r\n ...props\r\n }, ref) => {\r\n const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\r\n\r\n const toggleSidebar = () => {\r\n setSidebarCollapsed(prev => !prev);\r\n };\r\n\r\n return (\r\n <div ref={ref} className={cn(\"bg-gray-50 w-full h-screen overflow-hidden\", className)} {...props}>\r\n {/* Fixed Sidebar */}\r\n <Sidebar\r\n collapsed={sidebarCollapsed}\r\n onToggle={toggleSidebar}\r\n menuItems={sidebarMenuItems}\r\n activeItem={activeSidebarItem}\r\n onItemClick={onSidebarItemClick}\r\n className={props.sidebarClassName}\r\n title={sidebarTitle}\r\n titleLetter={sidebarTitleLetter}\r\n headerClassName={sidebarHeaderClassName}\r\n style={{\r\n zIndex: 50,\r\n position: \"fixed\",\r\n left: 0,\r\n top: 0,\r\n height: \"100vh\",\r\n width: sidebarCollapsed ? \"4rem\" : \"18rem\", // Tailwind: w-16 or w-72\r\n transition: \"width 0.3s\",\r\n }}\r\n profileButtonProps={profileButtonProps}\r\n logoutButtonProps={logoutButtonProps}\r\n profileSectionProps={profileSectionProps}\r\n />\r\n\r\n {/* Fixed Header */}\r\n <DashboardHeader\r\n sidebarCollapsed={sidebarCollapsed}\r\n onMenuToggle={toggleSidebar}\r\n breadcrumbs={breadcrumbs}\r\n showSearch={showSearch}\r\n searchPlaceholder={searchPlaceholder}\r\n onSearchChange={onSearchChange}\r\n style={{\r\n zIndex: 30,\r\n position: \"fixed\",\r\n top: 0,\r\n left: sidebarCollapsed ? \"4rem\" : \"18rem\",\r\n right: 0,\r\n width: `calc(100% - ${sidebarCollapsed ? \"4rem\" : \"18rem\"})`,\r\n transition: \"left 0.3s, width 0.3s\",\r\n }}\r\n />\r\n\r\n {/* Main Content Area (scrollable) */}\r\n <div\r\n className={cn(\r\n \"relative w-full h-full\",\r\n props.disableSidebarMargin ? \"\" : \"\"\r\n )}\r\n style={{\r\n marginLeft: sidebarCollapsed ? \"4rem\" : \"18rem\",\r\n marginTop: \"4.5rem\", // Header height (py-4 + border)\r\n height: \"calc(100vh - 4.5rem)\",\r\n overflowY: \"auto\",\r\n transition: \"margin-left 0.3s\",\r\n }}\r\n >\r\n <main className=\"p-10 w-[90vw]\">\r\n {children}\r\n </main>\r\n </div>\r\n\r\n {/* Mobile Overlay */}\r\n {!sidebarCollapsed && (\r\n <div\r\n className=\"fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden\"\r\n onClick={toggleSidebar}\r\n />\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nDashboardLayout.displayName = \"DashboardLayout\";\r\n\r\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Sidebar, type MenuItem, type SidebarProfileSectionProps } from \"../Sidebar\";\r\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\r\n\r\n/**\r\n * DashboardLayoutProps\r\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\r\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\r\n * - sidebarHeaderClassName: Optional className for SidebarHeader\r\n *\r\n * These props are forwarded to Sidebar for dynamic header branding.\r\n */\r\nimport type { DashboardHeaderProps } from \"../DashboardHeader\";\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n sidebarMenuItems?: MenuItem[];\r\n activeSidebarItem?: string;\r\n breadcrumbs?: BreadcrumbItem[];\r\n onSidebarItemClick?: (itemId: string) => void;\r\n showSearch?: boolean;\r\n searchPlaceholder?: string;\r\n onSearchChange?: (value: string) => void;\r\n sidebarClassName?: string;\r\n disableSidebarMargin?: boolean;\r\n /** Sidebar header title (default: \"Beyond\") */\r\n sidebarTitle?: string;\r\n /** Sidebar header letter (default: \"B\") */\r\n sidebarTitleLetter?: string;\r\n /** Optional className for SidebarHeader */\r\n sidebarHeaderClassName?: string;\r\n /** Props for ProfileButton in Sidebar */\r\n profileButtonProps?: import(\"../Sidebar/ProfileButton\").ProfileButtonProps;\r\n /** Props for LogoutButton in Sidebar */\r\n logoutButtonProps?: import(\"../Sidebar/LogoutButton\").LogoutButtonProps;\r\n /** Props for Sidebar profile section (avatar, name, email, etc.) */\r\n profileSectionProps?: SidebarProfileSectionProps;\r\n\r\n /** Props to customize DashboardHeader */\r\n dashboardHeaderProps?: DashboardHeaderProps;\r\n}\r\n\r\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\r\n ({\r\n children,\r\n className,\r\n sidebarMenuItems,\r\n activeSidebarItem,\r\n breadcrumbs,\r\n onSidebarItemClick,\r\n showSearch,\r\n searchPlaceholder,\r\n onSearchChange,\r\n sidebarTitle,\r\n sidebarTitleLetter,\r\n sidebarHeaderClassName,\r\n profileButtonProps,\r\n logoutButtonProps,\r\n profileSectionProps,\r\n dashboardHeaderProps,\r\n ...props\r\n }, ref) => {\r\n const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\r\n\r\n const toggleSidebar = () => {\r\n setSidebarCollapsed(prev => !prev);\r\n };\r\n\r\n return (\r\n <div ref={ref} className={cn(\"bg-gray-50 w-full h-screen overflow-hidden\", className)} {...props}>\r\n {/* Fixed Sidebar */}\r\n <Sidebar\r\n collapsed={sidebarCollapsed}\r\n onToggle={toggleSidebar}\r\n menuItems={sidebarMenuItems}\r\n activeItem={activeSidebarItem}\r\n onItemClick={onSidebarItemClick}\r\n className={props.sidebarClassName}\r\n title={sidebarTitle}\r\n titleLetter={sidebarTitleLetter}\r\n headerClassName={sidebarHeaderClassName}\r\n style={{\r\n zIndex: 50,\r\n position: \"fixed\",\r\n left: 0,\r\n top: 0,\r\n height: \"100vh\",\r\n width: sidebarCollapsed ? \"4rem\" : \"18rem\", // Tailwind: w-16 or w-72\r\n transition: \"width 0.3s\",\r\n }}\r\n profileButtonProps={profileButtonProps}\r\n logoutButtonProps={logoutButtonProps}\r\n profileSectionProps={profileSectionProps}\r\n />\r\n\r\n {/* Fixed Header */}\r\n <DashboardHeader\r\n sidebarCollapsed={sidebarCollapsed}\r\n onMenuToggle={toggleSidebar}\r\n breadcrumbs={breadcrumbs}\r\n showSearch={showSearch}\r\n searchPlaceholder={searchPlaceholder}\r\n onSearchChange={onSearchChange}\r\n style={{\r\n zIndex: 30,\r\n position: \"fixed\",\r\n top: 0,\r\n left: sidebarCollapsed ? \"4rem\" : \"18rem\",\r\n right: 0,\r\n width: `calc(100% - ${sidebarCollapsed ? \"4rem\" : \"18rem\"})`,\r\n transition: \"left 0.3s, width 0.3s\",\r\n }}\r\n {...dashboardHeaderProps}\r\n />\r\n\r\n {/* Main Content Area (scrollable) */}\r\n <div\r\n className={cn(\r\n \"relative w-full h-full\",\r\n props.disableSidebarMargin ? \"\" : \"\"\r\n )}\r\n style={{\r\n marginLeft: sidebarCollapsed ? \"4rem\" : \"18rem\",\r\n marginTop: \"4.5rem\", // Header height (py-4 + border)\r\n height: \"calc(100vh - 4.5rem)\",\r\n overflowY: \"auto\",\r\n transition: \"margin-left 0.3s\",\r\n }}\r\n >\r\n <main className=\"p-10 w-[90vw]\">\r\n {children}\r\n </main>\r\n </div>\r\n\r\n {/* Mobile Overlay */}\r\n {!sidebarCollapsed && (\r\n <div\r\n className=\"fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden\"\r\n onClick={toggleSidebar}\r\n />\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nDashboardLayout.displayName = \"DashboardLayout\";\r\n\r\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":"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"}
|