@ozdao/martyrs 0.2.548 → 0.2.550

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

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const IconChevronBottom = require("../../../../icons/navigation/IconChevronBottom.vue.cjs");
+const core_store = require("../../store/core.store.cjs");
+const auth = require("../../../../auth/views/store/auth.cjs");
+const Dropdown = require("../../../../../components/Dropdown/Dropdown.vue2.cjs");
+;/* empty css                                               */
+;/* empty css                  */
+const _pluginVue_exportHelper = require("../../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "t-medium" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  key: 1,
+  class: ""
+};
+const _hoisted_5 = { class: "w-100" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = {
+  key: 0,
+  class: "w-100 flex-child-default w-max-big flex flex-center aspect-1x1"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "p-regular"
+};
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = {
+  key: 0,
+  class: "mn-l-small mn-t-thin"
+};
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = {
+  key: 1,
+  class: ""
+};
+const _hoisted_13 = { class: "w-100" };
+const _sfc_main = {
+  __name: "Navigation",
+  props: {
+    navigationItems: Array,
+    theme: {
+      type: String,
+      default: "light"
+    },
+    stateSidebar: {
+      type: Boolean,
+      default: false
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "closeSidebar"
+  ],
+  setup(__props, { emit: __emit }) {
+    const router = vueRouter.useRouter();
+    const route = vueRouter.useRoute();
+    const props = __props;
+    const emits = __emit;
+    const expandedSections = vue.ref([]);
+    const toggleSection = (title) => {
+      if (!props.stateSidebar) {
+        if (menuItems.value.flatMap((section) => section.items).find((item) => item.title === title && item.subItems)) {
+          emits("closeSidebar");
+          setTimeout(() => {
+            expandedSections.value.push(title);
+          }, 50);
+        }
+        return;
+      }
+      const index = expandedSections.value.indexOf(title);
+      if (index === -1) {
+        expandedSections.value.push(title);
+      } else {
+        expandedSections.value.splice(index, 1);
+      }
+    };
+    const isSectionExpanded = (title) => {
+      return expandedSections.value.includes(title);
+    };
+    const processRoute = (routeFn) => {
+      if (typeof routeFn === "function") {
+        return routeFn(auth.state, route);
+      }
+      return routeFn;
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("nav", {
+        class: vue.normalizeClass(["transition-quint-out o-x-visible h-100", [
+          __props.stateSidebar ? "pd-small" : "pd-micro",
+          __props.horizontal ? "w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible" : "o-y-scroll gap-medium rows-1"
+        ]])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.navigationItems, (section) => {
+          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            key: section.category,
+            class: vue.normalizeClass(["transition-quint-out", [
+              __props.horizontal ? "w-max  flex-child-default flex flex-nowrap" : "",
+              __props.stateSidebar && !__props.horizontal ? "" : ""
+            ]])
+          }, [
+            section.category && __props.stateSidebar && !__props.horizontal ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(["uppercase t-medium t-transp p-small", {
+                "t-black": __props.theme === "light",
+                "t-white": __props.theme === "dark"
+              }])
+            }, vue.toDisplayString(section.category), 3)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("ul", {
+              class: vue.normalizeClass([
+                __props.horizontal ? "w-100 gap-micro flex flex-nowrap" : "flex flex-column gap-micro"
+              ])
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(section.items, (item) => {
+                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+                  class: "w-100 pos-relative",
+                  key: item.title
+                }, [
+                  item.subItems && __props.horizontal ? (vue.openBlock(), vue.createBlock(Dropdown.default, {
+                    key: 0,
+                    class: "w-100",
+                    align: "left",
+                    trigger: "hover"
+                  }, {
+                    label: vue.withCtx(() => [
+                      vue.createElementVNode("button", {
+                        class: vue.normalizeClass(["transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin", [
+                          item.route && vue.unref(route).path === processRoute(item.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                          __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                        ]]),
+                        onClick: ($event) => item.route ? vue.unref(router).push(processRoute(item.route)) : null
+                      }, [
+                        vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(item.title), 1)
+                      ], 10, _hoisted_1)
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("ul", {
+                        class: vue.normalizeClass(["dropdown-submenu bg-blur-small", __props.theme === "light" ? "bg-white-transp-50 " : "bg-black-transp-50"])
+                      }, [
+                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.subItems, (subItem) => {
+                          return vue.openBlock(), vue.createElementBlock("li", {
+                            key: subItem.title
+                          }, [
+                            vue.createElementVNode("a", {
+                              onClick: ($event) => subItem.route ? vue.unref(router).push(processRoute(subItem.route)) : null,
+                              href: "#",
+                              class: vue.normalizeClass(["transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small", [
+                                subItem.route && vue.unref(route).path === processRoute(subItem.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                                __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                              ]])
+                            }, [
+                              subItem.iconComponent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(subItem.iconComponent), {
+                                key: 0,
+                                class: "i-medium",
+                                fill: core_store.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_4, vue.toDisplayString(subItem.icon), 1)),
+                              vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(subItem.title), 1)
+                            ], 10, _hoisted_3)
+                          ]);
+                        }), 128))
+                      ], 2)
+                    ]),
+                    _: 2
+                  }, 1024)) : (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 1,
+                    class: vue.normalizeClass(["transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center", [
+                      __props.horizontal ? "pd-thin" : "",
+                      item.route && vue.unref(route).path === processRoute(item.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                      __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                    ]]),
+                    onClick: ($event) => item.route ? (_ctx.isPhone ? __props.stateSidebar = false : null, vue.unref(route).path !== processRoute(item.route) ? vue.unref(router).push(processRoute(item.route)) : null) : null
+                  }, [
+                    !__props.horizontal ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                      item.iconComponent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.iconComponent), {
+                        key: 0,
+                        class: "i-medium flex-child-default",
+                        fill: core_store.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 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(item.icon), 1)) : vue.createCommentVNode("", true)
+                    ])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("span", {
+                      class: vue.normalizeClass(["transition-quint-out w-100 t-left t-medium", { "hidden": !__props.stateSidebar && !__props.horizontal, "visible": __props.stateSidebar || __props.horizontal }])
+                    }, vue.toDisplayString(item.title), 3),
+                    item.subItems && __props.stateSidebar && !__props.horizontal ? (vue.openBlock(), vue.createElementBlock("span", {
+                      key: 1,
+                      class: vue.normalizeClass(["mn-l-auto mn-r-small sidebar-dropdown-icon", { "rotate-180": isSectionExpanded(item.title) }]),
+                      onClick: vue.withModifiers(($event) => toggleSection(item.title), ["stop"])
+                    }, [
+                      vue.createVNode(IconChevronBottom.default, {
+                        class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": _ctx.isOpen }, "i-small"]),
+                        fill: __props.theme === "dark" ? "rgb(var(--white))" : "rgb(var(--black))"
+                      }, null, 8, ["class", "fill"])
+                    ], 10, _hoisted_9)) : vue.createCommentVNode("", true)
+                  ], 10, _hoisted_6)),
+                  vue.createVNode(vue.Transition, {
+                    "enter-active-class": "dropdown-enter",
+                    "leave-active-class": "dropdown-leave",
+                    "enter-from-class": "dropdown-enter-from",
+                    "enter-to-class": "dropdown-enter-to",
+                    "leave-from-class": "dropdown-leave-from",
+                    "leave-to-class": "dropdown-leave-to"
+                  }, {
+                    default: vue.withCtx(() => [
+                      item.subItems && isSectionExpanded(item.title) && __props.stateSidebar && !__props.horizontal ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_10, [
+                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.subItems, (subItem) => {
+                          return vue.openBlock(), vue.createElementBlock("li", {
+                            key: subItem.title
+                          }, [
+                            vue.createElementVNode("a", {
+                              onClick: ($event) => subItem.route ? (_ctx.isPhone ? __props.stateSidebar = false : null, vue.unref(route).path !== processRoute(subItem.route) ? vue.unref(router).push(processRoute(subItem.route)) : null) : null,
+                              href: "#",
+                              class: vue.normalizeClass(["transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small", [
+                                subItem.route && vue.unref(route).path === processRoute(subItem.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                                __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                              ]])
+                            }, [
+                              subItem.iconComponent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(subItem.iconComponent), {
+                                key: 0,
+                                class: "i-medium",
+                                fill: core_store.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_12, vue.toDisplayString(subItem.icon), 1)),
+                              vue.createElementVNode("span", _hoisted_13, vue.toDisplayString(subItem.title), 1)
+                            ], 10, _hoisted_11)
+                          ]);
+                        }), 128))
+                      ])) : vue.createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])), [
+                  [vue.vShow, !item.visible || (typeof item.visible === "function" ? item.visible(auth.state, vue.unref(route)) : true)]
+                ]);
+              }), 128))
+            ], 2)
+          ], 2)), [
+            [vue.vShow, !section.visible || (typeof section.visible === "function" ? section.visible(auth.state, vue.unref(route)) : true)]
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+};
+const Navigation = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-df6a639b"]]);
+exports.default = Navigation;
+//# sourceMappingURL=Navigation.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.vue.cjs","sources":["../../../../../../../../src/modules/core/views/components/partials/Navigation.vue"],"sourcesContent":["<script setup>\nimport { ref, watch, computed } from 'vue'\nimport { useRouter, useRoute } from 'vue-router'\n\nimport IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'\n\nimport * as core from '@martyrs/src/modules/core/views/store/core.store.js'\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js'\n\nconst router = useRouter()\nconst route = useRoute()\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,\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 emits = defineEmits([\n  'closeSidebar'\n])\n\nconst expandedSections = ref([])\n\nconst toggleSection = (title) => {\n  if (!props.stateSidebar) {\n    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {\n      emits('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\n// Process route functions with auth data and route\nconst processRoute = (routeFn) => {\n  if (typeof routeFn === 'function') {\n    return routeFn(auth.state, route)\n  }\n  return routeFn\n}\n</script>\n\n<template>\n  <nav\n    class=\"transition-quint-out o-x-visible  h-100\"\n    :class=\"[\n      stateSidebar ? 'pd-small' : 'pd-micro',\n      horizontal ? 'w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible' : 'o-y-scroll gap-medium rows-1',\n    ]\"\n  >\n    <div \n      v-for=\"section in props.navigationItems\" \n      v-show=\"!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state, route) : true)\"\n      :key=\"section.category\" \n      class=\"transition-quint-out\"\n      :class=\"[\n        horizontal ? 'w-max  flex-child-default flex flex-nowrap' : '',\n        stateSidebar && !horizontal ? '' : '',\n      ]\"\n    >\n      <div\n        v-if=\"section.category && stateSidebar && !horizontal\"\n        class=\"uppercase t-medium t-transp p-small\"\n        :class=\"{\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-micro',\n        ]\"\n      >\n        <li\n          v-for=\"item in section.items\"\n          v-show=\"!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state, route) : true)\"\n          class=\"w-100 pos-relative\"\n          :key=\"item.title\"\n\n        >\n        <Dropdown\n          v-if=\"item.subItems && horizontal\"\n          class=\"w-100\"\n          align=\"left\"\n          trigger=\"hover\"\n        >\n          <template #label>\n            <button\n              class=\"transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin\"\n              @click=\"item.route ? router.push(processRoute(item.route)) : null\"\n              :class=\"[\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              <span class=\"t-medium\">{{ item.title }}</span>\n              <!-- <IconChevronBottom :fill=\"theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'\" class=\"i-small mn-l-thin\"/> -->\n            </button>\n          </template>\n          <ul class=\"dropdown-submenu bg-blur-small\" :class=\"theme === 'light' ? 'bg-white-transp-50 ' : 'bg-black-transp-50'\">\n            <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n              <a\n                @click=\"subItem.route ? router.push(processRoute(subItem.route)) : null\"\n                href=\"#\"\n                class=\"transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small\"\n                :class=\"[\n                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',\n                  theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'\n                ]\"\n              >\n                <component\n                  v-if=\"subItem.iconComponent\"\n                  :is=\"subItem.iconComponent\"\n                  class=\"i-medium\"\n                  :fill=\"core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                />\n                <span v-else class=\"\">{{ subItem.icon }}</span>\n                <span class=\"w-100\">{{ subItem.title }}</span>\n              </a>\n            </li>\n          </ul>\n        </Dropdown>\n        <button\n          v-else\n          class=\"transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center\"\n          @click=\"item.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null\"\n          :class=\"[\n              horizontal ? 'pd-thin' : '',\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          <div v-if=\"!horizontal\" class=\"w-100 flex-child-default w-max-big flex flex-center aspect-1x1\">\n            <component\n              v-if=\"item.iconComponent\"\n              :is=\"item.iconComponent\"\n              class=\"i-medium flex-child-default\"\n              :fill=\"core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n            />\n            <span\n              v-if=\"!item.iconComponent \"\n              class=\"p-regular\"\n            >\n              {{ item.icon }}\n            </span>\n          </div>\n\n          <span\n            class=\"transition-quint-out w-100 t-left t-medium\"\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 mn-r-small sidebar-dropdown-icon\"\n            :class=\"{ 'rotate-180': isSectionExpanded(item.title) }\"\n            @click.stop=\"toggleSection(item.title)\"\n          >\n             <IconChevronBottom :class=\"{ 'rotate-180 mn-t-micro-negative': isOpen }\" :fill=\" theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'\" class=\"i-small\"/>\n          </span>\n        </button>\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=\"mn-l-small mn-t-thin\"\n          >\n            <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n\n              <a\n               @click=\"subItem.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null\"\n                href=\"#\"\n                class=\"transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small\"\n                :class=\"[\n                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',\n                    theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'\n                    ]\"\n              >\n                <component\n                  v-if=\"subItem.iconComponent\"\n                  :is=\"subItem.iconComponent\"\n                  class=\"i-medium\"\n                 :fill=\"core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                />\n                <span v-else class=\"\">{{ subItem.icon }}</span>\n                <span class=\"w-100\">{{ 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\n.rotate-180 {\n  transform: rotate(180deg);\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\n/* Horizontal dropdown submenu */\n.dropdown-submenu {\n  list-style: none;\n  padding: 0.5rem;\n  margin: 0;\n  min-width: 12rem;\n}\n\n.dropdown-submenu li {\n  width: 100%;\n}\n\n.dropdown-submenu a {\n  display: flex;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Transition for horizontal dropdown */\n:deep(.TransitionTranslateY-enter-active),\n:deep(.TransitionTranslateY-leave-active) {\n  transition: translateY 0.2s ease;\n   transition: opacity 0.2s ease;\n}\n\n:deep(.TransitionTranslateY-enter-from),\n:deep(.TransitionTranslateY-leave-to) {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n:deep(.TransitionTranslateY-enter-to),\n:deep(.TransitionTranslateY-leave-from) {\n  opacity: 1;\n  transform: translateY(0);\n}\n</style>"],"names":["useRouter","useRoute","ref","auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAM,SAASA,UAAAA,UAAS;AACxB,UAAM,QAAQC,UAAAA,SAAQ;AAKtB,UAAM,QAAQ;AAgBd,UAAM,QAAQ;AAId,UAAM,mBAAmBC,IAAAA,IAAI,CAAA,CAAE;AAE/B,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,gBAAM,cAAc;AACpB,qBAAW,MAAM;AACf,6BAAiB,MAAM,KAAK,KAAK;AAAA,UACnC,GAAG,EAAE;AAAA,QACP;AACA;AAAA,MACF;AAEA,YAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK;AAElD,UAAI,UAAU,IAAI;AAChB,yBAAiB,MAAM,KAAK,KAAK;AAAA,MACnC,OAAO;AACL,yBAAiB,MAAM,OAAO,OAAO,CAAC;AAAA,MACxC;AAAA,IACF;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,aAAO,iBAAiB,MAAM,SAAS,KAAK;AAAA,IAC9C;AAGA,UAAM,eAAe,CAAC,YAAY;AAChC,UAAI,OAAO,YAAY,YAAY;AACjC,eAAO,QAAQC,KAAAA,OAAY,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,250 @@
+import { ref, createElementBlock, openBlock, normalizeClass, Fragment, renderList, withDirectives, createCommentVNode, createElementVNode, toDisplayString, createBlock, createVNode, withCtx, unref, resolveDynamicComponent, withModifiers, Transition, vShow } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import IconChevronBottom from "../../../../icons/navigation/IconChevronBottom.vue.js";
+import { state } from "../../store/core.store.js";
+import { state as state$1 } from "../../../../auth/views/store/auth.js";
+import _sfc_main$1 from "../../../../../components/Dropdown/Dropdown.vue2.js";
+/* empty css                                             */
+/* empty css                */
+import _export_sfc from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "t-medium" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  key: 1,
+  class: ""
+};
+const _hoisted_5 = { class: "w-100" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = {
+  key: 0,
+  class: "w-100 flex-child-default w-max-big flex flex-center aspect-1x1"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "p-regular"
+};
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = {
+  key: 0,
+  class: "mn-l-small mn-t-thin"
+};
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = {
+  key: 1,
+  class: ""
+};
+const _hoisted_13 = { class: "w-100" };
+const _sfc_main = {
+  __name: "Navigation",
+  props: {
+    navigationItems: Array,
+    theme: {
+      type: String,
+      default: "light"
+    },
+    stateSidebar: {
+      type: Boolean,
+      default: false
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "closeSidebar"
+  ],
+  setup(__props, { emit: __emit }) {
+    const router = useRouter();
+    const route = useRoute();
+    const props = __props;
+    const emits = __emit;
+    const expandedSections = ref([]);
+    const toggleSection = (title) => {
+      if (!props.stateSidebar) {
+        if (menuItems.value.flatMap((section) => section.items).find((item) => item.title === title && item.subItems)) {
+          emits("closeSidebar");
+          setTimeout(() => {
+            expandedSections.value.push(title);
+          }, 50);
+        }
+        return;
+      }
+      const index = expandedSections.value.indexOf(title);
+      if (index === -1) {
+        expandedSections.value.push(title);
+      } else {
+        expandedSections.value.splice(index, 1);
+      }
+    };
+    const isSectionExpanded = (title) => {
+      return expandedSections.value.includes(title);
+    };
+    const processRoute = (routeFn) => {
+      if (typeof routeFn === "function") {
+        return routeFn(state$1, route);
+      }
+      return routeFn;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(["transition-quint-out o-x-visible h-100", [
+          __props.stateSidebar ? "pd-small" : "pd-micro",
+          __props.horizontal ? "w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible" : "o-y-scroll gap-medium rows-1"
+        ]])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(props.navigationItems, (section) => {
+          return withDirectives((openBlock(), createElementBlock("div", {
+            key: section.category,
+            class: normalizeClass(["transition-quint-out", [
+              __props.horizontal ? "w-max  flex-child-default flex flex-nowrap" : "",
+              __props.stateSidebar && !__props.horizontal ? "" : ""
+            ]])
+          }, [
+            section.category && __props.stateSidebar && !__props.horizontal ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["uppercase t-medium t-transp p-small", {
+                "t-black": __props.theme === "light",
+                "t-white": __props.theme === "dark"
+              }])
+            }, toDisplayString(section.category), 3)) : createCommentVNode("", true),
+            createElementVNode("ul", {
+              class: normalizeClass([
+                __props.horizontal ? "w-100 gap-micro flex flex-nowrap" : "flex flex-column gap-micro"
+              ])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {
+                return withDirectives((openBlock(), createElementBlock("li", {
+                  class: "w-100 pos-relative",
+                  key: item.title
+                }, [
+                  item.subItems && __props.horizontal ? (openBlock(), createBlock(_sfc_main$1, {
+                    key: 0,
+                    class: "w-100",
+                    align: "left",
+                    trigger: "hover"
+                  }, {
+                    label: withCtx(() => [
+                      createElementVNode("button", {
+                        class: normalizeClass(["transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin", [
+                          item.route && unref(route).path === processRoute(item.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                          __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                        ]]),
+                        onClick: ($event) => item.route ? unref(router).push(processRoute(item.route)) : null
+                      }, [
+                        createElementVNode("span", _hoisted_2, toDisplayString(item.title), 1)
+                      ], 10, _hoisted_1)
+                    ]),
+                    default: withCtx(() => [
+                      createElementVNode("ul", {
+                        class: normalizeClass(["dropdown-submenu bg-blur-small", __props.theme === "light" ? "bg-white-transp-50 " : "bg-black-transp-50"])
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.subItems, (subItem) => {
+                          return openBlock(), createElementBlock("li", {
+                            key: subItem.title
+                          }, [
+                            createElementVNode("a", {
+                              onClick: ($event) => subItem.route ? unref(router).push(processRoute(subItem.route)) : null,
+                              href: "#",
+                              class: normalizeClass(["transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small", [
+                                subItem.route && unref(route).path === processRoute(subItem.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                                __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                              ]])
+                            }, [
+                              subItem.iconComponent ? (openBlock(), createBlock(resolveDynamicComponent(subItem.iconComponent), {
+                                key: 0,
+                                class: "i-medium",
+                                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_4, toDisplayString(subItem.icon), 1)),
+                              createElementVNode("span", _hoisted_5, toDisplayString(subItem.title), 1)
+                            ], 10, _hoisted_3)
+                          ]);
+                        }), 128))
+                      ], 2)
+                    ]),
+                    _: 2
+                  }, 1024)) : (openBlock(), createElementBlock("button", {
+                    key: 1,
+                    class: normalizeClass(["transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center", [
+                      __props.horizontal ? "pd-thin" : "",
+                      item.route && unref(route).path === processRoute(item.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                      __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                    ]]),
+                    onClick: ($event) => item.route ? (_ctx.isPhone ? __props.stateSidebar = false : null, unref(route).path !== processRoute(item.route) ? unref(router).push(processRoute(item.route)) : null) : null
+                  }, [
+                    !__props.horizontal ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                      item.iconComponent ? (openBlock(), createBlock(resolveDynamicComponent(item.iconComponent), {
+                        key: 0,
+                        class: "i-medium flex-child-default",
+                        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 ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(item.icon), 1)) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true),
+                    createElementVNode("span", {
+                      class: normalizeClass(["transition-quint-out w-100 t-left t-medium", { "hidden": !__props.stateSidebar && !__props.horizontal, "visible": __props.stateSidebar || __props.horizontal }])
+                    }, toDisplayString(item.title), 3),
+                    item.subItems && __props.stateSidebar && !__props.horizontal ? (openBlock(), createElementBlock("span", {
+                      key: 1,
+                      class: normalizeClass(["mn-l-auto mn-r-small sidebar-dropdown-icon", { "rotate-180": isSectionExpanded(item.title) }]),
+                      onClick: withModifiers(($event) => toggleSection(item.title), ["stop"])
+                    }, [
+                      createVNode(IconChevronBottom, {
+                        class: normalizeClass([{ "rotate-180 mn-t-micro-negative": _ctx.isOpen }, "i-small"]),
+                        fill: __props.theme === "dark" ? "rgb(var(--white))" : "rgb(var(--black))"
+                      }, null, 8, ["class", "fill"])
+                    ], 10, _hoisted_9)) : createCommentVNode("", true)
+                  ], 10, _hoisted_6)),
+                  createVNode(Transition, {
+                    "enter-active-class": "dropdown-enter",
+                    "leave-active-class": "dropdown-leave",
+                    "enter-from-class": "dropdown-enter-from",
+                    "enter-to-class": "dropdown-enter-to",
+                    "leave-from-class": "dropdown-leave-from",
+                    "leave-to-class": "dropdown-leave-to"
+                  }, {
+                    default: withCtx(() => [
+                      item.subItems && isSectionExpanded(item.title) && __props.stateSidebar && !__props.horizontal ? (openBlock(), createElementBlock("ul", _hoisted_10, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.subItems, (subItem) => {
+                          return openBlock(), createElementBlock("li", {
+                            key: subItem.title
+                          }, [
+                            createElementVNode("a", {
+                              onClick: ($event) => subItem.route ? (_ctx.isPhone ? __props.stateSidebar = false : null, unref(route).path !== processRoute(subItem.route) ? unref(router).push(processRoute(subItem.route)) : null) : null,
+                              href: "#",
+                              class: normalizeClass(["transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small", [
+                                subItem.route && unref(route).path === processRoute(subItem.route) ? __props.theme === "light" ? "bg-light" : "bg-dark" : "",
+                                __props.theme === "light" ? "hover-bg-light" : "hover-bg-dark"
+                              ]])
+                            }, [
+                              subItem.iconComponent ? (openBlock(), createBlock(resolveDynamicComponent(subItem.iconComponent), {
+                                key: 0,
+                                class: "i-medium",
+                                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_12, toDisplayString(subItem.icon), 1)),
+                              createElementVNode("span", _hoisted_13, toDisplayString(subItem.title), 1)
+                            ], 10, _hoisted_11)
+                          ]);
+                        }), 128))
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])), [
+                  [vShow, !item.visible || (typeof item.visible === "function" ? item.visible(state$1, unref(route)) : true)]
+                ]);
+              }), 128))
+            ], 2)
+          ], 2)), [
+            [vShow, !section.visible || (typeof section.visible === "function" ? section.visible(state$1, unref(route)) : true)]
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+};
+const Navigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-df6a639b"]]);
+export {
+  Navigation as default
+};
+//# sourceMappingURL=Navigation.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.vue.js","sources":["../../../../../../../../src/modules/core/views/components/partials/Navigation.vue"],"sourcesContent":["<script setup>\nimport { ref, watch, computed } from 'vue'\nimport { useRouter, useRoute } from 'vue-router'\n\nimport IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'\n\nimport * as core from '@martyrs/src/modules/core/views/store/core.store.js'\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js'\n\nconst router = useRouter()\nconst route = useRoute()\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,\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 emits = defineEmits([\n  'closeSidebar'\n])\n\nconst expandedSections = ref([])\n\nconst toggleSection = (title) => {\n  if (!props.stateSidebar) {\n    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {\n      emits('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\n// Process route functions with auth data and route\nconst processRoute = (routeFn) => {\n  if (typeof routeFn === 'function') {\n    return routeFn(auth.state, route)\n  }\n  return routeFn\n}\n</script>\n\n<template>\n  <nav\n    class=\"transition-quint-out o-x-visible  h-100\"\n    :class=\"[\n      stateSidebar ? 'pd-small' : 'pd-micro',\n      horizontal ? 'w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible' : 'o-y-scroll gap-medium rows-1',\n    ]\"\n  >\n    <div \n      v-for=\"section in props.navigationItems\" \n      v-show=\"!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state, route) : true)\"\n      :key=\"section.category\" \n      class=\"transition-quint-out\"\n      :class=\"[\n        horizontal ? 'w-max  flex-child-default flex flex-nowrap' : '',\n        stateSidebar && !horizontal ? '' : '',\n      ]\"\n    >\n      <div\n        v-if=\"section.category && stateSidebar && !horizontal\"\n        class=\"uppercase t-medium t-transp p-small\"\n        :class=\"{\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-micro',\n        ]\"\n      >\n        <li\n          v-for=\"item in section.items\"\n          v-show=\"!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state, route) : true)\"\n          class=\"w-100 pos-relative\"\n          :key=\"item.title\"\n\n        >\n        <Dropdown\n          v-if=\"item.subItems && horizontal\"\n          class=\"w-100\"\n          align=\"left\"\n          trigger=\"hover\"\n        >\n          <template #label>\n            <button\n              class=\"transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin\"\n              @click=\"item.route ? router.push(processRoute(item.route)) : null\"\n              :class=\"[\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              <span class=\"t-medium\">{{ item.title }}</span>\n              <!-- <IconChevronBottom :fill=\"theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'\" class=\"i-small mn-l-thin\"/> -->\n            </button>\n          </template>\n          <ul class=\"dropdown-submenu bg-blur-small\" :class=\"theme === 'light' ? 'bg-white-transp-50 ' : 'bg-black-transp-50'\">\n            <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n              <a\n                @click=\"subItem.route ? router.push(processRoute(subItem.route)) : null\"\n                href=\"#\"\n                class=\"transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small\"\n                :class=\"[\n                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',\n                  theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'\n                ]\"\n              >\n                <component\n                  v-if=\"subItem.iconComponent\"\n                  :is=\"subItem.iconComponent\"\n                  class=\"i-medium\"\n                  :fill=\"core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                />\n                <span v-else class=\"\">{{ subItem.icon }}</span>\n                <span class=\"w-100\">{{ subItem.title }}</span>\n              </a>\n            </li>\n          </ul>\n        </Dropdown>\n        <button\n          v-else\n          class=\"transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center\"\n          @click=\"item.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null\"\n          :class=\"[\n              horizontal ? 'pd-thin' : '',\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          <div v-if=\"!horizontal\" class=\"w-100 flex-child-default w-max-big flex flex-center aspect-1x1\">\n            <component\n              v-if=\"item.iconComponent\"\n              :is=\"item.iconComponent\"\n              class=\"i-medium flex-child-default\"\n              :fill=\"core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n            />\n            <span\n              v-if=\"!item.iconComponent \"\n              class=\"p-regular\"\n            >\n              {{ item.icon }}\n            </span>\n          </div>\n\n          <span\n            class=\"transition-quint-out w-100 t-left t-medium\"\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 mn-r-small sidebar-dropdown-icon\"\n            :class=\"{ 'rotate-180': isSectionExpanded(item.title) }\"\n            @click.stop=\"toggleSection(item.title)\"\n          >\n             <IconChevronBottom :class=\"{ 'rotate-180 mn-t-micro-negative': isOpen }\" :fill=\" theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'\" class=\"i-small\"/>\n          </span>\n        </button>\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=\"mn-l-small mn-t-thin\"\n          >\n            <li v-for=\"subItem in item.subItems\" :key=\"subItem.title\">\n\n              <a\n               @click=\"subItem.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null\"\n                href=\"#\"\n                class=\"transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small\"\n                :class=\"[\n                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',\n                    theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'\n                    ]\"\n              >\n                <component\n                  v-if=\"subItem.iconComponent\"\n                  :is=\"subItem.iconComponent\"\n                  class=\"i-medium\"\n                 :fill=\"core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'\"\n                />\n                <span v-else class=\"\">{{ subItem.icon }}</span>\n                <span class=\"w-100\">{{ 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\n.rotate-180 {\n  transform: rotate(180deg);\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\n/* Horizontal dropdown submenu */\n.dropdown-submenu {\n  list-style: none;\n  padding: 0.5rem;\n  margin: 0;\n  min-width: 12rem;\n}\n\n.dropdown-submenu li {\n  width: 100%;\n}\n\n.dropdown-submenu a {\n  display: flex;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Transition for horizontal dropdown */\n:deep(.TransitionTranslateY-enter-active),\n:deep(.TransitionTranslateY-leave-active) {\n  transition: translateY 0.2s ease;\n   transition: opacity 0.2s ease;\n}\n\n:deep(.TransitionTranslateY-enter-from),\n:deep(.TransitionTranslateY-leave-to) {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n:deep(.TransitionTranslateY-enter-to),\n:deep(.TransitionTranslateY-leave-from) {\n  opacity: 1;\n  transform: translateY(0);\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAM,SAAS,UAAS;AACxB,UAAM,QAAQ,SAAQ;AAKtB,UAAM,QAAQ;AAgBd,UAAM,QAAQ;AAId,UAAM,mBAAmB,IAAI,CAAA,CAAE;AAE/B,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,gBAAM,cAAc;AACpB,qBAAW,MAAM;AACf,6BAAiB,MAAM,KAAK,KAAK;AAAA,UACnC,GAAG,EAAE;AAAA,QACP;AACA;AAAA,MACF;AAEA,YAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK;AAElD,UAAI,UAAU,IAAI;AAChB,yBAAiB,MAAM,KAAK,KAAK;AAAA,MACnC,OAAO;AACL,yBAAiB,MAAM,OAAO,OAAO,CAAC;AAAA,MACxC;AAAA,IACF;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,aAAO,iBAAiB,MAAM,SAAS,KAAK;AAAA,IAC9C;AAGA,UAAM,eAAe,CAAC,YAAY;AAChC,UAAI,OAAO,YAAY,YAAY;AACjC,eAAO,QAAQA,SAAY,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}