@ozdao/martyrs 0.2.446 → 0.2.448

package/dist/martyrs/src/modules/events/components/pages/EventsBackoffice.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Tab = require("../../../../components/Tab/Tab.vue.cjs");
+const Tab = require("../../../../components/Tab/Tab.vue2.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const Table = require("../../../../components/Table/Table.vue.cjs");
 const CardEvent = require("../blocks/CardEvent.vue.cjs");

package/dist/martyrs/src/modules/events/components/pages/EventsBackoffice.vue.js

@@ -1,6 +1,6 @@
 import { ref, watch, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, createBlock, createVNode, isRef, withCtx, Fragment, renderList, withModifiers } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$1 from "../../../../components/Tab/Tab.vue.js";
+import _sfc_main$1 from "../../../../components/Tab/Tab.vue2.js";
 import _sfc_main$2 from "../../../../components/Feed/Feed.vue.js";
 import Table from "../../../../components/Table/Table.vue.js";
 import _sfc_main$3 from "../blocks/CardEvent.vue.js";

package/dist/martyrs/src/modules/gallery/components/pages/Gallery.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const PhotoViewer = require("../../../../components/PhotoViewer/PhotoViewer.vue.cjs");
 const SectionPageTitle = require("../../../globals/views/components/sections/SectionPageTitle.vue.cjs");
 const gallery = require("../../store/gallery.cjs");

package/dist/martyrs/src/modules/gallery/components/pages/Gallery.vue.js

@@ -1,6 +1,6 @@
 import { ref, createElementBlock, openBlock, createVNode, withCtx, unref, isRef, Fragment, renderList, createElementVNode } from "vue";
 import _sfc_main$4 from "../../../../components/Feed/Feed.vue.js";
-import _sfc_main$2 from "../../../../components/Popup/Popup.vue2.js";
+import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$3 from "../../../../components/PhotoViewer/PhotoViewer.vue.js";
 import _sfc_main$1 from "../../../globals/views/components/sections/SectionPageTitle.vue.js";
 import gallery from "../../store/gallery.js";

package/dist/martyrs/src/modules/gallery/components/sections/BackofficeGallery.vue.cjs

@@ -2,10 +2,10 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Button = require("../../../../components/Button/Button.vue.cjs");
-const Chips = require("../../../../components/Chips/Chips.vue.cjs");
-;/* empty css                                                    */
-const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
+const Button = require("../../../../components/Button/Button.vue2.cjs");
+const Chips = require("../../../../components/Chips/Chips.vue2.cjs");
+;/* empty css                                                   */
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const PhotoViewer = require("../../../../components/PhotoViewer/PhotoViewer.vue.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");

package/dist/martyrs/src/modules/gallery/components/sections/BackofficeGallery.vue.js

@@ -1,9 +1,9 @@
 import { ref, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, Fragment, renderList, createElementVNode, toDisplayString, createBlock, createCommentVNode, createTextVNode } from "vue";
 import { useRoute } from "vue-router";
-import _sfc_main$9 from "../../../../components/Button/Button.vue.js";
-import _sfc_main$4 from "../../../../components/Chips/Chips.vue.js";
-/* empty css                                                  */
-import _sfc_main$5 from "../../../../components/Popup/Popup.vue2.js";
+import _sfc_main$9 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$4 from "../../../../components/Chips/Chips.vue2.js";
+/* empty css                                                 */
+import _sfc_main$5 from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$2 from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$6 from "../../../../components/PhotoViewer/PhotoViewer.vue.js";
 import { state } from "../../../auth/views/store/auth.js";

package/dist/martyrs/src/modules/globals/views/components/blocks/CardHeader.vue.cjs

@@ -2,14 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Tooltip = require("../../../../../components/Tooltip/Tooltip.vue2.cjs");
+const Tooltip = require("../../../../../components/Tooltip/Tooltip.vue.cjs");
 const Dropdown = require("../../../../../components/Dropdown/Dropdown.vue.cjs");
 const PlaceholderUserpic = require("../../../../icons/placeholders/PlaceholderUserpic.vue.cjs");
 const PlaceholderOrganizationPic = require("../../../../icons/placeholders/PlaceholderOrganizationPic.vue.cjs");
 const IconEllipsis = require("../../../../icons/navigation/IconEllipsis.vue.cjs");
 const FormReport = require("../../../../reports/components/sections/FormReport.vue.cjs");
 ;/* empty css                                            */
-;/* empty css                                             */
+;/* empty css                                            */
 require("../../../../auth/views/store/auth.cjs");
 require("../../../../organizations/store/memberships.cjs");
 const PhotoStack = require("../elements/PhotoStack.vue.cjs");

package/dist/martyrs/src/modules/globals/views/components/blocks/CardHeader.vue.js

@@ -1,13 +1,13 @@
 import { resolveComponent, createElementBlock, createCommentVNode, openBlock, createElementVNode, createBlock, withModifiers, resolveDynamicComponent, toDisplayString, withCtx, createTextVNode, Fragment, renderList, normalizeClass } from "vue";
 import { useRouter } from "vue-router";
-import _sfc_main$1 from "../../../../../components/Tooltip/Tooltip.vue2.js";
+import _sfc_main$1 from "../../../../../components/Tooltip/Tooltip.vue.js";
 import _sfc_main$3 from "../../../../../components/Dropdown/Dropdown.vue.js";
 import PlaceholderUserpic from "../../../../icons/placeholders/PlaceholderUserpic.vue.js";
 import PlaceholderOrganizationPic from "../../../../icons/placeholders/PlaceholderOrganizationPic.vue.js";
 import _sfc_main$4 from "../../../../icons/navigation/IconEllipsis.vue.js";
 import _sfc_main$5 from "../../../../reports/components/sections/FormReport.vue.js";
 /* empty css                                          */
-/* empty css                                           */
+/* empty css                                          */
 import "../../../../auth/views/store/auth.js";
 import "../../../../organizations/store/memberships.js";
 import _sfc_main$2 from "../elements/PhotoStack.vue.js";

package/dist/martyrs/src/modules/globals/views/components/blocks/PopupDateSelector.vue.cjs

@@ -2,10 +2,10 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueI18n = require("vue-i18n");
-const Popup = require("../../../../../components/Popup/Popup.vue2.cjs");
+const Popup = require("../../../../../components/Popup/Popup.vue.cjs");
 const Loader = require("../../../../../components/Loader/Loader.vue2.cjs");
 const Calendar = require("../../../../../components/DatePicker/Calendar.vue.cjs");
-const Button = require("../../../../../components/Button/Button.vue.cjs");
+const Button = require("../../../../../components/Button/Button.vue2.cjs");
 const IconShopcartAdd = require("../../../../icons/actions/IconShopcartAdd.vue.cjs");
 const PriceTotal = require("../../../../orders/components/elements/PriceTotal.vue.cjs");
 const rents_store = require("../../../../rents/views/store/rents.store.cjs");

package/dist/martyrs/src/modules/globals/views/components/blocks/PopupDateSelector.vue.js

@@ -1,9 +1,9 @@
 import { ref, computed, watch, onMounted, createBlock, openBlock, withCtx, createElementVNode, createVNode, createElementBlock, createCommentVNode, toDisplayString, unref } from "vue";
 import { useI18n } from "vue-i18n";
-import _sfc_main$1 from "../../../../../components/Popup/Popup.vue2.js";
+import _sfc_main$1 from "../../../../../components/Popup/Popup.vue.js";
 import Loader from "../../../../../components/Loader/Loader.vue2.js";
 import Calendar from "../../../../../components/DatePicker/Calendar.vue.js";
-import _sfc_main$3 from "../../../../../components/Button/Button.vue.js";
+import _sfc_main$3 from "../../../../../components/Button/Button.vue2.js";
 import _sfc_main$4 from "../../../../icons/actions/IconShopcartAdd.vue.js";
 import _sfc_main$2 from "../../../../orders/components/elements/PriceTotal.vue.js";
 import { loadAvailability } from "../../../../rents/views/store/rents.store.js";

package/dist/martyrs/src/modules/globals/views/components/layouts/Client.vue.cjs

@@ -4,10 +4,10 @@ const vue = require("vue");
 const vueRouter = require("vue-router");
 const globals = require("../../store/globals.cjs");
 const Status = require("../../../../../components/Status/Status.vue.cjs");
-const Popup = require("../../../../../components/Popup/Popup.vue2.cjs");
+const Popup = require("../../../../../components/Popup/Popup.vue.cjs");
 const Loader = require("../../../../../components/Loader/Loader.vue2.cjs");
 require("vue-i18n");
-;/* empty css                                             */
+;/* empty css                                            */
 require("../../../../orders/store/shopcart.cjs");
 require("../../../../auth/views/store/auth.cjs");
 ;/* empty css                               */

package/dist/martyrs/src/modules/globals/views/components/layouts/Client.vue.js

@@ -2,10 +2,10 @@ import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlo
 import { useRoute } from "vue-router";
 import { state } from "../../store/globals.js";
 import _sfc_main$4 from "../../../../../components/Status/Status.vue.js";
-import _sfc_main$1 from "../../../../../components/Popup/Popup.vue2.js";
+import _sfc_main$1 from "../../../../../components/Popup/Popup.vue.js";
 import Loader from "../../../../../components/Loader/Loader.vue2.js";
 import "vue-i18n";
-/* empty css                                           */
+/* empty css                                          */
 import "../../../../orders/store/shopcart.js";
 import "../../../../auth/views/store/auth.js";
 /* empty css                             */

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

@@ -7,7 +7,7 @@ const globals = require("../../store/globals.cjs");
 const shopcart = require("../../../../orders/store/shopcart.cjs");
 const auth = require("../../../../auth/views/store/auth.cjs");
 const NotificationBadge = require("../../../../notifications/components/elements/NotificationBadge.vue.cjs");
-const Button = require("../../../../../components/Button/Button.vue.cjs");
+const Button = require("../../../../../components/Button/Button.vue2.cjs");
 const Select = require("../../../../../components/Select/Select.vue.cjs");
 const IconShopcart = require("../../../../icons/entities/IconShopcart.vue.cjs");
 const IconProfile = require("../../../../icons/entities/IconProfile.vue.cjs");

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

@@ -5,7 +5,7 @@ import { state } from "../../store/globals.js";
 import { actions, getters } from "../../../../orders/store/shopcart.js";
 import { state as state$1 } from "../../../../auth/views/store/auth.js";
 import NotificationBadge from "../../../../notifications/components/elements/NotificationBadge.vue.js";
-import _sfc_main$1 from "../../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../../components/Button/Button.vue2.js";
 import Select from "../../../../../components/Select/Select.vue.js";
 import _sfc_main$3 from "../../../../icons/entities/IconShopcart.vue.js";
 import _sfc_main$4 from "../../../../icons/entities/IconProfile.vue.js";

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

@@ -123,7 +123,7 @@ const _sfc_main = {
                   ]])
                 }, [
                   vue.createElementVNode("button", {
-                    onClick: ($event) => item.route ? vue.unref(router).push(processRoute(item.route)) : null,
+                    onClick: ($event) => item.route ? (_ctx.isPhone ? __props.stateSidebar = false : null, vue.unref(router).push(processRoute(item.route))) : null,
                     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" : "",
@@ -193,6 +193,6 @@ const _sfc_main = {
     };
   }
 };
-const Navigation = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-43d4ca8b"]]);
+const Navigation = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-371c51a6"]]);
 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  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 ? (isPhone ? (stateSidebar = false) : null, 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

@@ -121,7 +121,7 @@ const _sfc_main = {
                   ]])
                 }, [
                   createElementVNode("button", {
-                    onClick: ($event) => item.route ? unref(router).push(processRoute(item.route)) : null,
+                    onClick: ($event) => item.route ? (_ctx.isPhone ? __props.stateSidebar = false : null, unref(router).push(processRoute(item.route))) : null,
                     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" : "",
@@ -191,7 +191,7 @@ const _sfc_main = {
     };
   }
 };
-const Navigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43d4ca8b"]]);
+const Navigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-371c51a6"]]);
 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  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 ? (isPhone ? (stateSidebar = false) : null, 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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const vueRouter = require("vue-router");
+const mixins = require("../../mixins/mixins.cjs");
 const globals = require("../../store/globals.cjs");
 const _pluginVue_exportHelper = require("../../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "dark-mode-icon" };
@@ -28,6 +30,14 @@ const _sfc_main = {
     "closeSidebar"
   ],
   setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const { isPhone } = mixins.useGlobalMixins();
+    const router = vueRouter.useRouter();
+    router.beforeEach((to, from) => {
+      if (isPhone() || isTablet()) {
+        emits("closeSidebar");
+      }
+    });
     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 br-r br-solid flex flex-column h-100", [
@@ -63,6 +73,6 @@ const _sfc_main = {
     };
   }
 };
-const Sidebar = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-948b3b5a"]]);
+const Sidebar = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-993ec6f5"]]);
 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":["../../../../../../../../src/modules/globals/views/components/partials/Sidebar.vue"],"sourcesContent":["<script setup>\nimport { ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\nimport { useGlobalMixins } from \"@martyrs/src/modules/globals/views/mixins/mixins.js\"\n\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals'\n\nconst props = defineProps({\n  theme: {\n    type: String,\n    default: \"light\"\n  },\n  stateSidebar: {\n    type: Boolean,\n    default: false\n  },\n  width: {\n    type: String,\n    default: 'w-15r'\n  },\n  widthHidden:{\n    type: String,\n    default: 'w-3r '\n  },\n})\n\nconst emits = defineEmits([\n  'closeSidebar'\n])\n\n\nconst { isPhone } = useGlobalMixins()\nconst router = useRouter()\n\n\n\nconst toggleSidebar = () => {\n  emit('closeSidebar')\n}\n\nrouter.beforeEach((to, from) => {\n   if (isPhone() || isTablet()) {\n    emits('closeSidebar')\n  }\n})\n\n</script>\n\n<template>\n  <aside\n    class=\"transition-linear w-min-0  o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100\"\n    :class=\"[\n      'sidebar-container',\n      // \n      stateSidebar\n      ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100`\n      : `${widthHidden} mobile:w-0 br-zero`,\n      // \n      theme === 'light' \n      ? 't-black bg-white br-light'\n      : 't-white bg-black br-dark'\n    ]\"\n  >\n\n    <!-- Slot for navigation content -->\n    <slot></slot>\n\n    <div \n      class=\"br-solid br-t\"\n      :class=\"{ \n        'pd-micro': !stateSidebar, \n        'pd-small': stateSidebar,\n        'br-light': theme === 'light',\n        'br-dark':  theme === 'dark'\n      }\"\n    >\n      <button\n        @click=\"() => globals.actions.toggleTheme()\"\n        class=\"flex flex-center  flex-nowrap dark-mode-toggle\"\n        :class=\"[\n          stateSidebar ? 'pd-thin justify-between' : 'h-100 aspect-1x1 justify-center'\n        ]\"\n      >\n        <span \n          class=\"dark-mode-label w-100 t-left mn-r-thin\"\n          :class=\"{ 'hidden': !stateSidebar, 'visible': stateSidebar }\"\n        >\n          Dark Mode\n        </span>\n        <span class=\"dark-mode-icon\">\n          {{ globals.state.theme.darkmode ? '🌙' : '☀️' }}\n        </span>\n      </button>\n    </div>\n  </aside>\n</template>\n\n<style scoped>\n/* Base sidebar styling */\n.sidebar-container {\n  position: relative;\n  left: 0;\n  top: 0;\n  transition: all 0.3s ease-in-out;\n}\n\n.dark-mode-toggle {\n  align-items: center;\n  width: 100%;\n  border-radius: var(--small);\n  transition: all 0.2s;\n  position: relative;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n\n.dark-mode-toggle:hover {\n  background: var(--light-regular);\n}\n\n.dark-mode-label {\n  font-weight: 500;\n  transition: opacity 0.2s, width 0.2s;\n  white-space: nowrap;\n}\n\n.dark-mode-icon {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n\n.dark-mode-toggle:hover .dark-mode-icon {\n  transform: scale(1.1);\n}\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/* Scrollbar styles */\n::-webkit-scrollbar {\n  width: 6px;\n}\n\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--grey-micro);\n  border-radius: 3px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background-color: var(--grey-small);\n}\n</style>  "],"names":["useGlobalMixins","useRouter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAM,QAAQ;AAKd,UAAM,EAAE,QAAS,IAAGA,OAAe,gBAAA;AACnC,UAAM,SAASC,UAAS,UAAA;AAQxB,WAAO,WAAW,CAAC,IAAI,SAAS;AAC7B,UAAI,QAAO,KAAM,YAAY;AAC5B,cAAM,cAAc;AAAA,MACxB;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,6 @@
 import { createElementBlock, openBlock, normalizeClass, renderSlot, createElementVNode, toDisplayString } from "vue";
+import { useRouter } from "vue-router";
+import { useGlobalMixins } from "../../mixins/mixins.js";
 import { actions, state } from "../../store/globals.js";
 import _export_sfc from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "dark-mode-icon" };
@@ -26,6 +28,14 @@ const _sfc_main = {
     "closeSidebar"
   ],
   setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const { isPhone } = useGlobalMixins();
+    const router = useRouter();
+    router.beforeEach((to, from) => {
+      if (isPhone() || isTablet()) {
+        emits("closeSidebar");
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("aside", {
         class: normalizeClass(["transition-linear w-min-0 o-hidden flex-child-default z-index-2 br-r br-solid flex flex-column h-100", [
@@ -61,7 +71,7 @@ const _sfc_main = {
     };
   }
 };
-const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-948b3b5a"]]);
+const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-993ec6f5"]]);
 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":["../../../../../../../../src/modules/globals/views/components/partials/Sidebar.vue"],"sourcesContent":["<script setup>\nimport { ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\nimport { useGlobalMixins } from \"@martyrs/src/modules/globals/views/mixins/mixins.js\"\n\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals'\n\nconst props = defineProps({\n  theme: {\n    type: String,\n    default: \"light\"\n  },\n  stateSidebar: {\n    type: Boolean,\n    default: false\n  },\n  width: {\n    type: String,\n    default: 'w-15r'\n  },\n  widthHidden:{\n    type: String,\n    default: 'w-3r '\n  },\n})\n\nconst emits = defineEmits([\n  'closeSidebar'\n])\n\n\nconst { isPhone } = useGlobalMixins()\nconst router = useRouter()\n\n\n\nconst toggleSidebar = () => {\n  emit('closeSidebar')\n}\n\nrouter.beforeEach((to, from) => {\n   if (isPhone() || isTablet()) {\n    emits('closeSidebar')\n  }\n})\n\n</script>\n\n<template>\n  <aside\n    class=\"transition-linear w-min-0  o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100\"\n    :class=\"[\n      'sidebar-container',\n      // \n      stateSidebar\n      ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100`\n      : `${widthHidden} mobile:w-0 br-zero`,\n      // \n      theme === 'light' \n      ? 't-black bg-white br-light'\n      : 't-white bg-black br-dark'\n    ]\"\n  >\n\n    <!-- Slot for navigation content -->\n    <slot></slot>\n\n    <div \n      class=\"br-solid br-t\"\n      :class=\"{ \n        'pd-micro': !stateSidebar, \n        'pd-small': stateSidebar,\n        'br-light': theme === 'light',\n        'br-dark':  theme === 'dark'\n      }\"\n    >\n      <button\n        @click=\"() => globals.actions.toggleTheme()\"\n        class=\"flex flex-center  flex-nowrap dark-mode-toggle\"\n        :class=\"[\n          stateSidebar ? 'pd-thin justify-between' : 'h-100 aspect-1x1 justify-center'\n        ]\"\n      >\n        <span \n          class=\"dark-mode-label w-100 t-left mn-r-thin\"\n          :class=\"{ 'hidden': !stateSidebar, 'visible': stateSidebar }\"\n        >\n          Dark Mode\n        </span>\n        <span class=\"dark-mode-icon\">\n          {{ globals.state.theme.darkmode ? '🌙' : '☀️' }}\n        </span>\n      </button>\n    </div>\n  </aside>\n</template>\n\n<style scoped>\n/* Base sidebar styling */\n.sidebar-container {\n  position: relative;\n  left: 0;\n  top: 0;\n  transition: all 0.3s ease-in-out;\n}\n\n.dark-mode-toggle {\n  align-items: center;\n  width: 100%;\n  border-radius: var(--small);\n  transition: all 0.2s;\n  position: relative;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n\n.dark-mode-toggle:hover {\n  background: var(--light-regular);\n}\n\n.dark-mode-label {\n  font-weight: 500;\n  transition: opacity 0.2s, width 0.2s;\n  white-space: nowrap;\n}\n\n.dark-mode-icon {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n\n.dark-mode-toggle:hover .dark-mode-icon {\n  transform: scale(1.1);\n}\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/* Scrollbar styles */\n::-webkit-scrollbar {\n  width: 6px;\n}\n\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--grey-micro);\n  border-radius: 3px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background-color: var(--grey-small);\n}\n</style>  "],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAM,QAAQ;AAKd,UAAM,EAAE,QAAS,IAAG,gBAAe;AACnC,UAAM,SAAS,UAAS;AAQxB,WAAO,WAAW,CAAC,IAAI,SAAS;AAC7B,UAAI,QAAO,KAAM,YAAY;AAC5B,cAAM,cAAc;AAAA,MACxB;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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/globals/views/mixins/mixins.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const globals = require("../store/globals.cjs");
 function useGlobalMixins() {
+  const isClientSide = typeof window !== "undefined";
   const isAdmin = (roles) => {
     if (roles) {
       const isAdmin2 = roles.includes("ROLE_ADMIN") ? roles.includes("ROLE_ADMIN") : false;
@@ -141,6 +142,36 @@ function useGlobalMixins() {
     base += country_normalized && state_normalized && city_normalized ? `/${city_normalized}` : "";
     return base;
   };
+  const getCssVar = (name) => {
+    if (!isClientSide) return "";
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  };
+  const isMediaMax = (varName) => {
+    if (!isClientSide) return false;
+    const maxWidth = getCssVar(varName);
+    return window.matchMedia(`(max-width: ${maxWidth})`).matches;
+  };
+  const isMediaMin = (varName) => {
+    if (!isClientSide) return false;
+    const minWidth = getCssVar(varName);
+    return window.matchMedia(`(min-width: ${minWidth})`).matches;
+  };
+  const isFlipPhone = () => isMediaMax("--flip-phone-max");
+  const isPhone = () => isMediaMax("--phone-landscape-max");
+  const isTabletPortrait = () => window.matchMedia(
+    `(min-width: ${getCssVar("--tablet-portrait-min")}) and (max-width: ${getCssVar("--tablet-portrait-max")})`
+  ).matches;
+  const isTabletLandscape = () => window.matchMedia(
+    `(min-width: ${getCssVar("--tablet-landscape-min")}) and (max-width: ${getCssVar("--tablet-landscape-max")})`
+  ).matches;
+  const isTablet = () => isTabletPortrait() || isTabletLandscape();
+  const isDesktop = () => window.matchMedia(
+    `(min-width: ${getCssVar("--desktop-min")}) and (max-width: ${getCssVar("--desktop-max")})`
+  ).matches;
+  const isXLDesktop = () => window.matchMedia(
+    `(min-width: ${getCssVar("--xl-desktop-min")}) and (max-width: ${getCssVar("--xl-desktop-max")})`
+  ).matches;
+  const isXXLDesktop = () => isMediaMin("--xxl-desktop-min");
   return {
     isAdmin,
     hasAccess,
@@ -152,7 +183,19 @@ function useGlobalMixins() {
     joinArrayToUrl,
     getMarketplaceLink,
     getSpotsLink,
-    generateFilters
+    generateFilters,
+    // Брейкпоинты
+    getCssVar,
+    isMediaMax,
+    isMediaMin,
+    isFlipPhone,
+    isPhone,
+    isTabletPortrait,
+    isTabletLandscape,
+    isTablet,
+    isDesktop,
+    isXLDesktop,
+    isXXLDesktop
   };
 }
 const globalMixins = {