function MainComponent() { const [showSidebar, setShowSidebar] = React.useState(true); const sidebarContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-20 border-b", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl uppercase", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Hospital")), /*#__PURE__*/ React.createElement("nav", { className: "flex-1 px-2 py-4 space-y-1", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-2 py-2 text-gray-600 rounded-md hover:bg-gray-200 w-full flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt text-gray-400 text-xl mx-2", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-2 py-2 text-gray-600 rounded-md hover:bg-gray-200 w-full flex items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-md text-gray-400 text-xl mx-2", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), "Doctors"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-2 py-2 text-gray-600 rounded-md hover:bg-gray-200 w-full flex items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-procedures text-gray-400 text-xl mx-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), "Patients"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-2 py-2 text-gray-600 rounded-md hover:bg-gray-200 w-full flex items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt text-gray-400 text-xl mx-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), "Appointments"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-2 py-2 text-gray-600 rounded-md hover:bg-gray-200 w-full flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-capsules text-gray-400 text-xl mx-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), "Medications"))); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: `fixed inset-y-0 left-0 w-64 transform bg-white shadow-xl transition-transform duration-300 ease-in-out ${showSidebar ? 'translate-x-0' : '-translate-x-full'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, sidebarContent), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between p-4 border-b bg-white", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-gray-600 lg:hidden", onClick: ()=>setShowSidebar(!showSidebar), __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, showSidebar ? '✖️' : '🍔'), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Dashboard")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Welcome to the Hospital Management System dashboard.")), /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 z-40 transition-opacity bg-gray-600 bg-opacity-75 lg:hidden ${showSidebar ? 'opacity-100' : 'opacity-0 pointer-events-none'}`, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, ` aside { animation: ${showSidebar ? 'slideIn' : 'slideOut'} 0.3s forwards; } @keyframes slideIn { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes slideOut { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } `)); }