function MainComponent({ logoSrc, menuItems }) { return /*#__PURE__*/ React.createElement("div", { className: "mx-auto lg:ml-[320px] lg:pl-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center bg-[#343a40] p-4 lg:hidden", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-white inline-block text-3xl", href: "#", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Navigation logo", width: "96", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2", type: "button", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-bars text-white", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative bg-[#343a40] lg:block z-50", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:hidden fixed inset-0 bg-[#343a40] opacity-50 z-10", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 bottom-0 w-64 p-6 pt-8 pb-8 bg-[#343a40] overflow-auto z-20", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "block mb-10 text-white", href: "#", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Sidebar logo", width: "96", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "list-none mb-8 lg:mb-24", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `mb-2 ${item.active ? 'bg-[#007bff]' : ''}`, __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: `flex items-center py-3 px-4 text-white font-bold rounded`, href: item.href, __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${item.icon} mr-3`, __source: { fileName: "", lineNumber: 22, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 23, columnNumber: 19 }, __self: this }, item.label), item.notification && /*#__PURE__*/ React.createElement("span", { className: "ml-auto flex items-center justify-center bg-[#dc3545] text-white rounded-full", style: { width: '24px', height: '24px', fontSize: '10px' }, __source: { fileName: "", lineNumber: 25, columnNumber: 21 }, __self: this }, item.notification)))))))); } function StoryComponent() { const logoSrc = "images/logo.svg"; const menuItems = [ { label: "Dashboard", icon: "fa-tachometer-alt", href: "#", active: true }, { label: "Orders", icon: "fa-shopping-cart", href: "#" }, { label: "Products", icon: "fa-box-open", href: "#" }, { label: "Customers", icon: "fa-users", href: "#" }, { label: "Reports", icon: "fa-chart-line", href: "#" }, { label: "Integrations", icon: "fa-puzzle-piece", href: "#" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { logoSrc: logoSrc, menuItems: menuItems, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); }