@ozdao/martyrs 0.2.429 → 0.2.431

package/dist/martyrs/src/modules/globals/views/components/partials/Navigation.vue.cjs

@@ -32,6 +32,10 @@ const _sfc_main = {
   props: {
     navigationItems: Array,
     // Fixed property name typo
+    theme: {
+      type: String,
+      default: "light"
+    },
     stateSidebar: {
       type: Boolean,
       default: false
@@ -83,9 +87,9 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("nav", {
-        class: vue.normalizeClass(["o-y-scroll o-x-hidden h-100", [
+        class: vue.normalizeClass(["o-x-hidden h-100", [
           __props.stateSidebar ? "pd-small" : "pd-micro",
-          __props.horizontal ? "w-100 desktop-only flex flex-center flex-nowrap" : "rows-1"
+          __props.horizontal ? "w-100 desktop-only flex flex-center flex-nowrap o-y-hidden" : "o-y-scroll rows-1"
         ]])
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(menuItems.value, (section) => {
@@ -99,7 +103,9 @@ const _sfc_main = {
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["sidebar-category", {
                 "hidden": !__props.stateSidebar || __props.horizontal,
-                "visible": __props.stateSidebar && !__props.horizontal
+                "visible": __props.stateSidebar && !__props.horizontal,
+                "t-black": __props.theme === "light",
+                "t-white": __props.theme === "dark"
               }])
             }, vue.toDisplayString(section.category), 3),
             vue.createElementVNode("ul", {
@@ -111,8 +117,9 @@ const _sfc_main = {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
                   key: item.title,
                   class: vue.normalizeClass(["flex-center", [
-                    __props.stateSidebar ? "" : "aspect-1x1",
-                    __props.horizontal ? "w-100 flex flex-nowrap" : ""
+                    __props.stateSidebar ? "" : "",
+                    __props.horizontal ? "w-100 flex flex-nowrap" : "",
+                    __props.stateSidebar && !__props.horizontal ? "" : "aspect-1x1"
                   ]])
                 }, [
                   vue.createElementVNode("button", {
@@ -120,13 +127,14 @@ const _sfc_main = {
                     class: vue.normalizeClass(["flex-child-default flex-center gap-thin flex sidebar-item-btn", [
                       __props.stateSidebar || __props.horizontal ? "expanded-item pd-thin" : "w-100 h-100 justify-center",
                       __props.horizontal ? "w-max flex flex-nowrap" : "",
-                      item.route && _ctx.$route.path === processRoute(item.route) ? "bg-light" : ""
+                      item.route && _ctx.$route.path === processRoute(item.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                      __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
                     ]])
                   }, [
                     item.iconComponent && !__props.horizontal ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.iconComponent), {
                       key: 0,
                       class: "i-medium flex-child-default",
-                      fill: globals.state.theme.darkmode ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
+                      fill: globals.state.theme.darkmode || __props.theme === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
                     }, null, 8, ["fill"])) : vue.createCommentVNode("", true),
                     !item.iconComponent && !__props.horizontal ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(item.icon), 1)) : vue.createCommentVNode("", true),
                     vue.createElementVNode("span", {
@@ -162,7 +170,7 @@ const _sfc_main = {
                               subItem.iconComponent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(subItem.iconComponent), {
                                 key: 0,
                                 class: "sidebar-subitem-icon i-medium",
-                                fill: globals.state.theme.darkmode ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
+                                fill: globals.state.theme.darkmode || __props.theme === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
                               }, null, 8, ["fill"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, vue.toDisplayString(subItem.icon), 1)),
                               vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(subItem.title), 1)
                             ], 8, _hoisted_10)
@@ -185,6 +193,6 @@ const _sfc_main = {
     };
   }
 };
-const Navigation = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-baa33ec9"]]);
+const Navigation = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-43d4ca8b"]]);
 exports.default = Navigation;
 //# sourceMappingURL=Navigation.vue.cjs.map

package/dist/martyrs/src/modules/globals/views/components/partials/Navigation.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.vue.cjs","sources":["../../../../../../../../src/modules/globals/views/components/partials/Navigation.vue"],"sourcesContent":["<script setup>\nimport { ref, watch, computed } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals'\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\n// Import icons\nimport IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue'\nimport IconPayments from '@martyrs/src/modules/icons/entities/IconPayments.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\nimport IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'\nimport IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue'\nimport IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue'\nimport IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'\nimport IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue'\n\nconst router = useRouter()\n\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'\nimport Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'\n\nconst props = defineProps({\n  navigationItems: Array, // Fixed property name typo\n  stateSidebar: {\n    type: Boolean,\n    default: false\n  },\n  horizontal: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst emit = defineEmits([\n  'closeSidebar'\n])\n\nconst expandedSections = ref([])\n\n// Use navigationItems from props instead of nagigationItems\nconst menuItems = computed(() => props.navigationItems || [])\n\nconst toggleSection = (title) => {\n  if (!props.stateSidebar) {\n    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {\n      emit('closeSidebar')\n      setTimeout(() => {\n        expandedSections.value.push(title)\n      }, 50)\n    }\n    return\n  }\n  \n  const index = expandedSections.value.indexOf(title)\n\n  if (index === -1) {\n    expandedSections.value.push(title)\n  } else {\n    expandedSections.value.splice(index, 1)\n  }\n}\n\nconst isSectionExpanded = (title) => {\n  return expandedSections.value.includes(title)\n}\n\nwatch(() => props.stateSidebar, (newValue) => {\n  if (!newValue) {\n    expandedSections.value = []\n  }\n})\n\n// Process route functions with globals and auth data\nconst processRoute = (route) => {\n  if (typeof route === 'function') {\n    return route(globals.state, auth.state)\n  }\n  return route\n}\n</script>\n\n<template>\n  <nav\n    class=\"o-y-scroll o-x-hidden h-100\"\n    :class=\"[\n      stateSidebar ? 'pd-small' : 'pd-micro',\n      horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap' : 'rows-1',\n    ]\"\n  >\n    <div \n      v-for=\"section in menuItems\" \n      v-show=\"!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state) : true)\"\n      :key=\"section.category\" \n      :class=\"[\n        horizontal ? 'w-max flex-child-default flex flex-nowrap' : '',\n         stateSidebar && !horizontal ? 'mn-t-medium' : '',\n      ]\"\n      class=\"\"\n    >\n      <div \n        class=\"sidebar-category\"\n        :class=\"{ \n          'hidden': !stateSidebar || horizontal, \n          'visible': stateSidebar && !horizontal \n        }\"\n      >\n        {{ section.category }}\n      </div>\n\n      <ul \n        :class=\"[\n          horizontal ? 'w-100 gap-micro flex flex-nowrap' : 'flex flex-column gap-thin',\n        ]\"\n      >\n        <li \n          v-for=\"item in section.items\" \n          :key=\"item.title\"\n          v-show=\"!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state) : true)\"\n          class=\"flex-center\"\n          :class=\"[\n            stateSidebar ? '' : 'aspect-1x1',\n            horizontal ? 'w-100 flex flex-nowrap' : '',\n          ]\"\n        >\n          <button\n            @click=\"item.route ? router.push(processRoute(item.route)) : null\"\n            class=\"flex-child-default flex-center gap-thin flex sidebar-item-btn\"\n            :class=\"[\n              stateSidebar || horizontal ? 'expanded-item pd-thin' : 'w-100 h-100 justify-center',\n              horizontal ? 'w-max flex flex-nowrap' : '',\n              item.route && $route.path === processRoute(item.route) ? 'bg-light' : ''\n            ]\"\n          >\n            <component \n              v-if=\"item.iconComponent && !horizontal\" \n              :is=\"item.iconComponent\" \n              class=\"i-medium flex-child-default\" \n              :fill=\"globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n            />\n            <span  v-if=\"!item.iconComponent && !horizontal\"  class=\"i-medium sidebar-item-icon t-lh-1 flex-child-default\">{{ item.icon }}</span>\n            \n            <span\n              class=\"w-100 t-left sidebar-item-title\"\n              :class=\"{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }\"\n            >\n              {{ item.title }}\n            </span>\n            \n            <span\n              v-if=\"item.subItems && stateSidebar && !horizontal\"\n              class=\"mn-l-auto sidebar-dropdown-icon\"\n              :class=\"{ 'rotate-180': isSectionExpanded(item.title) }\"\n              @click.stop=\"toggleSection(item.title)\" \n            >\n              ▾\n            </span>\n            \n            <div v-if=\"item.route && $route.path === processRoute(item.route) && !horizontal\" class=\"sidebar-highlight-indicator\" />\n          <Dropdown \n            v-if=\"false\"\n            :label=\"hello\"\n            :align=\"'right'\"\n             class=\"cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra \"\n          >\n            <ul\n              v-if=\"item.subItems\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                    :fill=\"globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </Dropdown>\n          </button>\n          <!-- { component: IconEllipsis, class: 'i-regular t-transp' } -->\n\n\n          <transition\n            enter-active-class=\"dropdown-enter\"\n            leave-active-class=\"dropdown-leave\"\n            enter-from-class=\"dropdown-enter-from\"\n            enter-to-class=\"dropdown-enter-to\"\n            leave-from-class=\"dropdown-leave-from\"\n            leave-to-class=\"dropdown-leave-to\"\n          >\n            <ul\n              v-if=\"item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link flex flex-nowrap gap-thin pd-thin radius-small\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                    :fill=\"globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </transition>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n.sidebar-item-btn:hover .sidebar-item-icon,\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n.sidebar-item-btn:hover .sidebar-item-icon {\n  transform: scale(1.1);\n}\n\n\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n\n\n.sidebar-subitem-link:hover {\n  background: var(--light-regular);\n}\n\n.sidebar-item-btn:hover {\n  background: var(--light-regular);\n}\n\n\n\n.expanded-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: var(--small);\n}\n\n.sidebar-item-btn {\n  align-items: center;\n  border-radius: var(--small);\n  transition: all 0.2s;\n  position: relative;\n  border: none;\n  cursor: pointer;\n}\n\n\n.sidebar-item-title {\n  font-weight: 500;\n  transition: opacity 0.2s, width 0.2s;\n  white-space: nowrap;\n}\n\n.sidebar-item-icon {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n\n\n\n.sidebar-category {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-left: var(--regular);\n  padding-right: var(--regular);\n  transition: opacity 0.2s;\n  color: var(--grey-medium);\n}\n\n.sidebar-highlight-indicator {\n  position: absolute;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  border-radius: 0 var(--micro) var(--micro) 0;\n  background: linear-gradient(to bottom, var(--second-regular), var(--second-small));\n  transition: opacity 0.2s;\n}\n\n\n\n.sidebar-dropdown-icon {\n  color: var(--grey-medium);\n  transition: transform 0.2s;\n}\n\n.rotate-180 {\n  transform: rotate(180deg);\n}\n\n.sidebar-submenu {\n  margin-top: var(--micro);\n  margin-left: var(--semi);\n  display: flex;\n  flex-direction: column;\n  gap: var(--micro);\n}\n\n.sidebar-subitem-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  transition: all 0.2s;\n}\n\n\n.sidebar-subitem-title {\n  font-size: 0.875rem;\n}\n\n.hidden {\n  opacity: 0;\n  width: 0;\n  display: none;\n}\n\n.visible {\n  opacity: 1;\n  display: block;\n}\n\n/* Dropdown animations */\n.dropdown-enter, .dropdown-leave {\n  transition: all 0.3s ease-in-out;\n}\n\n.dropdown-enter-from, .dropdown-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n.dropdown-enter-to, .dropdown-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n</style>"],"names":["useRouter","ref","computed","watch","globals.state","auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,SAASA,UAAS,UAAA;AAKxB,UAAM,QAAQ;AAYd,UAAM,OAAO;AAIb,UAAM,mBAAmBC,IAAG,IAAC,CAAE,CAAA;AAG/B,UAAM,YAAYC,IAAQ,SAAC,MAAM,MAAM,mBAAmB,CAAE,CAAA;AAE5D,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,MAAM,cAAc;AACvB,YAAI,UAAU,MAAM,QAAQ,aAAW,QAAQ,KAAK,EAAE,KAAK,UAAQ,KAAK,UAAU,SAAS,KAAK,QAAQ,GAAG;AACzG,eAAK,cAAc;AACnB,qBAAW,MAAM;AACf,6BAAiB,MAAM,KAAK,KAAK;AAAA,UACzC,GAAS,EAAE;AAAA,QACX;AACI;AAAA,MACJ;AAEE,YAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK;AAElD,UAAI,UAAU,IAAI;AAChB,yBAAiB,MAAM,KAAK,KAAK;AAAA,MACrC,OAAS;AACL,yBAAiB,MAAM,OAAO,OAAO,CAAC;AAAA,MAC1C;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,aAAO,iBAAiB,MAAM,SAAS,KAAK;AAAA,IAC9C;AAEAC,QAAK,MAAC,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,CAAC,UAAU;AACb,yBAAiB,QAAQ,CAAA;AAAA,MAC7B;AAAA,IACA,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,UAAI,OAAO,UAAU,YAAY;AAC/B,eAAO,MAAMC,QAAAA,OAAeC,KAAU,KAAA;AAAA,MAC1C;AACE,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Navigation.vue.cjs","sources":["../../../../../../../../src/modules/globals/views/components/partials/Navigation.vue"],"sourcesContent":["<script setup>\nimport { ref, watch, computed } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals'\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\n// Import icons\nimport IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue'\nimport IconPayments from '@martyrs/src/modules/icons/entities/IconPayments.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\nimport IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'\nimport IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue'\nimport IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue'\nimport IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'\nimport IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue'\n\nconst router = useRouter()\n\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'\nimport Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'\n\nconst props = defineProps({\n  navigationItems: Array, // Fixed property name typo\n  theme: {\n    type: String,\n    default: \"light\"\n  },\n  stateSidebar: {\n    type: Boolean,\n    default: false\n  },\n  horizontal: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst emit = defineEmits([\n  'closeSidebar'\n])\n\nconst expandedSections = ref([])\n\n// Use navigationItems from props instead of nagigationItems\nconst menuItems = computed(() => props.navigationItems || [])\n\nconst toggleSection = (title) => {\n  if (!props.stateSidebar) {\n    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {\n      emit('closeSidebar')\n      setTimeout(() => {\n        expandedSections.value.push(title)\n      }, 50)\n    }\n    return\n  }\n  \n  const index = expandedSections.value.indexOf(title)\n\n  if (index === -1) {\n    expandedSections.value.push(title)\n  } else {\n    expandedSections.value.splice(index, 1)\n  }\n}\n\nconst isSectionExpanded = (title) => {\n  return expandedSections.value.includes(title)\n}\n\nwatch(() => props.stateSidebar, (newValue) => {\n  if (!newValue) {\n    expandedSections.value = []\n  }\n})\n\n// Process route functions with globals and auth data\nconst processRoute = (route) => {\n  if (typeof route === 'function') {\n    return route(globals.state, auth.state)\n  }\n  return route\n}\n</script>\n\n<template>\n  <nav\n    class=\"o-x-hidden h-100\"\n    :class=\"[\n      stateSidebar ? 'pd-small' : 'pd-micro',\n      horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap o-y-hidden' : 'o-y-scroll rows-1',\n    ]\"\n  >\n    <div \n      v-for=\"section in menuItems\" \n      v-show=\"!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state) : true)\"\n      :key=\"section.category\" \n      :class=\"[\n        horizontal ? 'w-max flex-child-default flex flex-nowrap' : '',\n        stateSidebar && !horizontal ? 'mn-t-medium' : '',\n      ]\"\n      class=\"\"\n    >\n      <div \n        class=\"sidebar-category\"\n        :class=\"{ \n          'hidden': !stateSidebar || horizontal, \n          'visible': stateSidebar && !horizontal,\n          't-black': theme === 'light',\n          't-white':  theme === 'dark'\n        }\"\n      >\n        {{ section.category }}\n      </div>\n\n      <ul \n        :class=\"[\n          horizontal ? 'w-100 gap-micro flex flex-nowrap' : 'flex flex-column gap-thin',\n        ]\"\n      >\n        <li \n          v-for=\"item in section.items\" \n          :key=\"item.title\"\n          v-show=\"!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state) : true)\"\n          class=\"flex-center\"\n          :class=\"[\n            stateSidebar ? '' : '',\n            horizontal ? 'w-100 flex flex-nowrap' : '',\n            stateSidebar && !horizontal ? '' : 'aspect-1x1'\n          ]\"\n        >\n          <button\n            @click=\"item.route ? router.push(processRoute(item.route)) : null\"\n            class=\"flex-child-default flex-center gap-thin flex sidebar-item-btn\"\n            :class=\"[\n              stateSidebar || horizontal ? 'expanded-item pd-thin' : 'w-100 h-100 justify-center',\n              horizontal ? 'w-max flex flex-nowrap' : '',\n              item.route && $route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',\n              theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'\n            ]\"\n          >\n            <component \n              v-if=\"item.iconComponent && !horizontal\" \n              :is=\"item.iconComponent\" \n              class=\"i-medium flex-child-default\" \n              :fill=\"globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n            />\n            <span  v-if=\"!item.iconComponent && !horizontal\"  class=\"i-medium sidebar-item-icon t-lh-1 flex-child-default\">{{ item.icon }}</span>\n            \n            <span\n              class=\"w-100 t-left sidebar-item-title\"\n              :class=\"{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }\"\n            >\n              {{ item.title }}\n            </span>\n            \n            <span\n              v-if=\"item.subItems && stateSidebar && !horizontal\"\n              class=\"mn-l-auto sidebar-dropdown-icon\"\n              :class=\"{ 'rotate-180': isSectionExpanded(item.title) }\"\n              @click.stop=\"toggleSection(item.title)\" \n            >\n              ▾\n            </span>\n            \n            <div v-if=\"item.route && $route.path === processRoute(item.route) && !horizontal\" class=\"sidebar-highlight-indicator\" />\n          <Dropdown \n            v-if=\"false\"\n            :label=\"hello\"\n            :align=\"'right'\"\n             class=\"cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra \"\n          >\n            <ul\n              v-if=\"item.subItems\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                    :fill=\"globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </Dropdown>\n          </button>\n          <!-- { component: IconEllipsis, class: 'i-regular t-transp' } -->\n\n\n          <transition\n            enter-active-class=\"dropdown-enter\"\n            leave-active-class=\"dropdown-leave\"\n            enter-from-class=\"dropdown-enter-from\"\n            enter-to-class=\"dropdown-enter-to\"\n            leave-from-class=\"dropdown-leave-from\"\n            leave-to-class=\"dropdown-leave-to\"\n          >\n            <ul\n              v-if=\"item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link flex flex-nowrap gap-thin pd-thin radius-small\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                   :fill=\"globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </transition>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n.sidebar-item-btn:hover .sidebar-item-icon,\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n.sidebar-item-btn:hover .sidebar-item-icon {\n  transform: scale(1.1);\n}\n\n\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n\n\n.expanded-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: var(--small);\n}\n\n.sidebar-item-btn {\n  align-items: center;\n  border-radius: var(--small);\n  transition: all 0.2s;\n  position: relative;\n  border: none;\n  cursor: pointer;\n}\n\n\n.sidebar-item-title {\n  font-weight: 500;\n  transition: opacity 0.2s, width 0.2s;\n  white-space: nowrap;\n}\n\n.sidebar-item-icon {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n\n\n\n.sidebar-category {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-left: var(--regular);\n  padding-right: var(--regular);\n  transition: opacity 0.2s;\n  color: var(--grey-medium);\n}\n\n.sidebar-highlight-indicator {\n  position: absolute;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  border-radius: 0 var(--micro) var(--micro) 0;\n  background: linear-gradient(to bottom, var(--second-regular), var(--second-small));\n  transition: opacity 0.2s;\n}\n\n\n\n.sidebar-dropdown-icon {\n  color: var(--grey-medium);\n  transition: transform 0.2s;\n}\n\n.rotate-180 {\n  transform: rotate(180deg);\n}\n\n.sidebar-submenu {\n  margin-top: var(--micro);\n  margin-left: var(--semi);\n  display: flex;\n  flex-direction: column;\n  gap: var(--micro);\n}\n\n.sidebar-subitem-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  transition: all 0.2s;\n}\n\n\n.sidebar-subitem-title {\n  font-size: 0.875rem;\n}\n\n.hidden {\n  opacity: 0;\n  width: 0;\n  display: none;\n}\n\n.visible {\n  opacity: 1;\n  display: block;\n}\n\n/* Dropdown animations */\n.dropdown-enter, .dropdown-leave {\n  transition: all 0.3s ease-in-out;\n}\n\n.dropdown-enter-from, .dropdown-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n.dropdown-enter-to, .dropdown-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n</style>"],"names":["useRouter","ref","computed","watch","globals.state","auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,SAASA,UAAS,UAAA;AAKxB,UAAM,QAAQ;AAgBd,UAAM,OAAO;AAIb,UAAM,mBAAmBC,IAAG,IAAC,CAAE,CAAA;AAG/B,UAAM,YAAYC,IAAQ,SAAC,MAAM,MAAM,mBAAmB,CAAE,CAAA;AAE5D,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,MAAM,cAAc;AACvB,YAAI,UAAU,MAAM,QAAQ,aAAW,QAAQ,KAAK,EAAE,KAAK,UAAQ,KAAK,UAAU,SAAS,KAAK,QAAQ,GAAG;AACzG,eAAK,cAAc;AACnB,qBAAW,MAAM;AACf,6BAAiB,MAAM,KAAK,KAAK;AAAA,UACzC,GAAS,EAAE;AAAA,QACX;AACI;AAAA,MACJ;AAEE,YAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK;AAElD,UAAI,UAAU,IAAI;AAChB,yBAAiB,MAAM,KAAK,KAAK;AAAA,MACrC,OAAS;AACL,yBAAiB,MAAM,OAAO,OAAO,CAAC;AAAA,MAC1C;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,aAAO,iBAAiB,MAAM,SAAS,KAAK;AAAA,IAC9C;AAEAC,QAAK,MAAC,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,CAAC,UAAU;AACb,yBAAiB,QAAQ,CAAA;AAAA,MAC7B;AAAA,IACA,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,UAAI,OAAO,UAAU,YAAY;AAC/B,eAAO,MAAMC,QAAAA,OAAeC,KAAU,KAAA;AAAA,MAC1C;AACE,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/partials/Navigation.vue.js

@@ -30,6 +30,10 @@ const _sfc_main = {
   props: {
     navigationItems: Array,
     // Fixed property name typo
+    theme: {
+      type: String,
+      default: "light"
+    },
     stateSidebar: {
       type: Boolean,
       default: false
@@ -81,9 +85,9 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("nav", {
-        class: normalizeClass(["o-y-scroll o-x-hidden h-100", [
+        class: normalizeClass(["o-x-hidden h-100", [
           __props.stateSidebar ? "pd-small" : "pd-micro",
-          __props.horizontal ? "w-100 desktop-only flex flex-center flex-nowrap" : "rows-1"
+          __props.horizontal ? "w-100 desktop-only flex flex-center flex-nowrap o-y-hidden" : "o-y-scroll rows-1"
         ]])
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(menuItems.value, (section) => {
@@ -97,7 +101,9 @@ const _sfc_main = {
             createElementVNode("div", {
               class: normalizeClass(["sidebar-category", {
                 "hidden": !__props.stateSidebar || __props.horizontal,
-                "visible": __props.stateSidebar && !__props.horizontal
+                "visible": __props.stateSidebar && !__props.horizontal,
+                "t-black": __props.theme === "light",
+                "t-white": __props.theme === "dark"
               }])
             }, toDisplayString(section.category), 3),
             createElementVNode("ul", {
@@ -109,8 +115,9 @@ const _sfc_main = {
                 return withDirectives((openBlock(), createElementBlock("li", {
                   key: item.title,
                   class: normalizeClass(["flex-center", [
-                    __props.stateSidebar ? "" : "aspect-1x1",
-                    __props.horizontal ? "w-100 flex flex-nowrap" : ""
+                    __props.stateSidebar ? "" : "",
+                    __props.horizontal ? "w-100 flex flex-nowrap" : "",
+                    __props.stateSidebar && !__props.horizontal ? "" : "aspect-1x1"
                   ]])
                 }, [
                   createElementVNode("button", {
@@ -118,13 +125,14 @@ const _sfc_main = {
                     class: normalizeClass(["flex-child-default flex-center gap-thin flex sidebar-item-btn", [
                       __props.stateSidebar || __props.horizontal ? "expanded-item pd-thin" : "w-100 h-100 justify-center",
                       __props.horizontal ? "w-max flex flex-nowrap" : "",
-                      item.route && _ctx.$route.path === processRoute(item.route) ? "bg-light" : ""
+                      item.route && _ctx.$route.path === processRoute(item.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                      __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
                     ]])
                   }, [
                     item.iconComponent && !__props.horizontal ? (openBlock(), createBlock(resolveDynamicComponent(item.iconComponent), {
                       key: 0,
                       class: "i-medium flex-child-default",
-                      fill: state.theme.darkmode ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
+                      fill: state.theme.darkmode || __props.theme === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
                     }, null, 8, ["fill"])) : createCommentVNode("", true),
                     !item.iconComponent && !__props.horizontal ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(item.icon), 1)) : createCommentVNode("", true),
                     createElementVNode("span", {
@@ -160,7 +168,7 @@ const _sfc_main = {
                               subItem.iconComponent ? (openBlock(), createBlock(resolveDynamicComponent(subItem.iconComponent), {
                                 key: 0,
                                 class: "sidebar-subitem-icon i-medium",
-                                fill: state.theme.darkmode ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
+                                fill: state.theme.darkmode || __props.theme === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.25)"
                               }, null, 8, ["fill"])) : (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(subItem.icon), 1)),
                               createElementVNode("span", _hoisted_12, toDisplayString(subItem.title), 1)
                             ], 8, _hoisted_10)
@@ -183,7 +191,7 @@ const _sfc_main = {
     };
   }
 };
-const Navigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-baa33ec9"]]);
+const Navigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43d4ca8b"]]);
 export {
   Navigation as default
 };

package/dist/martyrs/src/modules/globals/views/components/partials/Navigation.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.vue.js","sources":["../../../../../../../../src/modules/globals/views/components/partials/Navigation.vue"],"sourcesContent":["<script setup>\nimport { ref, watch, computed } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals'\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\n// Import icons\nimport IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue'\nimport IconPayments from '@martyrs/src/modules/icons/entities/IconPayments.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\nimport IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'\nimport IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue'\nimport IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue'\nimport IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'\nimport IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue'\n\nconst router = useRouter()\n\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'\nimport Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'\n\nconst props = defineProps({\n  navigationItems: Array, // Fixed property name typo\n  stateSidebar: {\n    type: Boolean,\n    default: false\n  },\n  horizontal: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst emit = defineEmits([\n  'closeSidebar'\n])\n\nconst expandedSections = ref([])\n\n// Use navigationItems from props instead of nagigationItems\nconst menuItems = computed(() => props.navigationItems || [])\n\nconst toggleSection = (title) => {\n  if (!props.stateSidebar) {\n    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {\n      emit('closeSidebar')\n      setTimeout(() => {\n        expandedSections.value.push(title)\n      }, 50)\n    }\n    return\n  }\n  \n  const index = expandedSections.value.indexOf(title)\n\n  if (index === -1) {\n    expandedSections.value.push(title)\n  } else {\n    expandedSections.value.splice(index, 1)\n  }\n}\n\nconst isSectionExpanded = (title) => {\n  return expandedSections.value.includes(title)\n}\n\nwatch(() => props.stateSidebar, (newValue) => {\n  if (!newValue) {\n    expandedSections.value = []\n  }\n})\n\n// Process route functions with globals and auth data\nconst processRoute = (route) => {\n  if (typeof route === 'function') {\n    return route(globals.state, auth.state)\n  }\n  return route\n}\n</script>\n\n<template>\n  <nav\n    class=\"o-y-scroll o-x-hidden h-100\"\n    :class=\"[\n      stateSidebar ? 'pd-small' : 'pd-micro',\n      horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap' : 'rows-1',\n    ]\"\n  >\n    <div \n      v-for=\"section in menuItems\" \n      v-show=\"!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state) : true)\"\n      :key=\"section.category\" \n      :class=\"[\n        horizontal ? 'w-max flex-child-default flex flex-nowrap' : '',\n         stateSidebar && !horizontal ? 'mn-t-medium' : '',\n      ]\"\n      class=\"\"\n    >\n      <div \n        class=\"sidebar-category\"\n        :class=\"{ \n          'hidden': !stateSidebar || horizontal, \n          'visible': stateSidebar && !horizontal \n        }\"\n      >\n        {{ section.category }}\n      </div>\n\n      <ul \n        :class=\"[\n          horizontal ? 'w-100 gap-micro flex flex-nowrap' : 'flex flex-column gap-thin',\n        ]\"\n      >\n        <li \n          v-for=\"item in section.items\" \n          :key=\"item.title\"\n          v-show=\"!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state) : true)\"\n          class=\"flex-center\"\n          :class=\"[\n            stateSidebar ? '' : 'aspect-1x1',\n            horizontal ? 'w-100 flex flex-nowrap' : '',\n          ]\"\n        >\n          <button\n            @click=\"item.route ? router.push(processRoute(item.route)) : null\"\n            class=\"flex-child-default flex-center gap-thin flex sidebar-item-btn\"\n            :class=\"[\n              stateSidebar || horizontal ? 'expanded-item pd-thin' : 'w-100 h-100 justify-center',\n              horizontal ? 'w-max flex flex-nowrap' : '',\n              item.route && $route.path === processRoute(item.route) ? 'bg-light' : ''\n            ]\"\n          >\n            <component \n              v-if=\"item.iconComponent && !horizontal\" \n              :is=\"item.iconComponent\" \n              class=\"i-medium flex-child-default\" \n              :fill=\"globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n            />\n            <span  v-if=\"!item.iconComponent && !horizontal\"  class=\"i-medium sidebar-item-icon t-lh-1 flex-child-default\">{{ item.icon }}</span>\n            \n            <span\n              class=\"w-100 t-left sidebar-item-title\"\n              :class=\"{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }\"\n            >\n              {{ item.title }}\n            </span>\n            \n            <span\n              v-if=\"item.subItems && stateSidebar && !horizontal\"\n              class=\"mn-l-auto sidebar-dropdown-icon\"\n              :class=\"{ 'rotate-180': isSectionExpanded(item.title) }\"\n              @click.stop=\"toggleSection(item.title)\" \n            >\n              ▾\n            </span>\n            \n            <div v-if=\"item.route && $route.path === processRoute(item.route) && !horizontal\" class=\"sidebar-highlight-indicator\" />\n          <Dropdown \n            v-if=\"false\"\n            :label=\"hello\"\n            :align=\"'right'\"\n             class=\"cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra \"\n          >\n            <ul\n              v-if=\"item.subItems\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                    :fill=\"globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </Dropdown>\n          </button>\n          <!-- { component: IconEllipsis, class: 'i-regular t-transp' } -->\n\n\n          <transition\n            enter-active-class=\"dropdown-enter\"\n            leave-active-class=\"dropdown-leave\"\n            enter-from-class=\"dropdown-enter-from\"\n            enter-to-class=\"dropdown-enter-to\"\n            leave-from-class=\"dropdown-leave-from\"\n            leave-to-class=\"dropdown-leave-to\"\n          >\n            <ul\n              v-if=\"item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link flex flex-nowrap gap-thin pd-thin radius-small\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                    :fill=\"globals.state.theme.darkmode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </transition>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n.sidebar-item-btn:hover .sidebar-item-icon,\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n.sidebar-item-btn:hover .sidebar-item-icon {\n  transform: scale(1.1);\n}\n\n\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n\n\n.sidebar-subitem-link:hover {\n  background: var(--light-regular);\n}\n\n.sidebar-item-btn:hover {\n  background: var(--light-regular);\n}\n\n\n\n.expanded-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: var(--small);\n}\n\n.sidebar-item-btn {\n  align-items: center;\n  border-radius: var(--small);\n  transition: all 0.2s;\n  position: relative;\n  border: none;\n  cursor: pointer;\n}\n\n\n.sidebar-item-title {\n  font-weight: 500;\n  transition: opacity 0.2s, width 0.2s;\n  white-space: nowrap;\n}\n\n.sidebar-item-icon {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n\n\n\n.sidebar-category {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-left: var(--regular);\n  padding-right: var(--regular);\n  transition: opacity 0.2s;\n  color: var(--grey-medium);\n}\n\n.sidebar-highlight-indicator {\n  position: absolute;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  border-radius: 0 var(--micro) var(--micro) 0;\n  background: linear-gradient(to bottom, var(--second-regular), var(--second-small));\n  transition: opacity 0.2s;\n}\n\n\n\n.sidebar-dropdown-icon {\n  color: var(--grey-medium);\n  transition: transform 0.2s;\n}\n\n.rotate-180 {\n  transform: rotate(180deg);\n}\n\n.sidebar-submenu {\n  margin-top: var(--micro);\n  margin-left: var(--semi);\n  display: flex;\n  flex-direction: column;\n  gap: var(--micro);\n}\n\n.sidebar-subitem-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  transition: all 0.2s;\n}\n\n\n.sidebar-subitem-title {\n  font-size: 0.875rem;\n}\n\n.hidden {\n  opacity: 0;\n  width: 0;\n  display: none;\n}\n\n.visible {\n  opacity: 1;\n  display: block;\n}\n\n/* Dropdown animations */\n.dropdown-enter, .dropdown-leave {\n  transition: all 0.3s ease-in-out;\n}\n\n.dropdown-enter-from, .dropdown-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n.dropdown-enter-to, .dropdown-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n</style>"],"names":["globals.state","auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,SAAS,UAAS;AAKxB,UAAM,QAAQ;AAYd,UAAM,OAAO;AAIb,UAAM,mBAAmB,IAAI,CAAE,CAAA;AAG/B,UAAM,YAAY,SAAS,MAAM,MAAM,mBAAmB,CAAE,CAAA;AAE5D,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,MAAM,cAAc;AACvB,YAAI,UAAU,MAAM,QAAQ,aAAW,QAAQ,KAAK,EAAE,KAAK,UAAQ,KAAK,UAAU,SAAS,KAAK,QAAQ,GAAG;AACzG,eAAK,cAAc;AACnB,qBAAW,MAAM;AACf,6BAAiB,MAAM,KAAK,KAAK;AAAA,UACzC,GAAS,EAAE;AAAA,QACX;AACI;AAAA,MACJ;AAEE,YAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK;AAElD,UAAI,UAAU,IAAI;AAChB,yBAAiB,MAAM,KAAK,KAAK;AAAA,MACrC,OAAS;AACL,yBAAiB,MAAM,OAAO,OAAO,CAAC;AAAA,MAC1C;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,aAAO,iBAAiB,MAAM,SAAS,KAAK;AAAA,IAC9C;AAEA,UAAM,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,CAAC,UAAU;AACb,yBAAiB,QAAQ,CAAA;AAAA,MAC7B;AAAA,IACA,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,UAAI,OAAO,UAAU,YAAY;AAC/B,eAAO,MAAMA,OAAeC,OAAU;AAAA,MAC1C;AACE,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Navigation.vue.js","sources":["../../../../../../../../src/modules/globals/views/components/partials/Navigation.vue"],"sourcesContent":["<script setup>\nimport { ref, watch, computed } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals'\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\n// Import icons\nimport IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue'\nimport IconPayments from '@martyrs/src/modules/icons/entities/IconPayments.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\nimport IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'\nimport IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue'\nimport IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue'\nimport IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'\nimport IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue'\n\nconst router = useRouter()\n\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'\nimport Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'\n\nconst props = defineProps({\n  navigationItems: Array, // Fixed property name typo\n  theme: {\n    type: String,\n    default: \"light\"\n  },\n  stateSidebar: {\n    type: Boolean,\n    default: false\n  },\n  horizontal: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst emit = defineEmits([\n  'closeSidebar'\n])\n\nconst expandedSections = ref([])\n\n// Use navigationItems from props instead of nagigationItems\nconst menuItems = computed(() => props.navigationItems || [])\n\nconst toggleSection = (title) => {\n  if (!props.stateSidebar) {\n    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {\n      emit('closeSidebar')\n      setTimeout(() => {\n        expandedSections.value.push(title)\n      }, 50)\n    }\n    return\n  }\n  \n  const index = expandedSections.value.indexOf(title)\n\n  if (index === -1) {\n    expandedSections.value.push(title)\n  } else {\n    expandedSections.value.splice(index, 1)\n  }\n}\n\nconst isSectionExpanded = (title) => {\n  return expandedSections.value.includes(title)\n}\n\nwatch(() => props.stateSidebar, (newValue) => {\n  if (!newValue) {\n    expandedSections.value = []\n  }\n})\n\n// Process route functions with globals and auth data\nconst processRoute = (route) => {\n  if (typeof route === 'function') {\n    return route(globals.state, auth.state)\n  }\n  return route\n}\n</script>\n\n<template>\n  <nav\n    class=\"o-x-hidden h-100\"\n    :class=\"[\n      stateSidebar ? 'pd-small' : 'pd-micro',\n      horizontal ? 'w-100 desktop-only flex flex-center flex-nowrap o-y-hidden' : 'o-y-scroll rows-1',\n    ]\"\n  >\n    <div \n      v-for=\"section in menuItems\" \n      v-show=\"!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state) : true)\"\n      :key=\"section.category\" \n      :class=\"[\n        horizontal ? 'w-max flex-child-default flex flex-nowrap' : '',\n        stateSidebar && !horizontal ? 'mn-t-medium' : '',\n      ]\"\n      class=\"\"\n    >\n      <div \n        class=\"sidebar-category\"\n        :class=\"{ \n          'hidden': !stateSidebar || horizontal, \n          'visible': stateSidebar && !horizontal,\n          't-black': theme === 'light',\n          't-white':  theme === 'dark'\n        }\"\n      >\n        {{ section.category }}\n      </div>\n\n      <ul \n        :class=\"[\n          horizontal ? 'w-100 gap-micro flex flex-nowrap' : 'flex flex-column gap-thin',\n        ]\"\n      >\n        <li \n          v-for=\"item in section.items\" \n          :key=\"item.title\"\n          v-show=\"!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state) : true)\"\n          class=\"flex-center\"\n          :class=\"[\n            stateSidebar ? '' : '',\n            horizontal ? 'w-100 flex flex-nowrap' : '',\n            stateSidebar && !horizontal ? '' : 'aspect-1x1'\n          ]\"\n        >\n          <button\n            @click=\"item.route ? router.push(processRoute(item.route)) : null\"\n            class=\"flex-child-default flex-center gap-thin flex sidebar-item-btn\"\n            :class=\"[\n              stateSidebar || horizontal ? 'expanded-item pd-thin' : 'w-100 h-100 justify-center',\n              horizontal ? 'w-max flex flex-nowrap' : '',\n              item.route && $route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',\n              theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'\n            ]\"\n          >\n            <component \n              v-if=\"item.iconComponent && !horizontal\" \n              :is=\"item.iconComponent\" \n              class=\"i-medium flex-child-default\" \n              :fill=\"globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n            />\n            <span  v-if=\"!item.iconComponent && !horizontal\"  class=\"i-medium sidebar-item-icon t-lh-1 flex-child-default\">{{ item.icon }}</span>\n            \n            <span\n              class=\"w-100 t-left sidebar-item-title\"\n              :class=\"{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }\"\n            >\n              {{ item.title }}\n            </span>\n            \n            <span\n              v-if=\"item.subItems && stateSidebar && !horizontal\"\n              class=\"mn-l-auto sidebar-dropdown-icon\"\n              :class=\"{ 'rotate-180': isSectionExpanded(item.title) }\"\n              @click.stop=\"toggleSection(item.title)\" \n            >\n              ▾\n            </span>\n            \n            <div v-if=\"item.route && $route.path === processRoute(item.route) && !horizontal\" class=\"sidebar-highlight-indicator\" />\n          <Dropdown \n            v-if=\"false\"\n            :label=\"hello\"\n            :align=\"'right'\"\n             class=\"cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra \"\n          >\n            <ul\n              v-if=\"item.subItems\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                    :fill=\"globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </Dropdown>\n          </button>\n          <!-- { component: IconEllipsis, class: 'i-regular t-transp' } -->\n\n\n          <transition\n            enter-active-class=\"dropdown-enter\"\n            leave-active-class=\"dropdown-leave\"\n            enter-from-class=\"dropdown-enter-from\"\n            enter-to-class=\"dropdown-enter-to\"\n            leave-from-class=\"dropdown-leave-from\"\n            leave-to-class=\"dropdown-leave-to\"\n          >\n            <ul\n              v-if=\"item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal\"\n              class=\"sidebar-submenu\"\n            >\n              <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n                <a \n                  @click=\"subItem.route && router.push(subItem.route)\" \n                  href=\"#\" \n                  class=\"sidebar-subitem-link flex flex-nowrap gap-thin pd-thin radius-small\"\n                >\n                  <component \n                    v-if=\"subItem.iconComponent\" \n                    :is=\"subItem.iconComponent\" \n                    class=\"sidebar-subitem-icon i-medium\" \n                   :fill=\"globals.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                  />\n                  <span v-else class=\"sidebar-subitem-icon\">{{ subItem.icon }}</span>\n                  <span class=\"sidebar-subitem-title\">{{ subItem.title }}</span>\n                </a>\n              </li>\n            </ul>\n          </transition>\n        </li>\n      </ul>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n.sidebar-item-btn:hover .sidebar-item-icon,\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n.sidebar-item-btn:hover .sidebar-item-icon {\n  transform: scale(1.1);\n}\n\n\n.sidebar-subitem-link:hover .sidebar-subitem-icon {\n  transform: scale(1.1);\n}\n\n\n\n.expanded-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: var(--small);\n}\n\n.sidebar-item-btn {\n  align-items: center;\n  border-radius: var(--small);\n  transition: all 0.2s;\n  position: relative;\n  border: none;\n  cursor: pointer;\n}\n\n\n.sidebar-item-title {\n  font-weight: 500;\n  transition: opacity 0.2s, width 0.2s;\n  white-space: nowrap;\n}\n\n.sidebar-item-icon {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n\n\n\n.sidebar-category {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-left: var(--regular);\n  padding-right: var(--regular);\n  transition: opacity 0.2s;\n  color: var(--grey-medium);\n}\n\n.sidebar-highlight-indicator {\n  position: absolute;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  border-radius: 0 var(--micro) var(--micro) 0;\n  background: linear-gradient(to bottom, var(--second-regular), var(--second-small));\n  transition: opacity 0.2s;\n}\n\n\n\n.sidebar-dropdown-icon {\n  color: var(--grey-medium);\n  transition: transform 0.2s;\n}\n\n.rotate-180 {\n  transform: rotate(180deg);\n}\n\n.sidebar-submenu {\n  margin-top: var(--micro);\n  margin-left: var(--semi);\n  display: flex;\n  flex-direction: column;\n  gap: var(--micro);\n}\n\n.sidebar-subitem-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  transition: all 0.2s;\n}\n\n\n.sidebar-subitem-title {\n  font-size: 0.875rem;\n}\n\n.hidden {\n  opacity: 0;\n  width: 0;\n  display: none;\n}\n\n.visible {\n  opacity: 1;\n  display: block;\n}\n\n/* Dropdown animations */\n.dropdown-enter, .dropdown-leave {\n  transition: all 0.3s ease-in-out;\n}\n\n.dropdown-enter-from, .dropdown-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n.dropdown-enter-to, .dropdown-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n</style>"],"names":["globals.state","auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,SAAS,UAAS;AAKxB,UAAM,QAAQ;AAgBd,UAAM,OAAO;AAIb,UAAM,mBAAmB,IAAI,CAAE,CAAA;AAG/B,UAAM,YAAY,SAAS,MAAM,MAAM,mBAAmB,CAAE,CAAA;AAE5D,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,MAAM,cAAc;AACvB,YAAI,UAAU,MAAM,QAAQ,aAAW,QAAQ,KAAK,EAAE,KAAK,UAAQ,KAAK,UAAU,SAAS,KAAK,QAAQ,GAAG;AACzG,eAAK,cAAc;AACnB,qBAAW,MAAM;AACf,6BAAiB,MAAM,KAAK,KAAK;AAAA,UACzC,GAAS,EAAE;AAAA,QACX;AACI;AAAA,MACJ;AAEE,YAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK;AAElD,UAAI,UAAU,IAAI;AAChB,yBAAiB,MAAM,KAAK,KAAK;AAAA,MACrC,OAAS;AACL,yBAAiB,MAAM,OAAO,OAAO,CAAC;AAAA,MAC1C;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,aAAO,iBAAiB,MAAM,SAAS,KAAK;AAAA,IAC9C;AAEA,UAAM,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,CAAC,UAAU;AACb,yBAAiB,QAAQ,CAAA;AAAA,MAC7B;AAAA,IACA,CAAC;AAGD,UAAM,eAAe,CAAC,UAAU;AAC9B,UAAI,OAAO,UAAU,YAAY;AAC/B,eAAO,MAAMA,OAAeC,OAAU;AAAA,MAC1C;AACE,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/partials/NavigationBar.vue.cjs

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 const vueI18n = require("vue-i18n");
 const IconShopcart = require("../../../../icons/entities/IconShopcart.vue.cjs");
 const IconProfile = require("../../../../icons/entities/IconProfile.vue.cjs");
-const Button = require("../../../../../components/Button/Button.vue.cjs");
+const Button = require("../../../../../components/Button/Button.vue2.cjs");
 const globals = require("../../store/globals.cjs");
 const shopcart = require("../../../../orders/store/shopcart.cjs");
 const auth = require("../../../../auth/views/store/auth.cjs");

package/dist/martyrs/src/modules/globals/views/components/partials/NavigationBar.vue.js

@@ -3,7 +3,7 @@ import { useRouter, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import _sfc_main$2 from "../../../../icons/entities/IconShopcart.vue.js";
 import _sfc_main$3 from "../../../../icons/entities/IconProfile.vue.js";
-import _sfc_main$1 from "../../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../../components/Button/Button.vue2.js";
 import { state } from "../../store/globals.js";
 import { getters, actions } from "../../../../orders/store/shopcart.js";
 import { state as state$1 } from "../../../../auth/views/store/auth.js";

package/dist/martyrs/src/modules/globals/views/components/partials/Sidebar.vue.cjs

@@ -7,6 +7,10 @@ const _hoisted_1 = { class: "dark-mode-icon" };
 const _sfc_main = {
   __name: "Sidebar",
   props: {
+    theme: {
+      type: String,
+      default: "light"
+    },
     stateSidebar: {
       type: Boolean,
       default: false
@@ -26,14 +30,22 @@ const _sfc_main = {
   setup(__props, { emit: __emit }) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("aside", {
-        class: vue.normalizeClass(["transition-linear w-min-0 o-hidden flex-child-default z-index-2 bg-white br-r br-solid br-light flex flex-column h-100", [
+        class: vue.normalizeClass(["transition-linear w-min-0 o-hidden flex-child-default z-index-2 br-r br-solid flex flex-column h-100", [
           "sidebar-container",
-          __props.stateSidebar ? `${__props.width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100` : `${__props.widthHidden} mobile:w-0 br-zero`
+          // 
+          __props.stateSidebar ? `${__props.width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100` : `${__props.widthHidden} mobile:w-0 br-zero`,
+          // 
+          __props.theme === "light" ? "t-black bg-white br-light" : "t-white bg-black br-dark"
         ]])
       }, [
         vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["sidebar-footer", { "pd-micro": !__props.stateSidebar, "pd-small": __props.stateSidebar }])
+          class: vue.normalizeClass(["br-solid br-t", {
+            "pd-micro": !__props.stateSidebar,
+            "pd-small": __props.stateSidebar,
+            "br-light": __props.theme === "light",
+            "br-dark": __props.theme === "dark"
+          }])
         }, [
           vue.createElementVNode("button", {
             onClick: _cache[0] || (_cache[0] = () => globals.actions.toggleTheme()),
@@ -51,6 +63,6 @@ const _sfc_main = {
     };
   }
 };
-const Sidebar = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-be741cc6"]]);
+const Sidebar = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-948b3b5a"]]);
 exports.default = Sidebar;
 //# sourceMappingURL=Sidebar.vue.cjs.map

package/dist/martyrs/src/modules/globals/views/components/partials/Sidebar.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Sidebar.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/partials/Sidebar.vue.js

@@ -5,6 +5,10 @@ const _hoisted_1 = { class: "dark-mode-icon" };
 const _sfc_main = {
   __name: "Sidebar",
   props: {
+    theme: {
+      type: String,
+      default: "light"
+    },
     stateSidebar: {
       type: Boolean,
       default: false
@@ -24,14 +28,22 @@ const _sfc_main = {
   setup(__props, { emit: __emit }) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("aside", {
-        class: normalizeClass(["transition-linear w-min-0 o-hidden flex-child-default z-index-2 bg-white br-r br-solid br-light flex flex-column h-100", [
+        class: normalizeClass(["transition-linear w-min-0 o-hidden flex-child-default z-index-2 br-r br-solid flex flex-column h-100", [
           "sidebar-container",
-          __props.stateSidebar ? `${__props.width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100` : `${__props.widthHidden} mobile:w-0 br-zero`
+          // 
+          __props.stateSidebar ? `${__props.width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100` : `${__props.widthHidden} mobile:w-0 br-zero`,
+          // 
+          __props.theme === "light" ? "t-black bg-white br-light" : "t-white bg-black br-dark"
         ]])
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         createElementVNode("div", {
-          class: normalizeClass(["sidebar-footer", { "pd-micro": !__props.stateSidebar, "pd-small": __props.stateSidebar }])
+          class: normalizeClass(["br-solid br-t", {
+            "pd-micro": !__props.stateSidebar,
+            "pd-small": __props.stateSidebar,
+            "br-light": __props.theme === "light",
+            "br-dark": __props.theme === "dark"
+          }])
         }, [
           createElementVNode("button", {
             onClick: _cache[0] || (_cache[0] = () => actions.toggleTheme()),
@@ -49,7 +61,7 @@ const _sfc_main = {
     };
   }
 };
-const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be741cc6"]]);
+const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-948b3b5a"]]);
 export {
   Sidebar as default
 };

package/dist/martyrs/src/modules/globals/views/components/partials/Sidebar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Sidebar.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/sections/SectionPageTitle.vue.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const Tab = require("../../../../../components/Tab/Tab.vue.cjs");
+const Tab = require("../../../../../components/Tab/Tab.vue2.cjs");
 const _hoisted_1 = { class: "flex-v-center flex-nowrap flex" };
 const _hoisted_2 = { class: "h2 mn-r-auto" };
 const _hoisted_3 = ["onClick"];

package/dist/martyrs/src/modules/globals/views/components/sections/SectionPageTitle.vue.js

@@ -1,5 +1,5 @@
 import { resolveComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, toDisplayString, Fragment, renderList, normalizeClass, withCtx, createTextVNode } from "vue";
-import _sfc_main$1 from "../../../../../components/Tab/Tab.vue.js";
+import _sfc_main$1 from "../../../../../components/Tab/Tab.vue2.js";
 const _hoisted_1 = { class: "flex-v-center flex-nowrap flex" };
 const _hoisted_2 = { class: "h2 mn-r-auto" };
 const _hoisted_3 = ["onClick"];

package/dist/martyrs/src/modules/landing/components/sections/SectionFeaturesImages.vue.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueI18n = require("vue-i18n");
+;/* empty css                             */
+const _hoisted_1 = {
+  id: "howtobuy",
+  class: "section"
+};
+const _hoisted_2 = { class: "mn-b-big t-center title" };
+const _hoisted_3 = { class: "mn-b-small" };
+const _hoisted_4 = { class: "w-m-60r mn-b-big mn-auto t-transp p-big" };
+const _hoisted_5 = { class: "cols-3 gap-thin" };
+const _hoisted_6 = ["src"];
+const _hoisted_7 = { class: "mn-b-medium" };
+const _hoisted_8 = { class: "t-transp" };
+const _sfc_main = {
+  __name: "SectionFeaturesImages",
+  props: {
+    title: String,
+    textData: {
+      type: Object,
+      default: () => ({
+        messages: {
+          en: {
+            title: "What is Weeder Token?",
+            subtitle: "WDT – the foundation of the Weeder community. It serves as a currency, a DAO instrument, and for many other purposes:",
+            features: [
+              {
+                image: "/images/howitworks/step1.png",
+                title: "Currency",
+                text: "WDT can be used as a digital currency within the Weeder ecosystem, allowing users to purchase products such as cannabis, advertising spaces, and other premium features on the platform."
+              },
+              {
+                image: "/images/howitworks/step2.png",
+                title: "Instument",
+                text: "As a DAO (Decentralized Autonomous Organization) instrument, WDT enables community governance and decision-making, allowing token holders to propose, discuss, and vote on various initiatives and developments within the Weeder ecosystem."
+              },
+              {
+                image: "/images/howitworks/step3.png",
+                title: "Invesment",
+                text: "Holding WDT tokens can provide potential investment returns as the Weeder ecosystem grows and gains value. Additionally, WDT serves for dividend distribution – those who stake their tokens earn income from the platform."
+              }
+            ]
+          },
+          ru: {
+            title: "Что такое Weeder Token?",
+            subtitle: "WDT – основа сообщества Weeder. Он выступает в качестве валюты, инструмента DAO и многих других целей:",
+            features: [
+              {
+                image: "/images/howitworks/step1.png",
+                title: "Валюта",
+                text: "WDT можно использовать как цифровую валюту в экосистеме Weeder, позволяя пользователям покупать товары, такие как марихуана, рекламные места и другие премиальные возможности на платформе."
+              },
+              {
+                image: "/images/howitworks/step2.png",
+                title: "Инструмент",
+                text: "В качестве инструмента DAO (Децентрализованной Автономной Организации), WDT позволяет управлять сообществом и принимать решения, давая держателям токенов возможность предлагать, обсуждать и голосовать за различные инициативы и развитие в рамках экосистемы Weeder."
+              },
+              {
+                image: "/images/howitworks/step3.png",
+                title: "Инвестиции",
+                text: "Хранение токенов WDT может обеспечить потенциальный инвестиционный доход по мере роста и увеличения стоимости экосистемы Weeder. Кроме того, WDT служит для распределения дивидендов – те, кто стейкают свои токены, получают доход с платформы."
+              }
+            ]
+          }
+        }
+      })
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t, tm } = vueI18n.useI18n(props.textData);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("section", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("h2", _hoisted_3, vue.toDisplayString(vue.unref(t)("title")), 1),
+          vue.createElementVNode("p", _hoisted_4, vue.toDisplayString(vue.unref(t)("subtitle")), 1)
+        ]),
+        vue.createElementVNode("div", _hoisted_5, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tm)("features"), (feature) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: feature.title,
+              class: "w-100 pd-medium bg-light radius-medium"
+            }, [
+              vue.createElementVNode("img", {
+                loading: "lazy",
+                class: "radius-medium bg-light h-max-20r object-fit-cover w-100 mn-b-medium",
+                src: feature.image
+              }, null, 8, _hoisted_6),
+              vue.createElementVNode("h3", _hoisted_7, vue.toDisplayString(feature.title), 1),
+              vue.createElementVNode("p", _hoisted_8, vue.toDisplayString(feature.text), 1)
+            ]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=SectionFeaturesImages.vue.cjs.map

package/dist/martyrs/src/modules/landing/components/sections/SectionFeaturesImages.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionFeaturesImages.vue.cjs","sources":["../../../../../../../src/modules/landing/components/sections/SectionFeaturesImages.vue"],"sourcesContent":["<template>\n  <section id=\"howtobuy\" class=\"section\">\n\n    <div class=\"mn-b-big t-center title\">\n      <h2 class=\"mn-b-small\">{{t('title')}}</h2>\n      <p class=\"w-m-60r mn-b-big mn-auto t-transp p-big\">\n        {{t('subtitle')}}\n      </p>\n    </div>\n\n    <div class=\"cols-3 gap-thin\">\n\n      <div \n        v-for=\"feature in tm('features')\" \n        :key=\"feature.title\" \n        class=\"w-100 pd-medium bg-light radius-medium\"\n      >\n        <img loading=\"lazy\" \n          class=\"radius-medium bg-light h-max-20r object-fit-cover w-100 mn-b-medium\" \n          :src=\"feature.image\"\n        > \n        <h3 class=\"mn-b-medium\">{{feature.title}}</h3>\n        <p class=\"t-transp\">{{feature.text}}</p>\n      </div>\n\n    </div>\n\n  </section>\n</template>\n\n\n<script setup>\nimport { useI18n }    from 'vue-i18n'\n  \nconst props = defineProps({\n    title: String,\n    textData: {\n      type: Object,\n      default: () => ({\n        messages: {\n          en: {\n            title: 'What is Weeder Token?',\n            subtitle: 'WDT – the foundation of the Weeder community. It serves as a currency, a DAO instrument, and for many other purposes:',\n            features: [\n              {\n                image: '/images/howitworks/step1.png',\n                title: 'Currency',\n                text: 'WDT can be used as a digital currency within the Weeder ecosystem, allowing users to purchase products such as cannabis, advertising spaces, and other premium features on the platform.',\n              },\n              {\n                image: '/images/howitworks/step2.png',\n                title: 'Instument',\n                text: 'As a DAO (Decentralized Autonomous Organization) instrument, WDT enables community governance and decision-making, allowing token holders to propose, discuss, and vote on various initiatives and developments within the Weeder ecosystem.',\n              },\n              {\n                image: '/images/howitworks/step3.png',\n                title: 'Invesment',\n                text: 'Holding WDT tokens can provide potential investment returns as the Weeder ecosystem grows and gains value. Additionally, WDT serves for dividend distribution – those who stake their tokens earn income from the platform.'\n              },\n            ]\n          },\n          ru: {\n            title: 'Что такое Weeder Token?',\n            subtitle: 'WDT – основа сообщества Weeder. Он выступает в качестве валюты, инструмента DAO и многих других целей:',\n            features: [\n              {\n                image: '/images/howitworks/step1.png',\n                title: 'Валюта',\n                text: 'WDT можно использовать как цифровую валюту в экосистеме Weeder, позволяя пользователям покупать товары, такие как марихуана, рекламные места и другие премиальные возможности на платформе.',\n              },\n              {\n                image: '/images/howitworks/step2.png',\n                title: 'Инструмент',\n                text: 'В качестве инструмента DAO (Децентрализованной Автономной Организации), WDT позволяет управлять сообществом и принимать решения, давая держателям токенов возможность предлагать, обсуждать и голосовать за различные инициативы и развитие в рамках экосистемы Weeder.',\n              },\n              {\n                image: '/images/howitworks/step3.png',\n                title: 'Инвестиции',\n                text: 'Хранение токенов WDT может обеспечить потенциальный инвестиционный доход по мере роста и увеличения стоимости экосистемы Weeder. Кроме того, WDT служит для распределения дивидендов – те, кто стейкают свои токены, получают доход с платформы.',\n              },\n            ]\n          }\n        }\n      })\n    }\n  })\n  const { t, tm } = useI18n(props.textData)\n</script>\n\n<style lang=\"scss\">\n\n#grid2 {\n  transition: 500ms;\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 3px;\n  background: crimson;\n}\n\n:where(.left, .center, .right) {\n  background: navajowhite;\n  transition: 300ms;\n}\n\n:where(.left, .center, .right):hover {\n  background: crimson;\n}\n\n#grid2:has(.left:hover) {\n  grid-template-columns: 2fr 0.5fr 0.5fr;\n  padding: 3rem;\n}\n\n#grid2:has(.center:hover) {\n  grid-template-columns: 0.5fr 2fr 0.5fr;\n  padding: 3rem;\n}\n#grid2:has(.right:hover) {\n  grid-template-columns: 0.5fr 0.5fr 2fr;\n  padding: 3rem;\n}\n</style>\n"],"names":["useI18n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,UAAM,QAAQ;AAoDZ,UAAM,EAAE,GAAG,GAAI,IAAGA,QAAO,QAAC,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}