function MainComponent({ page, onMenuClick }) { const [isOpen, setIsOpen] = React.useState(false); let content; switch(page){ case 'settings': content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 7, columnNumber: 18 }, __self: this }, "Settings Page"); break; case 'user': content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 10, columnNumber: 18 }, __self: this }, "User Page"); break; case 'contract': content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 13, columnNumber: 18 }, __self: this }, "Contract Page"); break; case 'schedule': content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 18 }, __self: this }, "Schedule Confirmation Page"); break; default: content = /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 18 }, __self: this }, "Select a page"); } return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `min-h-screen w-16 flex flex-col items-center bg-[#010101] text-white ${isOpen ? 'w-64' : 'w-16'}`, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "m-4 cursor-pointer", onClick: ()=>setIsOpen(!isOpen), __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), isOpen && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "m-4 cursor-pointer", onClick: ()=>onMenuClick('settings'), __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog", "aria-hidden": "true", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "m-4 cursor-pointer", onClick: ()=>onMenuClick('user'), __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user", "aria-hidden": "true", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "m-4 cursor-pointer", onClick: ()=>onMenuClick('contract'), __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-file-contract", "aria-hidden": "true", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "m-4 cursor-pointer", onClick: ()=>onMenuClick('schedule'), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar-check", "aria-hidden": "true", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-10", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, content)); } function StoryComponent() { const handleMenuClick = (page)=>{ console.log(`${page} clicked`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { page: "settings", onMenuClick: handleMenuClick, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "user", onMenuClick: handleMenuClick, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "contract", onMenuClick: handleMenuClick, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "schedule", onMenuClick: handleMenuClick, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); }