function SidebarItem({ icon, name, isSelected, notifyParent, hasDropdown = false }) { const containerClass = isSelected ? 'bg-white' : 'bg-transparent hover:bg-[#ffffff1a]'; const textAndIconColor = isSelected ? 'text-[#1B438A]' : 'text-white'; const dropdownIconClass = isSelected ? 'text-[#1B438A]' : 'text-white'; return /*#__PURE__*/ React.createElement("div", { className: `${containerClass} w-full p-3 rounded cursor-pointer`, onClick: notifyParent, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} ${textAndIconColor} w-5 h-5 mr-4`, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `font-bold text-base ${textAndIconColor}`, __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, name)), hasDropdown && /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down ${dropdownIconClass} w-4 h-4`, __source: { fileName: "", lineNumber: 13, columnNumber: 25 }, __self: this }))); } function SidebarItemStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-home", name: "Home", isSelected: false, notifyParent: ()=>console.log("Home selected"), __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-user", name: "Profile", isSelected: true, notifyParent: ()=>console.log("Profile selected"), __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-cog", name: "Settings", isSelected: false, notifyParent: ()=>console.log("Settings selected"), hasDropdown: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function MainComponent({ onSelect }) { const [selected, setSelected] = React.useState('Home'); function handleSelect(item) { setSelected(item); onSelect(item); } return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1B438A] p-4 h-screen rounded-tr-3xl rounded-br-3xl", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl mb-8", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Business Banking"), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-home", name: "Home", isSelected: selected === 'Home', notifyParent: ()=>handleSelect('Home'), hasDropdown: false, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-bell", name: "Notifications", isSelected: selected === 'Notifications', notifyParent: ()=>handleSelect('Notifications'), hasDropdown: false, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-exchange-alt", name: "My Transactions", isSelected: selected === 'My Transactions', notifyParent: ()=>handleSelect('My Transactions'), hasDropdown: false, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-chart-line", name: "Reports", isSelected: selected === 'Reports', notifyParent: ()=>handleSelect('Reports'), hasDropdown: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-envelope", name: "Contact Us", isSelected: selected === 'Contact Us', notifyParent: ()=>handleSelect('Contact Us'), hasDropdown: false, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SidebarItem, { icon: "fas fa-bullhorn", name: "Announcements", isSelected: selected === 'Announcements', notifyParent: ()=>handleSelect('Announcements'), hasDropdown: false, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` div.bg-[#1B438A] > div:not(:first-child) { border-bottom: 1px solid lightgray; margin-top: 4px; } div.bg-[#1B438A] > div:first-child { border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSelect: (item)=>console.log(`${item} selected`), __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); }