function SidebarToggleButton({ toggleSidebar }) { return /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "fixed top-4 left-4 text-xl bg-gray-700 text-white p-2 rounded z-50", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this })); } function SidebarToggleButtonStory() { const handleToggleSidebar = ()=>{ console.log('Sidebar toggled'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SidebarToggleButton, { toggleSidebar: handleToggleSidebar, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [orbitalData, setOrbitalData] = React.useState([]); const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); React.useEffect(()=>{ fetch("/api/satellite-data").then((response)=>response.json()).then((data)=>setOrbitalData(data)); }, []); const toggleSidebar = ()=>{ setIsSidebarOpen(!isSidebarOpen); }; const sidebarClasses = isSidebarOpen ? "w-[200px]" : "w-0"; const iconSize = "text-xl"; const textSize = "text-lg"; return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-black text-white h-screen flex flex-col py-10 font-roboto transition-all duration-300 ${sidebarClasses}`, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-3xl mb-10 transition-opacity duration-300 ${isSidebarOpen ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `mb-6 w-full pl-4 ${isSidebarOpen ? "opacity-100" : "opacity-0"} hover:bg-gray-700 transition-opacity duration-300`, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-home mr-2 ${iconSize}`, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${textSize}`, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("div", { className: `mb-6 w-full pl-4 ${isSidebarOpen ? "opacity-100" : "opacity-0"} hover:bg-gray-700 transition-opacity duration-300`, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-globe mr-2 ${iconSize}`, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${textSize}`, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "LEO")), /*#__PURE__*/ React.createElement("div", { className: `mb-6 w-full pl-4 ${isSidebarOpen ? "opacity-100" : "opacity-0"} hover:bg-gray-700 transition-opacity duration-300`, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-satellite mr-2 ${iconSize}`, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${textSize}`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "GEO")), /*#__PURE__*/ React.createElement("div", { className: `mb-6 w-full pl-4 ${isSidebarOpen ? "opacity-100" : "opacity-0"} hover:bg-gray-700 transition-opacity duration-300`, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-cog mr-2 ${iconSize}`, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${textSize}`, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Settings"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#F5F8FD] p-6", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Satellite Orbital Elements"), /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md w-full h-[400px]", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Graph Placeholder"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Interactive chart will be displayed here"))), /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "fixed top-4 left-4 text-xl bg-gray-700 text-white p-2 rounded z-50", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }))); }