npm - @ozdao/martyrs - Versions diffs - 0.2.428 → 0.2.430 - Mend

@ozdao/martyrs 0.2.428 → 0.2.430

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

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

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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\"\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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

package/dist/martyrs/src/modules/marketplace/views/components/sections/SectionMenu.vue.cjs CHANGED Viewed

@@ -9,7 +9,7 @@ const products = require("../../../../products/store/products.cjs");
 ;/* empty css                   */
 const _hoisted_1 = {
   id: "main-menu",
-  class: "pd-thin pos-relative"
+  class: "pos-relative"
 };
 const _hoisted_2 = {
   key: 0,

package/dist/martyrs/src/modules/marketplace/views/components/sections/SectionMenu.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionMenu.vue.cjs","sources":["../../../../../../../../src/modules/marketplace/views/components/sections/SectionMenu.vue"],"sourcesContent":["<template>\n\t<section id=\"main-menu\" class=\"~~pd-thin~~ pos-relative\">\n\t\t<h2 class=\"w-m-60r mn-auto pd-t-big pd-b-big t-center\">\n\t\t\tWeed and Accessories to <br><b>Enhance Your Smoking Experience</b> \n\t\t</h2>\n\n\t\t<transition name=\"fade\" mode=\"out-in\" appear>\n\t\t\t<div v-if=\"!menu\" class=\"w-100 h-15r radius-medium flex-center bg-light\">\n\t\t\t\t<Loader class=\"pos-relative\"/>\n\t\t\t</div>\n\n\t\t\t<ul v-else class=\"gap-thin grid-container\">\n\t\t\t\t<router-link :to=\"getMarketplaceLink([category.url])\"\n\t\t\t\t\tv-for=\"(category,index) in categoriesRoot.slice(0,5)\" \n\t\t\t\t\t:key=\"category\" \n\t\t\t\t\tclass=\"cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-medium pd-medium grid-item\"\n\t\t\t\t>\n\n\t\t\t\t\t<video \n\t\t\t\t\t\tv-if=\"category.url === 'buds' && category.photo\" \n\t\t\t\t\t\tclass=\"w-33 radius-100 o-hidden mn-r-medium\" \n\t\t\t\t\t\tautoplay loop muted\n\t\t\t\t\t>\n\t\t\t\t\t <source \n\t\t\t\t\t \t:src=\"category.photo\"\n\t\t\t\t\t \ttype=\"video/webm\"\n\t\t\t\t\t >\n\t\t\t\t\t</video>\n\n\t\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\t\tv-if=\"category.url !== 'buds' && category.photo\"\n\t\t\t\t\t\t:src=\"category.photo\"\n\t\t\t\t\t\tclass=\"i-extra t-transp mn-r-thin\"\n\t\t\t\t\t>\n\n\t\t\t\t\t<div class=\"w-100\" :class=\"{'mn-r-auto':category.url === 'buds'}\">\n\t\t\t\t\t\t<h3 class=\"t-black capitalize h3\">\n\t\t\t\t\t\t\t{{category.name}}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\n\t\t\t\t\t\t<p v-if=\"category.url === 'buds'\" class=\"mn-t-thin mn-b-thin t-transp t-black p-medium\">\n\t\t\t\t\t\t\tUnveiling the Exceptional User Curated Best Buds\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<button \n\t\t\t\t\t\t\tv-if=\"category.url === 'buds'\"\n\t\t\t class=\"mn-t-small radius-extra hover-bg-black t-medium t-black bg-main hover-t-white button-small button\"\n\t\t\t >\n\t\t\t <span>Check {{countProduct.count}} products →</span>\n\t\t\t </button>\n\t\t\t\t\t</div>\n\t\t\t\t</router-link>\n\n\t\t\t</ul>\n\t\t</transition>\n\t</section>\n</template>\n\n\n<script setup>\n\timport { ref, onMounted,computed } from 'vue'\n\n\timport Loader from '@martyrs/src/components/Loader/Loader.vue'\n\n\timport { useRouter } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\t\n\timport * as categories from '@martyrs/src/modules/products/store/categories';\n\timport * as products from '@martyrs/src/modules/products/store/products';\n\n\tconst router = useRouter()\n\n\tconst categoriesRoot = ref(null)\n\t\n \tconst text = {\n en: {\n \tcategories: []\n },\n ru: {\n \tcategories: []\n }\n }\n\n\n\tconst { t } = useI18n({\n messages: text\n })\n\n\tconst countProduct = ref(0)\n\tconst menu = ref(false)\n\n\tonMounted( async () => {\n\t\tcountProduct.value = await products.actions.read({count: true})\n\t\tcategoriesRoot.value = await categories.actions.read({rootOnly: true})\n\t\tmenu.value = true\n\t})\n</script>\n\n<style lang=\"scss\">\n\t.grid-container {\n\t display: grid;\n\t grid-template-columns: repeat(4, 1fr);\n\t grid-template-rows: repeat(2, 1fr);\n\t}\n\n\t.grid-item {\n\t &:first-of-type {\n\t \tgrid-column: span 2;\n\t \tgrid-row: span 2;\n\t }\n\t}\n\n\t@media screen and (max-width: 1025px) {\n .grid-container { grid-template-columns: repeat(2, 1fr); }\n }\n</style>\n"],"names":["useRouter","ref","useI18n","onMounted","products.actions","categories.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEgBA,cAAS,UAAA;AAExB,UAAM,iBAAiBC,IAAAA,IAAI,IAAI;AAE9B,UAAM,OAAO;AAAA,MACX,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACZ;AAAA,MACD,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACjB;AAAA,IACA;AAGC,UAAM,EAAE,EAAI,IAAGC,gBAAQ;AAAA,MACpB,UAAU;AAAA,IACX,CAAA;AAEF,UAAM,eAAeD,IAAAA,IAAI,CAAC;AAC1B,UAAM,OAAOA,IAAAA,IAAI,KAAK;AAEtBE,QAAAA,UAAW,YAAY;AACtB,mBAAa,QAAQ,MAAMC,SAAAA,QAAiB,KAAK,EAAC,OAAO,KAAI,CAAC;AAC9D,qBAAe,QAAQ,MAAMC,WAAAA,QAAmB,KAAK,EAAC,UAAU,KAAI,CAAC;AACrE,WAAK,QAAQ;AAAA,IACb,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"SectionMenu.vue.cjs","sources":["../../../../../../../../src/modules/marketplace/views/components/sections/SectionMenu.vue"],"sourcesContent":["<template>\n\t<section id=\"main-menu\" class=\"pos-relative\">\n\t\t<h2 class=\"w-m-60r mn-auto pd-t-big pd-b-big t-center\">\n\t\t\tWeed and Accessories to <br><b>Enhance Your Smoking Experience</b> \n\t\t</h2>\n\n\t\t<transition name=\"fade\" mode=\"out-in\" appear>\n\t\t\t<div v-if=\"!menu\" class=\"w-100 h-15r radius-medium flex-center bg-light\">\n\t\t\t\t<Loader class=\"pos-relative\"/>\n\t\t\t</div>\n\n\t\t\t<ul v-else class=\"gap-thin grid-container\">\n\t\t\t\t<router-link :to=\"getMarketplaceLink([category.url])\"\n\t\t\t\t\tv-for=\"(category,index) in categoriesRoot.slice(0,5)\" \n\t\t\t\t\t:key=\"category\" \n\t\t\t\t\tclass=\"cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-medium pd-medium grid-item\"\n\t\t\t\t>\n\n\t\t\t\t\t<video \n\t\t\t\t\t\tv-if=\"category.url === 'buds' && category.photo\" \n\t\t\t\t\t\tclass=\"w-33 radius-100 o-hidden mn-r-medium\" \n\t\t\t\t\t\tautoplay loop muted\n\t\t\t\t\t>\n\t\t\t\t\t <source \n\t\t\t\t\t \t:src=\"category.photo\"\n\t\t\t\t\t \ttype=\"video/webm\"\n\t\t\t\t\t >\n\t\t\t\t\t</video>\n\n\t\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\t\tv-if=\"category.url !== 'buds' && category.photo\"\n\t\t\t\t\t\t:src=\"category.photo\"\n\t\t\t\t\t\tclass=\"i-extra t-transp mn-r-thin\"\n\t\t\t\t\t>\n\n\t\t\t\t\t<div class=\"w-100\" :class=\"{'mn-r-auto':category.url === 'buds'}\">\n\t\t\t\t\t\t<h3 class=\"t-black capitalize h3\">\n\t\t\t\t\t\t\t{{category.name}}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\n\t\t\t\t\t\t<p v-if=\"category.url === 'buds'\" class=\"mn-t-thin mn-b-thin t-transp t-black p-medium\">\n\t\t\t\t\t\t\tUnveiling the Exceptional User Curated Best Buds\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<button \n\t\t\t\t\t\t\tv-if=\"category.url === 'buds'\"\n\t\t\t class=\"mn-t-small radius-extra hover-bg-black t-medium t-black bg-main hover-t-white button-small button\"\n\t\t\t >\n\t\t\t <span>Check {{countProduct.count}} products →</span>\n\t\t\t </button>\n\t\t\t\t\t</div>\n\t\t\t\t</router-link>\n\n\t\t\t</ul>\n\t\t</transition>\n\t</section>\n</template>\n\n\n<script setup>\n\timport { ref, onMounted,computed } from 'vue'\n\n\timport Loader from '@martyrs/src/components/Loader/Loader.vue'\n\n\timport { useRouter } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\t\n\timport * as categories from '@martyrs/src/modules/products/store/categories';\n\timport * as products from '@martyrs/src/modules/products/store/products';\n\n\tconst router = useRouter()\n\n\tconst categoriesRoot = ref(null)\n\t\n \tconst text = {\n en: {\n \tcategories: []\n },\n ru: {\n \tcategories: []\n }\n }\n\n\n\tconst { t } = useI18n({\n messages: text\n })\n\n\tconst countProduct = ref(0)\n\tconst menu = ref(false)\n\n\tonMounted( async () => {\n\t\tcountProduct.value = await products.actions.read({count: true})\n\t\tcategoriesRoot.value = await categories.actions.read({rootOnly: true})\n\t\tmenu.value = true\n\t})\n</script>\n\n<style lang=\"scss\">\n\t.grid-container {\n\t display: grid;\n\t grid-template-columns: repeat(4, 1fr);\n\t grid-template-rows: repeat(2, 1fr);\n\t}\n\n\t.grid-item {\n\t &:first-of-type {\n\t \tgrid-column: span 2;\n\t \tgrid-row: span 2;\n\t }\n\t}\n\n\t@media screen and (max-width: 1025px) {\n .grid-container { grid-template-columns: repeat(2, 1fr); }\n }\n</style>\n"],"names":["useRouter","ref","useI18n","onMounted","products.actions","categories.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEgBA,cAAS,UAAA;AAExB,UAAM,iBAAiBC,IAAAA,IAAI,IAAI;AAE9B,UAAM,OAAO;AAAA,MACX,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACZ;AAAA,MACD,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACjB;AAAA,IACA;AAGC,UAAM,EAAE,EAAI,IAAGC,gBAAQ;AAAA,MACpB,UAAU;AAAA,IACX,CAAA;AAEF,UAAM,eAAeD,IAAAA,IAAI,CAAC;AAC1B,UAAM,OAAOA,IAAAA,IAAI,KAAK;AAEtBE,QAAAA,UAAW,YAAY;AACtB,mBAAa,QAAQ,MAAMC,SAAAA,QAAiB,KAAK,EAAC,OAAO,KAAI,CAAC;AAC9D,qBAAe,QAAQ,MAAMC,WAAAA,QAAmB,KAAK,EAAC,UAAU,KAAI,CAAC;AACrE,WAAK,QAAQ;AAAA,IACb,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/marketplace/views/components/sections/SectionMenu.vue.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { actions } from "../../../../products/store/products.js";
 /* empty css                 */
 const _hoisted_1 = {
   id: "main-menu",
-  class: "pd-thin pos-relative"
+  class: "pos-relative"
 };
 const _hoisted_2 = {
   key: 0,

package/dist/martyrs/src/modules/marketplace/views/components/sections/SectionMenu.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionMenu.vue.js","sources":["../../../../../../../../src/modules/marketplace/views/components/sections/SectionMenu.vue"],"sourcesContent":["<template>\n\t<section id=\"main-menu\" class=\"~~pd-thin~~ pos-relative\">\n\t\t<h2 class=\"w-m-60r mn-auto pd-t-big pd-b-big t-center\">\n\t\t\tWeed and Accessories to <br><b>Enhance Your Smoking Experience</b> \n\t\t</h2>\n\n\t\t<transition name=\"fade\" mode=\"out-in\" appear>\n\t\t\t<div v-if=\"!menu\" class=\"w-100 h-15r radius-medium flex-center bg-light\">\n\t\t\t\t<Loader class=\"pos-relative\"/>\n\t\t\t</div>\n\n\t\t\t<ul v-else class=\"gap-thin grid-container\">\n\t\t\t\t<router-link :to=\"getMarketplaceLink([category.url])\"\n\t\t\t\t\tv-for=\"(category,index) in categoriesRoot.slice(0,5)\" \n\t\t\t\t\t:key=\"category\" \n\t\t\t\t\tclass=\"cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-medium pd-medium grid-item\"\n\t\t\t\t>\n\n\t\t\t\t\t<video \n\t\t\t\t\t\tv-if=\"category.url === 'buds' && category.photo\" \n\t\t\t\t\t\tclass=\"w-33 radius-100 o-hidden mn-r-medium\" \n\t\t\t\t\t\tautoplay loop muted\n\t\t\t\t\t>\n\t\t\t\t\t <source \n\t\t\t\t\t \t:src=\"category.photo\"\n\t\t\t\t\t \ttype=\"video/webm\"\n\t\t\t\t\t >\n\t\t\t\t\t</video>\n\n\t\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\t\tv-if=\"category.url !== 'buds' && category.photo\"\n\t\t\t\t\t\t:src=\"category.photo\"\n\t\t\t\t\t\tclass=\"i-extra t-transp mn-r-thin\"\n\t\t\t\t\t>\n\n\t\t\t\t\t<div class=\"w-100\" :class=\"{'mn-r-auto':category.url === 'buds'}\">\n\t\t\t\t\t\t<h3 class=\"t-black capitalize h3\">\n\t\t\t\t\t\t\t{{category.name}}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\n\t\t\t\t\t\t<p v-if=\"category.url === 'buds'\" class=\"mn-t-thin mn-b-thin t-transp t-black p-medium\">\n\t\t\t\t\t\t\tUnveiling the Exceptional User Curated Best Buds\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<button \n\t\t\t\t\t\t\tv-if=\"category.url === 'buds'\"\n\t\t\t class=\"mn-t-small radius-extra hover-bg-black t-medium t-black bg-main hover-t-white button-small button\"\n\t\t\t >\n\t\t\t <span>Check {{countProduct.count}} products →</span>\n\t\t\t </button>\n\t\t\t\t\t</div>\n\t\t\t\t</router-link>\n\n\t\t\t</ul>\n\t\t</transition>\n\t</section>\n</template>\n\n\n<script setup>\n\timport { ref, onMounted,computed } from 'vue'\n\n\timport Loader from '@martyrs/src/components/Loader/Loader.vue'\n\n\timport { useRouter } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\t\n\timport * as categories from '@martyrs/src/modules/products/store/categories';\n\timport * as products from '@martyrs/src/modules/products/store/products';\n\n\tconst router = useRouter()\n\n\tconst categoriesRoot = ref(null)\n\t\n \tconst text = {\n en: {\n \tcategories: []\n },\n ru: {\n \tcategories: []\n }\n }\n\n\n\tconst { t } = useI18n({\n messages: text\n })\n\n\tconst countProduct = ref(0)\n\tconst menu = ref(false)\n\n\tonMounted( async () => {\n\t\tcountProduct.value = await products.actions.read({count: true})\n\t\tcategoriesRoot.value = await categories.actions.read({rootOnly: true})\n\t\tmenu.value = true\n\t})\n</script>\n\n<style lang=\"scss\">\n\t.grid-container {\n\t display: grid;\n\t grid-template-columns: repeat(4, 1fr);\n\t grid-template-rows: repeat(2, 1fr);\n\t}\n\n\t.grid-item {\n\t &:first-of-type {\n\t \tgrid-column: span 2;\n\t \tgrid-row: span 2;\n\t }\n\t}\n\n\t@media screen and (max-width: 1025px) {\n .grid-container { grid-template-columns: repeat(2, 1fr); }\n }\n</style>\n"],"names":["products.actions","categories.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEgB,cAAS;AAExB,UAAM,iBAAiB,IAAI,IAAI;AAE9B,UAAM,OAAO;AAAA,MACX,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACZ;AAAA,MACD,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACjB;AAAA,IACA;AAGC,UAAM,EAAE,EAAI,IAAG,QAAQ;AAAA,MACpB,UAAU;AAAA,IACX,CAAA;AAEF,UAAM,eAAe,IAAI,CAAC;AAC1B,UAAM,OAAO,IAAI,KAAK;AAEtB,cAAW,YAAY;AACtB,mBAAa,QAAQ,MAAMA,QAAiB,KAAK,EAAC,OAAO,KAAI,CAAC;AAC9D,qBAAe,QAAQ,MAAMC,UAAmB,KAAK,EAAC,UAAU,KAAI,CAAC;AACrE,WAAK,QAAQ;AAAA,IACb,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"SectionMenu.vue.js","sources":["../../../../../../../../src/modules/marketplace/views/components/sections/SectionMenu.vue"],"sourcesContent":["<template>\n\t<section id=\"main-menu\" class=\"pos-relative\">\n\t\t<h2 class=\"w-m-60r mn-auto pd-t-big pd-b-big t-center\">\n\t\t\tWeed and Accessories to <br><b>Enhance Your Smoking Experience</b> \n\t\t</h2>\n\n\t\t<transition name=\"fade\" mode=\"out-in\" appear>\n\t\t\t<div v-if=\"!menu\" class=\"w-100 h-15r radius-medium flex-center bg-light\">\n\t\t\t\t<Loader class=\"pos-relative\"/>\n\t\t\t</div>\n\n\t\t\t<ul v-else class=\"gap-thin grid-container\">\n\t\t\t\t<router-link :to=\"getMarketplaceLink([category.url])\"\n\t\t\t\t\tv-for=\"(category,index) in categoriesRoot.slice(0,5)\" \n\t\t\t\t\t:key=\"category\" \n\t\t\t\t\tclass=\"cursor-pointer hover-scale-0 flex-v-center flex-h-center flex-nowrap flex-row flex bg-light radius-medium pd-medium grid-item\"\n\t\t\t\t>\n\n\t\t\t\t\t<video \n\t\t\t\t\t\tv-if=\"category.url === 'buds' && category.photo\" \n\t\t\t\t\t\tclass=\"w-33 radius-100 o-hidden mn-r-medium\" \n\t\t\t\t\t\tautoplay loop muted\n\t\t\t\t\t>\n\t\t\t\t\t <source \n\t\t\t\t\t \t:src=\"category.photo\"\n\t\t\t\t\t \ttype=\"video/webm\"\n\t\t\t\t\t >\n\t\t\t\t\t</video>\n\n\t\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\t\tv-if=\"category.url !== 'buds' && category.photo\"\n\t\t\t\t\t\t:src=\"category.photo\"\n\t\t\t\t\t\tclass=\"i-extra t-transp mn-r-thin\"\n\t\t\t\t\t>\n\n\t\t\t\t\t<div class=\"w-100\" :class=\"{'mn-r-auto':category.url === 'buds'}\">\n\t\t\t\t\t\t<h3 class=\"t-black capitalize h3\">\n\t\t\t\t\t\t\t{{category.name}}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\n\t\t\t\t\t\t<p v-if=\"category.url === 'buds'\" class=\"mn-t-thin mn-b-thin t-transp t-black p-medium\">\n\t\t\t\t\t\t\tUnveiling the Exceptional User Curated Best Buds\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<button \n\t\t\t\t\t\t\tv-if=\"category.url === 'buds'\"\n\t\t\t class=\"mn-t-small radius-extra hover-bg-black t-medium t-black bg-main hover-t-white button-small button\"\n\t\t\t >\n\t\t\t <span>Check {{countProduct.count}} products →</span>\n\t\t\t </button>\n\t\t\t\t\t</div>\n\t\t\t\t</router-link>\n\n\t\t\t</ul>\n\t\t</transition>\n\t</section>\n</template>\n\n\n<script setup>\n\timport { ref, onMounted,computed } from 'vue'\n\n\timport Loader from '@martyrs/src/components/Loader/Loader.vue'\n\n\timport { useRouter } from 'vue-router'\n\timport { useI18n } from 'vue-i18n'\n\t\t\n\timport * as categories from '@martyrs/src/modules/products/store/categories';\n\timport * as products from '@martyrs/src/modules/products/store/products';\n\n\tconst router = useRouter()\n\n\tconst categoriesRoot = ref(null)\n\t\n \tconst text = {\n en: {\n \tcategories: []\n },\n ru: {\n \tcategories: []\n }\n }\n\n\n\tconst { t } = useI18n({\n messages: text\n })\n\n\tconst countProduct = ref(0)\n\tconst menu = ref(false)\n\n\tonMounted( async () => {\n\t\tcountProduct.value = await products.actions.read({count: true})\n\t\tcategoriesRoot.value = await categories.actions.read({rootOnly: true})\n\t\tmenu.value = true\n\t})\n</script>\n\n<style lang=\"scss\">\n\t.grid-container {\n\t display: grid;\n\t grid-template-columns: repeat(4, 1fr);\n\t grid-template-rows: repeat(2, 1fr);\n\t}\n\n\t.grid-item {\n\t &:first-of-type {\n\t \tgrid-column: span 2;\n\t \tgrid-row: span 2;\n\t }\n\t}\n\n\t@media screen and (max-width: 1025px) {\n .grid-container { grid-template-columns: repeat(2, 1fr); }\n }\n</style>\n"],"names":["products.actions","categories.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEgB,cAAS;AAExB,UAAM,iBAAiB,IAAI,IAAI;AAE9B,UAAM,OAAO;AAAA,MACX,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACZ;AAAA,MACD,IAAI;AAAA,QACH,YAAY,CAAA;AAAA,MACjB;AAAA,IACA;AAGC,UAAM,EAAE,EAAI,IAAG,QAAQ;AAAA,MACpB,UAAU;AAAA,IACX,CAAA;AAEF,UAAM,eAAe,IAAI,CAAC;AAC1B,UAAM,OAAO,IAAI,KAAK;AAEtB,cAAW,YAAY;AACtB,mBAAa,QAAQ,MAAMA,QAAiB,KAAK,EAAC,OAAO,KAAI,CAAC;AAC9D,qBAAe,QAAQ,MAAMC,UAAmB,KAAK,EAAC,UAAU,KAAI,CAAC;AACrE,WAAK,QAAQ;AAAA,IACb,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.cjs CHANGED Viewed

@@ -76,6 +76,12 @@ const _sfc_main = {
     };
     vue.onMounted(() => {
       document.addEventListener("click", handleClickOutside);
+      if (isOpen.value) {
+        const userId = auth.state.user._id;
+        if (userId) {
+          getNotifications(userId);
+        }
+      }
     });
     vue.onUnmounted(() => {
       document.removeEventListener("click", handleClickOutside);
@@ -128,6 +134,6 @@ const _sfc_main = {
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-31a828f9"]]);
+const NotificationBadge = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-73074f7a"]]);
 exports.default = NotificationBadge;
 //# sourceMappingURL=NotificationBadge.vue.cjs.map

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationBadge.vue.cjs","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n <div class=\"notification-badge-container\">\n <button \n class=\"i-semi notification-button\"\n @click=\"toggleNotifications\"\n :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n >\n <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n <span \n v-if=\"unreadCount > 0\" \n class=\"button-counter\"\n >\n {{ unreadCount > 99 ? '99+' : unreadCount }}\n </span>\n </button>\n <div v-if=\"isOpen\" class=\"notifications-dropdown\">\n <div class=\"notifications-header\">\n <h3>Notifications</h3>\n <button \n v-if=\"unreadCount > 0\" \n class=\"mark-all-read-btn\" \n @click=\"markAllAsRead\"\n >\n Mark all read\n </button>\n </div>\n <div v-if=\"loading\" class=\"notifications-loading\">\n Loading...\n </div>\n <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n No notifications\n </div>\n <div v-else class=\"notifications-list\">\n <notification-item \n v-for=\"notification in recentNotifications\" \n :key=\"notification._id\" \n :notification=\"notification\"\n @click=\"handleNotificationClick(notification)\"\n />\n </div>\n <div class=\"notifications-footer\">\n <router-link to=\"/notifications\" @click=\"isOpen = false\">\n View all notifications\n </router-link>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth';\n\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n maxNotifications: {\n type: Number,\n default: 5\n },\n fill: {\n type: String,\n default: 'rgb(var(--white))'\n }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = inject('useNotifications')();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n return notifications.value\n .slice()\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n isOpen.value = !isOpen.value;\n \n // Load notifications if opening\n if (isOpen.value) {\n const userId = auth.state.user._id;\n if (userId) {\n getNotifications(userId);\n }\n }\n};\n\nconst handleNotificationClick = (notification) => {\n isOpen.value = false;\n \n if (notification._id) {\n // Handle in store\n actions.handleNotificationAction({\n notificationId: notification._id,\n ...notification.metadata\n });\n }\n};\n\n// Close dropdown when clicking outside\nconst handleClickOutside = (event) => {\n const container = document.querySelector('.notification-badge-container');\n if (container && !container.contains(event.target)) {\n isOpen.value = false;\n }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n document.addEventListener('click', handleClickOutside);\n});\n\nonUnmounted(() => {\n document.removeEventListener('click', handleClickOutside);\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n position: relative;\n display: inline-block;\n}\n\n.notification-button {\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n font-size: 1.2rem;\n}\n\n.notification-icon {\n font-size: 1.4rem;\n}\n.button-counter {\n position: absolute;\n right: -8px;\n bottom: -8px;\n background: rgb(var(--fourth));\n color: rgb(var(--white));\n height: 16px;\n border-radius: 16px;\n width: 16px;\n font-weight: 500;\n text-align: center;\n line-height: 16px;\n font-size: 10px;\n}\n.notifications-dropdown {\n position: absolute;\n top: 100%;\n right: 0;\n width: 320px;\n max-height: 400px;\n overflow-y: auto;\n background-color: white;\n border-radius: 4px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\n.notifications-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #eee;\n}\n\n.notifications-header h3 {\n margin: 0;\n font-size: 1rem;\n}\n\n.mark-all-read-btn {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 0.8rem;\n cursor: pointer;\n}\n\n.notifications-loading,\n.notifications-empty {\n padding: 24px;\n text-align: center;\n color: #666;\n}\n\n.notifications-list {\n max-height: 300px;\n overflow-y: auto;\n}\n\n.notifications-footer {\n padding: 12px 16px;\n text-align: center;\n border-top: 1px solid #eee;\n}\n\n.notifications-footer a {\n color: #2196f3;\n text-decoration: none;\n font-size: 0.9rem;\n}\n</style>"],"names":["useRouter","inject","ref","computed","auth.state","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAYCA,cAAS,UAAA;AACxB,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,qBAAqBC,IAAAA,OAAO,kBAAkB,EAAG;AAG7G,UAAM,SAASC,IAAG,IAAC,KAAK;AAGxB,UAAM,sBAAsBC,IAAQ,SAAC,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAGvB,UAAI,OAAO,OAAO;AAChB,cAAM,SAASC,WAAW,KAAK;AAC/B,YAAI,QAAQ;AACV,2BAAiB,MAAM;AAAA,QAC7B;AAAA,MACA;AAAA,IACA;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACL;AAAA,IACA;AAGA,UAAM,qBAAqB,CAAC,UAAU;AACpC,YAAM,YAAY,SAAS,cAAc,+BAA+B;AACxE,UAAI,aAAa,CAAC,UAAU,SAAS,MAAM,MAAM,GAAG;AAClD,eAAO,QAAQ;AAAA,MACnB;AAAA,IACA;AAGAC,QAAAA,UAAU,MAAM;AACd,eAAS,iBAAiB,SAAS,kBAAkB;AAAA,~~IACvD~~,CAAC;~~AAEDC~~,QAAAA,YAAY,MAAM;AAChB,eAAS,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NotificationBadge.vue.cjs","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n <div class=\"notification-badge-container\">\n <button \n class=\"i-semi notification-button\"\n @click=\"toggleNotifications\"\n :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n >\n <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n <span \n v-if=\"unreadCount > 0\" \n class=\"button-counter\"\n >\n {{ unreadCount > 99 ? '99+' : unreadCount }}\n </span>\n </button>\n <div v-if=\"isOpen\" class=\"notifications-dropdown\">\n <div class=\"notifications-header\">\n <h3>Notifications</h3>\n <button \n v-if=\"unreadCount > 0\" \n class=\"mark-all-read-btn\" \n @click=\"markAllAsRead\"\n >\n Mark all read\n </button>\n </div>\n <div v-if=\"loading\" class=\"notifications-loading\">\n Loading...\n </div>\n <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n No notifications\n </div>\n <div v-else class=\"notifications-list\">\n <notification-item \n v-for=\"notification in recentNotifications\" \n :key=\"notification._id\" \n :notification=\"notification\"\n @click=\"handleNotificationClick(notification)\"\n />\n </div>\n <div class=\"notifications-footer\">\n <router-link to=\"/notifications\" @click=\"isOpen = false\">\n View all notifications\n </router-link>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth';\n\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n maxNotifications: {\n type: Number,\n default: 5\n },\n fill: {\n type: String,\n default: 'rgb(var(--white))'\n }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = inject('useNotifications')();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n return notifications.value\n .slice()\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n isOpen.value = !isOpen.value;\n \n // Load notifications if opening\n if (isOpen.value) {\n const userId = auth.state.user._id;\n if (userId) {\n getNotifications(userId);\n }\n }\n};\n\nconst handleNotificationClick = (notification) => {\n isOpen.value = false;\n \n if (notification._id) {\n // Handle in store\n actions.handleNotificationAction({\n notificationId: notification._id,\n ...notification.metadata\n });\n }\n};\n\n// Close dropdown when clicking outside\nconst handleClickOutside = (event) => {\n const container = document.querySelector('.notification-badge-container');\n if (container && !container.contains(event.target)) {\n isOpen.value = false;\n }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n document.addEventListener('click', handleClickOutside);\n\n if (isOpen.value) {\n const userId = auth.state.user._id;\n if (userId) {\n getNotifications(userId);\n }\n }\n});\n\nonUnmounted(() => {\n document.removeEventListener('click', handleClickOutside);\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n position: relative;\n display: inline-block;\n}\n\n.notification-button {\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n font-size: 1.2rem;\n}\n\n.notification-icon {\n font-size: 1.4rem;\n}\n.button-counter {\n position: absolute;\n right: -8px;\n bottom: -8px;\n background: rgb(var(--fourth));\n color: rgb(var(--white));\n height: 16px;\n border-radius: 16px;\n width: 16px;\n font-weight: 500;\n text-align: center;\n line-height: 16px;\n font-size: 10px;\n}\n.notifications-dropdown {\n position: absolute;\n top: 100%;\n right: 0;\n width: 320px;\n max-height: 400px;\n overflow-y: auto;\n background-color: white;\n border-radius: 4px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\n.notifications-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #eee;\n}\n\n.notifications-header h3 {\n margin: 0;\n font-size: 1rem;\n}\n\n.mark-all-read-btn {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 0.8rem;\n cursor: pointer;\n}\n\n.notifications-loading,\n.notifications-empty {\n padding: 24px;\n text-align: center;\n color: #666;\n}\n\n.notifications-list {\n max-height: 300px;\n overflow-y: auto;\n}\n\n.notifications-footer {\n padding: 12px 16px;\n text-align: center;\n border-top: 1px solid #eee;\n}\n\n.notifications-footer a {\n color: #2196f3;\n text-decoration: none;\n font-size: 0.9rem;\n}\n</style>"],"names":["useRouter","inject","ref","computed","auth.state","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAYCA,cAAS,UAAA;AACxB,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,qBAAqBC,IAAAA,OAAO,kBAAkB,EAAG;AAG7G,UAAM,SAASC,IAAG,IAAC,KAAK;AAGxB,UAAM,sBAAsBC,IAAQ,SAAC,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAGvB,UAAI,OAAO,OAAO;AAChB,cAAM,SAASC,WAAW,KAAK;AAC/B,YAAI,QAAQ;AACV,2BAAiB,MAAM;AAAA,QAC7B;AAAA,MACA;AAAA,IACA;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACL;AAAA,IACA;AAGA,UAAM,qBAAqB,CAAC,UAAU;AACpC,YAAM,YAAY,SAAS,cAAc,+BAA+B;AACxE,UAAI,aAAa,CAAC,UAAU,SAAS,MAAM,MAAM,GAAG;AAClD,eAAO,QAAQ;AAAA,MACnB;AAAA,IACA;AAGAC,QAAAA,UAAU,MAAM;AACd,eAAS,iBAAiB,SAAS,kBAAkB;AAErD,UAAI,OAAO,OAAO;AAChB,cAAM,SAASD,WAAW,KAAK;AAC/B,YAAI,QAAQ;AACV,2BAAiB,MAAM;AAAA,QAC7B;AAAA,MACA;AAAA,IACA,CAAC;AAEDE,QAAAA,YAAY,MAAM;AAChB,eAAS,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js CHANGED Viewed

@@ -74,6 +74,12 @@ const _sfc_main = {
     };
     onMounted(() => {
       document.addEventListener("click", handleClickOutside);
+      if (isOpen.value) {
+        const userId = state.user._id;
+        if (userId) {
+          getNotifications(userId);
+        }
+      }
     });
     onUnmounted(() => {
       document.removeEventListener("click", handleClickOutside);
@@ -126,7 +132,7 @@ const _sfc_main = {
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-31a828f9"]]);
+const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-73074f7a"]]);
 export {
   NotificationBadge as default
 };