function FixedSidebarLayout({ appName }) { const navItems = [ { href: "#", icon: "fas fa-home", label: "Home" }, { href: "#", icon: "fas fa-book", label: "Journal" }, { href: "#", icon: "fas fa-chart-line", label: "Analytics" }, { href: "#", icon: "fas fa-balance-scale", label: "Equity" }, { href: "#", icon: "fas fa-file-alt", label: "Reports" } ]; return /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 h-full w-[250px] bg-[#2c3e50] text-white font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-6", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, appName), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.label, __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.href, className: "flex items-center space-x-2 p-2 hover:bg-gray-700 rounded", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: item.icon, __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, item.label))))))); } function FixedSidebarLayoutStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FixedSidebarLayout, { appName: "App Name", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isSidebarMinimized, setIsSidebarMinimized] = React.useState(false); const toggleSidebar = ()=>{ setIsSidebarMinimized(!isSidebarMinimized); }; const navItems = [ { href: "#", icon: "fas fa-home", label: "Home" }, { href: "#", icon: "fas fa-book", label: "Journal" }, { href: "#", icon: "fas fa-chart-line", label: "Analytics" }, { href: "#", icon: "fas fa-balance-scale", label: "Equity" }, { href: "#", icon: "fas fa-file-alt", label: "Reports" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen overflow-hidden", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 left-0 h-full ${isSidebarMinimized ? "w-[80px]" : "w-[250px]"} bg-[#2c3e50] text-white font-roboto transition-all duration-300`, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "text-white p-2 mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: `${isSidebarMinimized ? "hidden" : "block"} text-2xl mb-6`, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "App Name"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.label, __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.href, className: "flex items-center space-x-2 p-2 hover:bg-gray-700 rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: item.icon, __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${isSidebarMinimized ? "hidden" : "block"}`, __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, item.label))))))), /*#__PURE__*/ React.createElement("div", { className: `ml-${isSidebarMinimized ? "[80px]" : "[250px]"} p-4 w-full transition-all duration-300 bg-gray-200 overflow-y-auto`, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg w-full mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#2c3e50] text-xl mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Net Return"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-3xl text-[#2c3e50]", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "18.5%"), /*#__PURE__*/ React.createElement("div", { className: "ml-4 w-[120px] h-[60px] bg-white", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 200 100", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("polyline", { points: "0,100 40,60 80,80 120,40 160,20 200,50", fill: "none", stroke: "#2c3e50", strokeWidth: "3", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg w-full mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#2c3e50] text-xl mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Winrate"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-3xl text-[#2c3e50]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "75%"), /*#__PURE__*/ React.createElement("div", { className: "ml-4 w-[60px] h-[60px] bg-white relative flex justify-center items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 100", className: "absolute inset-0", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "50", cy: "50", r: "45", fill: "none", stroke: "lightgray", strokeWidth: "10", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "50", cy: "50", r: "45", fill: "none", stroke: "#2c3e50", strokeWidth: "10", strokeDasharray: "282.74", strokeDashoffset: "70.68", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg w-full mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#2c3e50] text-xl mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Avg P&L"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-3xl text-[#2c3e50]", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "12%"), /*#__PURE__*/ React.createElement("div", { className: "ml-4 w-[120px] h-[60px] bg-white", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 200 100", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { x: "10", y: "40", width: "80", height: "20", fill: "#2c3e50", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("rect", { x: "110", y: "40", width: "80", height: "20", fill: "lightgray", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg w-full mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#2c3e50] text-xl mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Profit Factor"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-3xl text-[#2c3e50]", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "1.6"), /*#__PURE__*/ React.createElement("div", { className: "ml-4 w-[120px] h-[60px] bg-white", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 200 100", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("polyline", { points: "0,100 40,70 80,55 120,60 160,50 200,30", fill: "none", stroke: "#2c3e50", strokeWidth: "3", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this })))))))); }