function MenuToggleButton({ active, onChange, primaryText, secondaryText }) { return /*#__PURE__*/ React.createElement("button", { onClick: onChange, className: `inline-flex items-center justify-center rounded-full px-6 py-2 text-sm font-semibold transition-colors ${active ? "bg-[#121212] text-white" : "bg-gray-100 text-[#121212] hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, active ? primaryText : secondaryText); } function MenuToggleButtonStory() { const [isActive, setIsActive] = useState(true); return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MenuToggleButton, { active: isActive, onChange: ()=>setIsActive(!isActive), primaryText: "計画", secondaryText: "記録", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function SideMenu({ activeSection = "計画", activeItem = "" }) { const [isOpen, setIsOpen] = useState(false); const menuItems = { 計画: [ { name: "農地設定", icon: "fa-solid fa-map-location-dot" }, { name: "定植計画", icon: "fa-solid fa-seedling" }, { name: "収穫計画", icon: "fa-solid fa-calendar-days" } ], 記録: [ { name: "生育状況", icon: "fa-solid fa-leaf" }, { name: "収穫進捗", icon: "fa-solid fa-chart-line" }, { name: "収穫記録", icon: "fa-solid fa-book" } ] }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-full", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-[#f8f9fa] h-screen w-[240px] shadow-lg transition-all duration-300 ${isOpen ? "translate-x-0" : "-translate-x-[180px]"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "mb-6 w-full flex justify-end", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isOpen ? "fa-angles-left" : "fa-angles-right"} text-gray-600`, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), Object.keys(menuItems).map((section)=>/*#__PURE__*/ React.createElement("div", { key: section, className: "mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-sm font-bold mb-2 ${activeSection === section ? "text-[#2c5282]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, section), menuItems[section].map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.name, className: `flex items-center p-2 rounded-lg cursor-pointer ${activeItem === item.name ? "bg-[#2c5282] text-white" : "hover:bg-gray-200 text-gray-700"}`, __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} w-5`, __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, item.name)))))))); } function SideMenuStory() { return /*#__PURE__*/ React.createElement("div", { className: "h-screen", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "計画セクション"), /*#__PURE__*/ React.createElement(SideMenu, { activeSection: "計画", activeItem: "農地設定", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "記録セクション"), /*#__PURE__*/ React.createElement(SideMenu, { activeSection: "記録", activeItem: "生育状況", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [activeSection, setActiveSection] = useState("計画"); const [path, setPath] = useState("/farm-settings"); const renderContent = ()=>{ switch(path){ case "/farm-settings": return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "農地設定")); case "/planting-plan": return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "定植計画")); case "/harvest-plan": return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "収穫計画")); case "/growth-status": return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "生育状況")); case "/harvest-progress": return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "収穫進捗")); case "/harvest-record": return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "収穫記録")); default: return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "404"), /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "ページが見つかりません")); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SideMenu, { activeSection: activeSection, activeItem: path.slice(1), __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(MenuToggleButton, { active: activeSection === "計画", onChange: ()=>setActiveSection(activeSection === "計画" ? "記録" : "計画"), primaryText: "計画", secondaryText: "記録", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, renderContent()))); }