function MainComponent() { const [menuOpen, setMenuOpen] = React.useState(true); const toggleMenu = ()=>setMenuOpen(!menuOpen); const menuIcon = menuOpen ? "fa-times" : "fa-bars"; const menuPosition = menuOpen ? "translate-x-0" : "-translate-x-full"; return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 left-4 z-20", onClick: toggleMenu, __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${menuIcon} text-2xl`, __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `absolute top-0 left-0 h-full w-[200px] bg-white shadow-md transition-transform ${menuPosition}`, __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 p-5 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 20, columnNumber: 21 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 21, columnNumber: 21 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 22, columnNumber: 21 }, __self: this }, "Help"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 23, columnNumber: 21 }, __self: this }, "About"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, ` .menu-enter { transform: translateX(-100%); } .menu-enter-active { transform: translateX(0); transition: transform 300ms; } .menu-exit { transform: translateX(0); } .menu-exit-active { transform: translateX(-100%); transition: transform 300ms; } `)); }