@ozdao/martyrs 0.2.429 → 0.2.430

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

@@ -1 +1 @@
-{"version":3,"file":"Header.vue.cjs","sources":["../../../../../../../../src/modules/globals/views/components/partials/Header.vue"],"sourcesContent":["<script setup=\"props\">\n\timport { computed, onMounted, toRefs, ref, inject } from 'vue'\n\n\timport { useRouter,useRoute } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\n\timport * as globals from '@martyrs/src/modules/globals/views/store/globals'\n\timport * as shopcart from '@martyrs/src/modules/orders/store/shopcart'\n\timport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\t\n\t// Globasls Component\n\n\timport NotificationBadge from '@martyrs/src/modules/notifications/components/elements/NotificationBadge.vue';\n\t// import Navigation from '@martyrs/src/modules/globals/views/components/partials/Navigation.vue'\n\t// Martyrs Component\n\timport Button from '@martyrs/src/components/Button/Button.vue'\n\timport Select from '@martyrs/src/components/Select/Select.vue'\n\timport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'\n\t// Icons module\n\timport IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue'\n\timport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'\n\timport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\n\t// Props\n\tconst props = defineProps({\n    theme: {\n    \ttype: String,\n\t    default: \"light\"\n    },\n    logotype: {\n\t    type: Object\n\t  },\n\t  location: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n\t  theme_switcher: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n  });\n\t// Accessing state\n\tconst router = useRouter()\n\tconst route = useRoute()\n\t// Localization\n\tconst { t } = useI18n()\n\t// const search = computed(() => store.products.state.search)\n\n\tfunction openLocationPopup() {\n\t  globals.state.isOpenLocationPopup = true;\n\t}\n\t/////////////////////////////\n\t// MOUNTED\n\t/////////////////////////////\n\tonMounted(() => {\n    shopcart.actions.setShopcart()\n  });\n</script>\n\n<template>\n\t<header \n\t\tid=\"header\" \n\t\tclass=\"\n\t\t\tpd-thin \n\t\t\tgap-micro\n\t\t\tflex-justify-between\n\t\t\tflex-nowrap\n\t\t\tflex\n\t\t\th-4r\n\t\t\tw-100\n\t\t\tz-index-2 \n\t\t\tpos-relative pos-t-0\n\t\t\tbr-b\n\t\t\tbr-solid\n\t\t\tbr-light\n\t\t\"\n\t\t:class=\"{\n  \t\t't-black': theme === 'light',\n  \t\t't-white': theme === 'dark'  \n  \t}\"\n\t>\n\t<div class=\"flex-nowrap flex-v-center flex-justify-start flex gap-micro \">\n\t\t<!-- MENU -->\n\t\t<button  \n\t\t\taria-label=\"menu\"\n\t\t\t@click=\"() => globals.state.isOpenSidebar = !globals.state.isOpenSidebar\" \n\t\t\tclass=\"cursor-pointer menu-btn\"\n\t\t\t:class=\"{\n\t\t\t\t'menu-btn_active': globals.state.isOpenSidebar\n\t\t\t}\"\n\t\t>\n\t    <span\n\t    \tclass=\"no-events\"\n\t\t    :class=\"{\n\t\t      'bg-black': theme === 'light',\n\t\t      'bg-white': theme === 'dark'\n\t\t    }\"\n\t\t  >\n\t\t    <span class=\"menu-btn__before\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t    <span class=\"menu-btn__after\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t  </span>\n\t  </button>\n\n\t\t<!-- LOGO -->\n\t\t<component\n\t\t\tv-if=\"logotype\"\n\t\t  :is=\"logotype\"\n\t\t  @click=\"router.push({ path: '/' })\" \n\t\t  :theme=\"theme\"\n\t\t  class=\"cursor-pointer\"\n\t\t/>\n\n\t\t<button\n\t\t\tv-if=\"location\"\n\t\t\taria-label=\"button_location\"\n    \tclass=\"\n    \t\tcursor-pointer\n    \t\tbg-transp \n    \t\tpd-l-micro pd-r-micro\n    \t\tradius-extra \n    \t\tuppercase \n    \t\tt-semi\n    \t\tbr-solid \n    \t\tbr-2px \n    \t\ttransition-linear\n    \t\tt-nowrap\n    \t\n    \t\"\n    \t:class=\"{\n    \t\t'fill-black br-black t-black hover-bg-black hover-t-white hover-fill-white': theme === 'light',\n    \t\t'fill-white br-white t-white hover-bg-white hover-t-black hover-fill-black': theme === 'dark'  \n    \t}\"\n    \t@click=\"openLocationPopup()\"\n    >\n    \t<svg class=\"i-small\" :fill=\"'inherit'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"67\" viewBox=\"0 0 50 67\" fill=\"none\">\n\t\t\t  <path d=\"M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z\" :fill=\"'inherit'\"/>\n\t\t\t</svg>\n    \t {{globals.state.position?.country ? globals.state.position.country : 'World'}}\n    </button>\n  </div>\n\n \t<slot></slot>\n\n\t<div class=\"flex-justify-end flex-v-center flex-nowrap flex gap-micro\">\n\t\t<Button \n\t\t\tv-if=\"router.hasRoute('Search')\"\n\t\t\taria-label=\"search\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"() => router.push({name: 'Search'})\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconSearch \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\t\n\t\t<Button\n\t\t\taria-label=\"shopcart\"\n\t\t\t:submit=\"a => shopcart.actions.toggleShopcart()\" \n\t\t\t:counter=\"shopcart.getters.cartTotalAmount\" \n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t\tclass=\"pd-zero mn-r-micro\"\n\t\t\t> \n\t\t\t<IconShopcart \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t\t<!-- <div class=\"w-max p-small pos-absolute pos-t-100 pos-r-0\">Product Added to Shopcart</div> -->\n\t\t</Button>\n\n\n\t\t<NotificationBadge\n\t\t\tv-if=\"auth.state.user._id\"\n\t\t\t:fill=\"'rgb(var(--black))'\"\n\t\t/>\n\n\t\t<Button \n\t\t\taria-label=\"profile\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"\n\t\t\t\tauth.state.access.status === false \n\t\t\t\t? \n\t\t\t\ta => router.push({name: 'Sign In'}) \n\t\t\t\t: \n\t\t\t\ta => router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})\n\t\t\t\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconProfile \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\n\n\n\t\t<Select \n\t\t\tv-if=\"$i18n.availableLocales.length > 1\"\n\t\t\tv-model:select=\"$i18n.locale\"\n\t\t  :options=\"$i18n.availableLocales\"\n\t\t  :property=\"'value'\"\n      class=\"pos-relative uppercase pd-l-small pd-r-small pd-micro t-semi radius-thin\"\n      :class=\"{\n    \t\t'bg-light t-black': theme === 'light',\n    \t\t'bg-dark t-white': theme === 'dark'  \n    \t}\"\n    />\n  </div>\n</header>\n  \n</template>\n\n<style lang=\"scss\">\n.location-button { \n\t&:hover {\n\t\tbox-shadow: inset 0 0 0 2px rgb(var(--main));\n\t}\n}\n\n.menu-btn {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  position: relative;\n}\n.menu-btn span,\n.menu-btn__before,\n.menu-btn__after {\n  position: absolute;\n  top: 50%;\n  margin-top: -1px;\n  left: 50%;\n  margin-left: -10px;\n  width: 20px;\n  height: 2px;\n}\n.menu-btn__before,\n.menu-btn__after {\n  display: block;\n  transition: 0.2s;\n}\n.menu-btn__before {\n  transform: translateY(-5px);\n}\n.menu-btn__after {\n  transform: translateY(5px);\n}\n.menu-btn_active .menu-btn__before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active .menu-btn__after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-btn_active span:before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active span:after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-block {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.menu-nav {\n  background-color: #fff;\n  height: 50px;\n  \n}\n.menu-nav__link {\n  display: inline-block;\n  text-decoration: none;\n  color: #fff;\n  margin-right: 20px;\n}\n.menu-nav__link {\n  transition: 0.5s;\n  transform-origin: right center;\n  transform: translateX(50%);\n  opacity: 0;\n}\n.menu-nav__link_active {\n  transform: translateX(0%);\n  opacity: 1;\n}\n\n</style>"],"names":["useRouter","useRoute","useI18n","globals.state","onMounted","shopcart.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,UAAM,SAASA,UAAS,UAAA;AACVC,cAAQ,SAAA;AAEtB,UAAM,EAAE,EAAC,IAAKC,QAAO,QAAA;AAGrB,aAAS,oBAAoB;AAC3BC,cAAa,MAAC,sBAAsB;AAAA,IACvC;AAICC,QAAAA,UAAU,MAAM;AACbC,eAAAA,QAAiB,YAAW;AAAA,IAChC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Header.vue.cjs","sources":["../../../../../../../../src/modules/globals/views/components/partials/Header.vue"],"sourcesContent":["<script setup=\"props\">\n\timport { computed, onMounted, toRefs, ref, inject } from 'vue'\n\n\timport { useRouter,useRoute } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\n\timport * as globals from '@martyrs/src/modules/globals/views/store/globals'\n\timport * as shopcart from '@martyrs/src/modules/orders/store/shopcart'\n\timport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\t\n\t// Globasls Component\n\n\timport NotificationBadge from '@martyrs/src/modules/notifications/components/elements/NotificationBadge.vue';\n\t// import Navigation from '@martyrs/src/modules/globals/views/components/partials/Navigation.vue'\n\t// Martyrs Component\n\timport Button from '@martyrs/src/components/Button/Button.vue'\n\timport Select from '@martyrs/src/components/Select/Select.vue'\n\timport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'\n\t// Icons module\n\timport IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue'\n\timport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'\n\timport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\n\t// Props\n\tconst props = defineProps({\n    theme: {\n    \ttype: String,\n\t    default: \"light\"\n    },\n    logotype: {\n\t    type: Object\n\t  },\n\t  location: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n\t  theme_switcher: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n  });\n\t// Accessing state\n\tconst router = useRouter()\n\tconst route = useRoute()\n\t// Localization\n\tconst { t } = useI18n()\n\t// const search = computed(() => store.products.state.search)\n\n\tfunction openLocationPopup() {\n\t  globals.state.isOpenLocationPopup = true;\n\t}\n\t/////////////////////////////\n\t// MOUNTED\n\t/////////////////////////////\n\tonMounted(() => {\n    shopcart.actions.setShopcart()\n  });\n</script>\n\n<template>\n\t<header \n\t\tid=\"header\" \n\t\tclass=\"\n\t\t\tpd-thin \n\t\t\tgap-micro\n\t\t\tflex-justify-between\n\t\t\tflex-nowrap\n\t\t\tflex\n\t\t\th-4r\n\t\t\tw-100\n\t\t\tz-index-2 \n\t\t\tpos-relative pos-t-0\n\t\t\tbr-b\n\t\t\tbr-solid\n\t\t\"\n\t\t:class=\"{\n  \t\t't-black br-light': theme === 'light',\n  \t\t't-white br-dark': theme === 'dark'  \n  \t}\"\n\t>\n\t<div class=\"flex-nowrap flex-v-center flex-justify-start flex gap-micro \">\n\t\t<!-- MENU -->\n\t\t<button  \n\t\t\taria-label=\"menu\"\n\t\t\t@click=\"() => globals.state.isOpenSidebar = !globals.state.isOpenSidebar\" \n\t\t\tclass=\"cursor-pointer menu-btn\"\n\t\t\t:class=\"{\n\t\t\t\t'menu-btn_active': globals.state.isOpenSidebar\n\t\t\t}\"\n\t\t>\n\t    <span\n\t    \tclass=\"no-events\"\n\t\t    :class=\"{\n\t\t      'bg-black': theme === 'light',\n\t\t      'bg-white': theme === 'dark'\n\t\t    }\"\n\t\t  >\n\t\t    <span class=\"menu-btn__before\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t    <span class=\"menu-btn__after\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t  </span>\n\t  </button>\n\n\t\t<!-- LOGO -->\n\t\t<component\n\t\t\tv-if=\"logotype\"\n\t\t  :is=\"logotype\"\n\t\t  @click=\"router.push({ path: '/' })\" \n\t\t  :theme=\"theme\"\n\t\t  class=\"cursor-pointer\"\n\t\t/>\n\n\t\t<button\n\t\t\tv-if=\"location\"\n\t\t\taria-label=\"button_location\"\n    \tclass=\"\n    \t\tcursor-pointer\n    \t\tbg-transp \n    \t\tpd-l-micro pd-r-micro\n    \t\tradius-extra \n    \t\tuppercase \n    \t\tt-semi\n    \t\tbr-solid \n    \t\tbr-2px \n    \t\ttransition-linear\n    \t\tt-nowrap\n    \t\n    \t\"\n    \t:class=\"{\n    \t\t'fill-black br-black t-black hover-bg-black hover-t-white hover-fill-white': theme === 'light',\n    \t\t'fill-white br-white t-white hover-bg-white hover-t-black hover-fill-black': theme === 'dark'  \n    \t}\"\n    \t@click=\"openLocationPopup()\"\n    >\n    \t<svg class=\"i-small\" :fill=\"'inherit'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"67\" viewBox=\"0 0 50 67\" fill=\"none\">\n\t\t\t  <path d=\"M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z\" :fill=\"'inherit'\"/>\n\t\t\t</svg>\n    \t {{globals.state.position?.country ? globals.state.position.country : 'World'}}\n    </button>\n  </div>\n\n \t<slot></slot>\n\n\t<div class=\"flex-justify-end flex-v-center flex-nowrap flex gap-micro\">\n\t\t<Button \n\t\t\tv-if=\"router.hasRoute('Search')\"\n\t\t\taria-label=\"search\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"() => router.push({name: 'Search'})\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconSearch \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\t\n\t\t<Button\n\t\t\taria-label=\"shopcart\"\n\t\t\t:submit=\"a => shopcart.actions.toggleShopcart()\" \n\t\t\t:counter=\"shopcart.getters.cartTotalAmount\" \n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t\tclass=\"pd-zero mn-r-micro\"\n\t\t\t> \n\t\t\t<IconShopcart \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t\t<!-- <div class=\"w-max p-small pos-absolute pos-t-100 pos-r-0\">Product Added to Shopcart</div> -->\n\t\t</Button>\n\n\n\t\t<NotificationBadge\n\t\t\tv-if=\"auth.state.user._id\"\n\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t/>\n\n\t\t<Button \n\t\t\taria-label=\"profile\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"\n\t\t\t\tauth.state.access.status === false \n\t\t\t\t? \n\t\t\t\ta => router.push({name: 'Sign In'}) \n\t\t\t\t: \n\t\t\t\ta => router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})\n\t\t\t\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconProfile \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\n\n\n\t\t<Select \n\t\t\tv-if=\"$i18n.availableLocales.length > 1\"\n\t\t\tv-model:select=\"$i18n.locale\"\n\t\t  :options=\"$i18n.availableLocales\"\n\t\t  :property=\"'value'\"\n      class=\"pos-relative uppercase pd-l-small pd-r-small pd-micro t-semi radius-thin\"\n      :class=\"{\n    \t\t'bg-light t-black': theme === 'light',\n    \t\t'bg-dark t-white': theme === 'dark'  \n    \t}\"\n    />\n  </div>\n</header>\n  \n</template>\n\n<style lang=\"scss\">\n.location-button { \n\t&:hover {\n\t\tbox-shadow: inset 0 0 0 2px rgb(var(--main));\n\t}\n}\n\n.menu-btn {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  position: relative;\n}\n.menu-btn span,\n.menu-btn__before,\n.menu-btn__after {\n  position: absolute;\n  top: 50%;\n  margin-top: -1px;\n  left: 50%;\n  margin-left: -10px;\n  width: 20px;\n  height: 2px;\n}\n.menu-btn__before,\n.menu-btn__after {\n  display: block;\n  transition: 0.2s;\n}\n.menu-btn__before {\n  transform: translateY(-5px);\n}\n.menu-btn__after {\n  transform: translateY(5px);\n}\n.menu-btn_active .menu-btn__before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active .menu-btn__after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-btn_active span:before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active span:after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-block {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.menu-nav {\n  background-color: #fff;\n  height: 50px;\n  \n}\n.menu-nav__link {\n  display: inline-block;\n  text-decoration: none;\n  color: #fff;\n  margin-right: 20px;\n}\n.menu-nav__link {\n  transition: 0.5s;\n  transform-origin: right center;\n  transform: translateX(50%);\n  opacity: 0;\n}\n.menu-nav__link_active {\n  transform: translateX(0%);\n  opacity: 1;\n}\n\n</style>"],"names":["useRouter","useRoute","useI18n","globals.state","onMounted","shopcart.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,UAAM,SAASA,UAAS,UAAA;AACVC,cAAQ,SAAA;AAEtB,UAAM,EAAE,EAAC,IAAKC,QAAO,QAAA;AAGrB,aAAS,oBAAoB;AAC3BC,cAAa,MAAC,sBAAsB;AAAA,IACvC;AAICC,QAAAA,UAAU,MAAM;AACbC,eAAAA,QAAiB,YAAW;AAAA,IAChC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -54,9 +54,9 @@ const _sfc_main = {
       var _a;
       return openBlock(), createElementBlock("header", {
         id: "header",
-        class: normalizeClass(["pd-thin gap-micro flex-justify-between flex-nowrap flex h-4r w-100 z-index-2 pos-relative pos-t-0 br-b br-solid br-light", {
-          "t-black": __props.theme === "light",
-          "t-white": __props.theme === "dark"
+        class: normalizeClass(["pd-thin gap-micro flex-justify-between flex-nowrap flex h-4r w-100 z-index-2 pos-relative pos-t-0 br-b br-solid", {
+          "t-black br-light": __props.theme === "light",
+          "t-white br-dark": __props.theme === "dark"
         }])
       }, [
         createElementVNode("div", _hoisted_1, [
@@ -141,8 +141,8 @@ const _sfc_main = {
           }, 8, ["submit", "counter"]),
           state$1.user._id ? (openBlock(), createBlock(NotificationBadge, {
             key: 1,
-            fill: "rgb(var(--black))"
-          })) : createCommentVNode("", true),
+            fill: __props.theme === "light" ? "rgb(var(--black))" : "rgb(var(--white))"
+          }, null, 8, ["fill"])) : createCommentVNode("", true),
           createVNode(_sfc_main$1, {
             "aria-label": "profile",
             class: "pd-zero bg-transp",

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

@@ -1 +1 @@
-{"version":3,"file":"Header.vue.js","sources":["../../../../../../../../src/modules/globals/views/components/partials/Header.vue"],"sourcesContent":["<script setup=\"props\">\n\timport { computed, onMounted, toRefs, ref, inject } from 'vue'\n\n\timport { useRouter,useRoute } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\n\timport * as globals from '@martyrs/src/modules/globals/views/store/globals'\n\timport * as shopcart from '@martyrs/src/modules/orders/store/shopcart'\n\timport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\t\n\t// Globasls Component\n\n\timport NotificationBadge from '@martyrs/src/modules/notifications/components/elements/NotificationBadge.vue';\n\t// import Navigation from '@martyrs/src/modules/globals/views/components/partials/Navigation.vue'\n\t// Martyrs Component\n\timport Button from '@martyrs/src/components/Button/Button.vue'\n\timport Select from '@martyrs/src/components/Select/Select.vue'\n\timport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'\n\t// Icons module\n\timport IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue'\n\timport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'\n\timport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\n\t// Props\n\tconst props = defineProps({\n    theme: {\n    \ttype: String,\n\t    default: \"light\"\n    },\n    logotype: {\n\t    type: Object\n\t  },\n\t  location: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n\t  theme_switcher: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n  });\n\t// Accessing state\n\tconst router = useRouter()\n\tconst route = useRoute()\n\t// Localization\n\tconst { t } = useI18n()\n\t// const search = computed(() => store.products.state.search)\n\n\tfunction openLocationPopup() {\n\t  globals.state.isOpenLocationPopup = true;\n\t}\n\t/////////////////////////////\n\t// MOUNTED\n\t/////////////////////////////\n\tonMounted(() => {\n    shopcart.actions.setShopcart()\n  });\n</script>\n\n<template>\n\t<header \n\t\tid=\"header\" \n\t\tclass=\"\n\t\t\tpd-thin \n\t\t\tgap-micro\n\t\t\tflex-justify-between\n\t\t\tflex-nowrap\n\t\t\tflex\n\t\t\th-4r\n\t\t\tw-100\n\t\t\tz-index-2 \n\t\t\tpos-relative pos-t-0\n\t\t\tbr-b\n\t\t\tbr-solid\n\t\t\tbr-light\n\t\t\"\n\t\t:class=\"{\n  \t\t't-black': theme === 'light',\n  \t\t't-white': theme === 'dark'  \n  \t}\"\n\t>\n\t<div class=\"flex-nowrap flex-v-center flex-justify-start flex gap-micro \">\n\t\t<!-- MENU -->\n\t\t<button  \n\t\t\taria-label=\"menu\"\n\t\t\t@click=\"() => globals.state.isOpenSidebar = !globals.state.isOpenSidebar\" \n\t\t\tclass=\"cursor-pointer menu-btn\"\n\t\t\t:class=\"{\n\t\t\t\t'menu-btn_active': globals.state.isOpenSidebar\n\t\t\t}\"\n\t\t>\n\t    <span\n\t    \tclass=\"no-events\"\n\t\t    :class=\"{\n\t\t      'bg-black': theme === 'light',\n\t\t      'bg-white': theme === 'dark'\n\t\t    }\"\n\t\t  >\n\t\t    <span class=\"menu-btn__before\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t    <span class=\"menu-btn__after\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t  </span>\n\t  </button>\n\n\t\t<!-- LOGO -->\n\t\t<component\n\t\t\tv-if=\"logotype\"\n\t\t  :is=\"logotype\"\n\t\t  @click=\"router.push({ path: '/' })\" \n\t\t  :theme=\"theme\"\n\t\t  class=\"cursor-pointer\"\n\t\t/>\n\n\t\t<button\n\t\t\tv-if=\"location\"\n\t\t\taria-label=\"button_location\"\n    \tclass=\"\n    \t\tcursor-pointer\n    \t\tbg-transp \n    \t\tpd-l-micro pd-r-micro\n    \t\tradius-extra \n    \t\tuppercase \n    \t\tt-semi\n    \t\tbr-solid \n    \t\tbr-2px \n    \t\ttransition-linear\n    \t\tt-nowrap\n    \t\n    \t\"\n    \t:class=\"{\n    \t\t'fill-black br-black t-black hover-bg-black hover-t-white hover-fill-white': theme === 'light',\n    \t\t'fill-white br-white t-white hover-bg-white hover-t-black hover-fill-black': theme === 'dark'  \n    \t}\"\n    \t@click=\"openLocationPopup()\"\n    >\n    \t<svg class=\"i-small\" :fill=\"'inherit'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"67\" viewBox=\"0 0 50 67\" fill=\"none\">\n\t\t\t  <path d=\"M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z\" :fill=\"'inherit'\"/>\n\t\t\t</svg>\n    \t {{globals.state.position?.country ? globals.state.position.country : 'World'}}\n    </button>\n  </div>\n\n \t<slot></slot>\n\n\t<div class=\"flex-justify-end flex-v-center flex-nowrap flex gap-micro\">\n\t\t<Button \n\t\t\tv-if=\"router.hasRoute('Search')\"\n\t\t\taria-label=\"search\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"() => router.push({name: 'Search'})\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconSearch \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\t\n\t\t<Button\n\t\t\taria-label=\"shopcart\"\n\t\t\t:submit=\"a => shopcart.actions.toggleShopcart()\" \n\t\t\t:counter=\"shopcart.getters.cartTotalAmount\" \n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t\tclass=\"pd-zero mn-r-micro\"\n\t\t\t> \n\t\t\t<IconShopcart \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t\t<!-- <div class=\"w-max p-small pos-absolute pos-t-100 pos-r-0\">Product Added to Shopcart</div> -->\n\t\t</Button>\n\n\n\t\t<NotificationBadge\n\t\t\tv-if=\"auth.state.user._id\"\n\t\t\t:fill=\"'rgb(var(--black))'\"\n\t\t/>\n\n\t\t<Button \n\t\t\taria-label=\"profile\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"\n\t\t\t\tauth.state.access.status === false \n\t\t\t\t? \n\t\t\t\ta => router.push({name: 'Sign In'}) \n\t\t\t\t: \n\t\t\t\ta => router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})\n\t\t\t\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconProfile \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\n\n\n\t\t<Select \n\t\t\tv-if=\"$i18n.availableLocales.length > 1\"\n\t\t\tv-model:select=\"$i18n.locale\"\n\t\t  :options=\"$i18n.availableLocales\"\n\t\t  :property=\"'value'\"\n      class=\"pos-relative uppercase pd-l-small pd-r-small pd-micro t-semi radius-thin\"\n      :class=\"{\n    \t\t'bg-light t-black': theme === 'light',\n    \t\t'bg-dark t-white': theme === 'dark'  \n    \t}\"\n    />\n  </div>\n</header>\n  \n</template>\n\n<style lang=\"scss\">\n.location-button { \n\t&:hover {\n\t\tbox-shadow: inset 0 0 0 2px rgb(var(--main));\n\t}\n}\n\n.menu-btn {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  position: relative;\n}\n.menu-btn span,\n.menu-btn__before,\n.menu-btn__after {\n  position: absolute;\n  top: 50%;\n  margin-top: -1px;\n  left: 50%;\n  margin-left: -10px;\n  width: 20px;\n  height: 2px;\n}\n.menu-btn__before,\n.menu-btn__after {\n  display: block;\n  transition: 0.2s;\n}\n.menu-btn__before {\n  transform: translateY(-5px);\n}\n.menu-btn__after {\n  transform: translateY(5px);\n}\n.menu-btn_active .menu-btn__before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active .menu-btn__after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-btn_active span:before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active span:after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-block {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.menu-nav {\n  background-color: #fff;\n  height: 50px;\n  \n}\n.menu-nav__link {\n  display: inline-block;\n  text-decoration: none;\n  color: #fff;\n  margin-right: 20px;\n}\n.menu-nav__link {\n  transition: 0.5s;\n  transform-origin: right center;\n  transform: translateX(50%);\n  opacity: 0;\n}\n.menu-nav__link_active {\n  transform: translateX(0%);\n  opacity: 1;\n}\n\n</style>"],"names":["globals.state","shopcart.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,UAAM,SAAS,UAAS;AACV,aAAQ;AAEtB,UAAM,EAAE,EAAC,IAAK,QAAO;AAGrB,aAAS,oBAAoB;AAC3BA,YAAc,sBAAsB;AAAA,IACvC;AAIC,cAAU,MAAM;AACbC,cAAiB,YAAW;AAAA,IAChC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Header.vue.js","sources":["../../../../../../../../src/modules/globals/views/components/partials/Header.vue"],"sourcesContent":["<script setup=\"props\">\n\timport { computed, onMounted, toRefs, ref, inject } from 'vue'\n\n\timport { useRouter,useRoute } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\n\timport * as globals from '@martyrs/src/modules/globals/views/store/globals'\n\timport * as shopcart from '@martyrs/src/modules/orders/store/shopcart'\n\timport * as auth from '@martyrs/src/modules/auth/views/store/auth'\n\t\n\t// Globasls Component\n\n\timport NotificationBadge from '@martyrs/src/modules/notifications/components/elements/NotificationBadge.vue';\n\t// import Navigation from '@martyrs/src/modules/globals/views/components/partials/Navigation.vue'\n\t// Martyrs Component\n\timport Button from '@martyrs/src/components/Button/Button.vue'\n\timport Select from '@martyrs/src/components/Select/Select.vue'\n\timport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'\n\t// Icons module\n\timport IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue'\n\timport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'\n\timport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\n\t// Props\n\tconst props = defineProps({\n    theme: {\n    \ttype: String,\n\t    default: \"light\"\n    },\n    logotype: {\n\t    type: Object\n\t  },\n\t  location: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n\t  theme_switcher: {\n\t    type: Boolean,\n\t\t  default: true\n\t  },\n  });\n\t// Accessing state\n\tconst router = useRouter()\n\tconst route = useRoute()\n\t// Localization\n\tconst { t } = useI18n()\n\t// const search = computed(() => store.products.state.search)\n\n\tfunction openLocationPopup() {\n\t  globals.state.isOpenLocationPopup = true;\n\t}\n\t/////////////////////////////\n\t// MOUNTED\n\t/////////////////////////////\n\tonMounted(() => {\n    shopcart.actions.setShopcart()\n  });\n</script>\n\n<template>\n\t<header \n\t\tid=\"header\" \n\t\tclass=\"\n\t\t\tpd-thin \n\t\t\tgap-micro\n\t\t\tflex-justify-between\n\t\t\tflex-nowrap\n\t\t\tflex\n\t\t\th-4r\n\t\t\tw-100\n\t\t\tz-index-2 \n\t\t\tpos-relative pos-t-0\n\t\t\tbr-b\n\t\t\tbr-solid\n\t\t\"\n\t\t:class=\"{\n  \t\t't-black br-light': theme === 'light',\n  \t\t't-white br-dark': theme === 'dark'  \n  \t}\"\n\t>\n\t<div class=\"flex-nowrap flex-v-center flex-justify-start flex gap-micro \">\n\t\t<!-- MENU -->\n\t\t<button  \n\t\t\taria-label=\"menu\"\n\t\t\t@click=\"() => globals.state.isOpenSidebar = !globals.state.isOpenSidebar\" \n\t\t\tclass=\"cursor-pointer menu-btn\"\n\t\t\t:class=\"{\n\t\t\t\t'menu-btn_active': globals.state.isOpenSidebar\n\t\t\t}\"\n\t\t>\n\t    <span\n\t    \tclass=\"no-events\"\n\t\t    :class=\"{\n\t\t      'bg-black': theme === 'light',\n\t\t      'bg-white': theme === 'dark'\n\t\t    }\"\n\t\t  >\n\t\t    <span class=\"menu-btn__before\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t    <span class=\"menu-btn__after\" :class=\"{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }\"></span>\n\t\t  </span>\n\t  </button>\n\n\t\t<!-- LOGO -->\n\t\t<component\n\t\t\tv-if=\"logotype\"\n\t\t  :is=\"logotype\"\n\t\t  @click=\"router.push({ path: '/' })\" \n\t\t  :theme=\"theme\"\n\t\t  class=\"cursor-pointer\"\n\t\t/>\n\n\t\t<button\n\t\t\tv-if=\"location\"\n\t\t\taria-label=\"button_location\"\n    \tclass=\"\n    \t\tcursor-pointer\n    \t\tbg-transp \n    \t\tpd-l-micro pd-r-micro\n    \t\tradius-extra \n    \t\tuppercase \n    \t\tt-semi\n    \t\tbr-solid \n    \t\tbr-2px \n    \t\ttransition-linear\n    \t\tt-nowrap\n    \t\n    \t\"\n    \t:class=\"{\n    \t\t'fill-black br-black t-black hover-bg-black hover-t-white hover-fill-white': theme === 'light',\n    \t\t'fill-white br-white t-white hover-bg-white hover-t-black hover-fill-black': theme === 'dark'  \n    \t}\"\n    \t@click=\"openLocationPopup()\"\n    >\n    \t<svg class=\"i-small\" :fill=\"'inherit'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"67\" viewBox=\"0 0 50 67\" fill=\"none\">\n\t\t\t  <path d=\"M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z\" :fill=\"'inherit'\"/>\n\t\t\t</svg>\n    \t {{globals.state.position?.country ? globals.state.position.country : 'World'}}\n    </button>\n  </div>\n\n \t<slot></slot>\n\n\t<div class=\"flex-justify-end flex-v-center flex-nowrap flex gap-micro\">\n\t\t<Button \n\t\t\tv-if=\"router.hasRoute('Search')\"\n\t\t\taria-label=\"search\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"() => router.push({name: 'Search'})\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconSearch \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\t\n\t\t<Button\n\t\t\taria-label=\"shopcart\"\n\t\t\t:submit=\"a => shopcart.actions.toggleShopcart()\" \n\t\t\t:counter=\"shopcart.getters.cartTotalAmount\" \n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t\tclass=\"pd-zero mn-r-micro\"\n\t\t\t> \n\t\t\t<IconShopcart \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t\t<!-- <div class=\"w-max p-small pos-absolute pos-t-100 pos-r-0\">Product Added to Shopcart</div> -->\n\t\t</Button>\n\n\n\t\t<NotificationBadge\n\t\t\tv-if=\"auth.state.user._id\"\n\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t/>\n\n\t\t<Button \n\t\t\taria-label=\"profile\"\n\t\t\tclass=\"pd-zero bg-transp\"\n\t\t\t:submit=\"\n\t\t\t\tauth.state.access.status === false \n\t\t\t\t? \n\t\t\t\ta => router.push({name: 'Sign In'}) \n\t\t\t\t: \n\t\t\t\ta => router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})\n\t\t\t\"\n\t\t\t:showSucces=\"false\"\n\t\t\t:showLoader=\"false\"\n\t\t>\n\t\t\t<IconProfile \n\t\t\t\tclass=\"i-semi\"\n\t\t\t\t:fill=\"theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'\" \n\t\t\t/>\n\t\t</Button>\n\n\n\n\t\t<Select \n\t\t\tv-if=\"$i18n.availableLocales.length > 1\"\n\t\t\tv-model:select=\"$i18n.locale\"\n\t\t  :options=\"$i18n.availableLocales\"\n\t\t  :property=\"'value'\"\n      class=\"pos-relative uppercase pd-l-small pd-r-small pd-micro t-semi radius-thin\"\n      :class=\"{\n    \t\t'bg-light t-black': theme === 'light',\n    \t\t'bg-dark t-white': theme === 'dark'  \n    \t}\"\n    />\n  </div>\n</header>\n  \n</template>\n\n<style lang=\"scss\">\n.location-button { \n\t&:hover {\n\t\tbox-shadow: inset 0 0 0 2px rgb(var(--main));\n\t}\n}\n\n.menu-btn {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  position: relative;\n}\n.menu-btn span,\n.menu-btn__before,\n.menu-btn__after {\n  position: absolute;\n  top: 50%;\n  margin-top: -1px;\n  left: 50%;\n  margin-left: -10px;\n  width: 20px;\n  height: 2px;\n}\n.menu-btn__before,\n.menu-btn__after {\n  display: block;\n  transition: 0.2s;\n}\n.menu-btn__before {\n  transform: translateY(-5px);\n}\n.menu-btn__after {\n  transform: translateY(5px);\n}\n.menu-btn_active .menu-btn__before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active .menu-btn__after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-btn_active span:before {\n  transform: rotate(-35deg);\n  width: 10px;\n  transform-origin: left bottom;\n}\n.menu-btn_active span:after {\n  transform: rotate(35deg);\n  width: 10px;\n  transform-origin: left top;\n}\n\n.menu-block {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.menu-nav {\n  background-color: #fff;\n  height: 50px;\n  \n}\n.menu-nav__link {\n  display: inline-block;\n  text-decoration: none;\n  color: #fff;\n  margin-right: 20px;\n}\n.menu-nav__link {\n  transition: 0.5s;\n  transform-origin: right center;\n  transform: translateX(50%);\n  opacity: 0;\n}\n.menu-nav__link_active {\n  transform: translateX(0%);\n  opacity: 1;\n}\n\n</style>"],"names":["globals.state","shopcart.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,UAAM,SAAS,UAAS;AACV,aAAQ;AAEtB,UAAM,EAAE,EAAC,IAAK,QAAO;AAGrB,aAAS,oBAAoB;AAC3BA,YAAc,sBAAsB;AAAA,IACvC;AAIC,cAAU,MAAM;AACbC,cAAiB,YAAW;AAAA,IAChC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}