function MainComponent() { const [isDarkMode, setIsDarkMode] = React.useState(false); const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); const handleToggleMode = ()=>{ setIsDarkMode((prevMode)=>!prevMode); }; const handleToggleSidebar = ()=>{ setIsSidebarOpen((prevState)=>!prevState); }; const navigateTo = (path)=>{ window.location.href = path; }; const sidebarBgClass = isDarkMode ? "bg-gray-800 text-white" : "bg-gray-200 text-black"; const mainContentBgClass = isDarkMode ? "bg-gray-900 text-white" : "bg-[#f9fafb] text-black"; const sidebarClass = isSidebarOpen ? "w-[250px] p-5" : "w-[70px] p-5"; const itemClass = "p-2 hover:bg-gray-600 cursor-pointer flex items-center"; const iconClass = "fa mr-2"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full h-[60px] ${sidebarBgClass} flex justify-between items-center p-5`, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mr-2 fa fa-bars", onClick: handleToggleSidebar, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), "Header"), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded bg-blue-500 text-white", onClick: handleToggleMode, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Toggle Mode")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${sidebarClass} ${sidebarBgClass} flex-shrink-0 overflow-y-auto transition-all duration-300`, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "block", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: itemClass, onClick: ()=>navigateTo("/home"), __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${iconClass} fa-home hover:text-inverted`, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), " ", isSidebarOpen && "Item 1"), /*#__PURE__*/ React.createElement("li", { className: itemClass, onClick: ()=>navigateTo("/area1"), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${iconClass} fa-info-circle hover:text-inverted`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), " ", isSidebarOpen && "Item 2"), /*#__PURE__*/ React.createElement("li", { className: itemClass, onClick: ()=>navigateTo("/area2"), __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${iconClass} fa-cog hover:text-inverted`, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), " ", isSidebarOpen && "Item 3"), /*#__PURE__*/ React.createElement("li", { className: itemClass, onClick: ()=>navigateTo("/settings"), __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${iconClass} fa-sign-out-alt hover:text-inverted`, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), " ", isSidebarOpen && "Item 4"))), /*#__PURE__*/ React.createElement("div", { className: `flex-1 p-5 ${mainContentBgClass} overflow-y-auto`, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-5 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Main Content"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "This is the main content area."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, ` .hover\\:text-inverted:hover { color: white !important; } `)); }