{"version":3,"file":"NavigationMenu-Olpc4sGm.js","sources":["../../src/layouts/navigation/NavigationMenu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  CommunityIcon,\n  ExitIcon,\n  GearIcon,\n  ListIcon,\n  LogoIcon,\n  MembersIcon,\n  ModeratorIcon,\n  MonitorIcon,\n  PlaneIcon,\n  RocketIcon,\n  SettingsIcon,\n  SpinnerIcon,\n} from '@icons';\nimport type { INavigationItem, INavigationSection, IURL } from '@models';\nimport { NavigationItemName, Role } from '@models';\nimport { previousRoute, Routes } from '@router';\nimport {\n  useActivityStore,\n  useCommonStore,\n  useProfileStore,\n  useServiceStore,\n  useSocketStore,\n} from '@stores';\nimport { AvatarControl, ImageControl } from '@uikit';\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute } from 'vue-router';\n\nconst serviceStore = useServiceStore();\nconst profileStore = useProfileStore();\nconst socketStore = useSocketStore();\nconst commonStore = useCommonStore();\n\nconst currentRoute = useRoute();\n\nconst navItems: INavigationItem[] = getInitNavItems();\n\nconst navigationSections = ref<INavigationSection[]>([]);\n\nconst currentItem = ref<INavigationItem>();\nconst isLoading = ref<boolean>();\n\nonMounted(async () => {\n  navItems.forEach((_, index) => {\n    navItems[index].id = index;\n  });\n  const result = await loadProfile();\n  if (result) {\n    return;\n  }\n  init();\n});\n\nwatch(currentRoute, async () => {\n  currentItem.value = getCurrentItem()!;\n\n  const result = await loadProfile();\n  if (result) {\n    return;\n  }\n\n  const back = previousRoute.value;\n  if (!back) return;\n  else if ((back as any).name === Routes.PROJECTS && serviceStore.isProjectChanged) {\n    init();\n    serviceStore.setIsProjectChanged(false);\n  }\n});\n\nconst projectLogo = computed<{ isLogoLoaded: boolean; src: string }>(\n  () => serviceStore.currentProjectLogo,\n);\n\nconst currentName = computed<string>(() => {\n  const profile = profileStore.currentProfile ?? profileStore.profile;\n  if (!profile) return 'Нет модератора';\n  return profile.name;\n});\n\nconst currentAvatar = computed<IURL | undefined>(() => {\n  const profile = profileStore.currentProfile ?? profileStore.profile;\n  if (!profile) return undefined;\n  return profile.avatar;\n});\n\nfunction init() {\n  if (!commonStore.currentProject) {\n    isLoading.value = true;\n  }\n\n  const isMultiProjects: boolean = commonStore.projects.length > 1;\n\n  navItems.find((item) => item.route === Routes.USERS)!.isVisible =\n    profileStore.role === Role.ADMIN;\n\n  navigationSections.value = [\n    {\n      name: currentName.value,\n      icon: currentAvatar.value,\n      // Personal Settings, Projects\n      items: [navItems[0], navItems[1]],\n    },\n  ];\n\n  if (isMultiProjects && !commonStore.currentProject) {\n    navigationSections.value.push({\n      name: '',\n      // Exit\n      items: [navItems[9]],\n      isFooter: true,\n    });\n  } else {\n    navigationSections.value.push(\n      ...([\n        {\n          name: commonStore.currentProject?.name ?? '',\n          isHeader: true,\n          items: [],\n        },\n        {\n          items: [...navItems.slice(2, 9)],\n        },\n        {\n          name: '',\n          // Exit\n          items: [navItems[9]],\n          isFooter: true,\n        },\n      ] as INavigationSection[]),\n    );\n  }\n\n  currentItem.value = getCurrentItem()!;\n  isLoading.value = false;\n}\n\nasync function loadProfile(): Promise<boolean> {\n  if (currentRoute.name === Routes.PROJECTS) {\n    isLoading.value = true;\n\n    serviceStore.setIsProfileLoading(true);\n    await profileStore.aquireProfile();\n    init();\n    serviceStore.setIsProfileLoading(false);\n    isLoading.value = false;\n    return true;\n  }\n  return false;\n}\n\nfunction getInitNavItems(): INavigationItem[] {\n  let items: INavigationItem[] = [];\n\n  items = [\n    {\n      name: NavigationItemName.PERSONALSETTINGS,\n      route: Routes.PERSONAL_SETTINGS,\n      icon: SettingsIcon,\n    },\n    {\n      name: NavigationItemName.PROJECTS,\n      route: Routes.PROJECTS,\n      icon: CommunityIcon,\n    },\n\n    {\n      name: NavigationItemName.ACTIVITIES,\n      route: Routes.ACTIVITIES,\n      icon: ListIcon,\n      value: () => {\n        const count = socketStore.activitiesCount;\n        if (count) return count.toString();\n      },\n      click: () => {},\n    },\n    {\n      name: NavigationItemName.CHATS,\n      route: Routes.CHATS,\n      value: () => {\n        const count = socketStore.messagesCount;\n        if (count) return count.toString();\n      },\n      icon: PlaneIcon,\n    },\n    {\n      name: NavigationItemName.MEMBERS,\n      route: Routes.MEMBERS,\n      icon: MembersIcon,\n    },\n    {\n      name: NavigationItemName.USERS,\n      route: Routes.USERS,\n      icon: ModeratorIcon,\n      isVisible: profileStore.role === Role.ADMIN,\n    },\n    {\n      name: NavigationItemName.APP,\n      route: Routes.APP,\n      icon: MonitorIcon,\n    },\n\n    {\n      name: NavigationItemName.SETTINGS,\n      route: Routes.SETTINGS,\n      icon: GearIcon,\n    },\n    {\n      name: NavigationItemName.FIRSTSTEPS,\n      route: Routes.FIRST_STEPS,\n      icon: RocketIcon,\n    },\n    {\n      name: NavigationItemName.EXIT,\n      route: Routes.EXIT,\n      icon: ExitIcon,\n    },\n  ];\n\n  return items;\n}\n\nasync function OnItemClick(item: INavigationItem) {\n  if (window.innerWidth <= 1050) {\n    serviceStore.toggleMenu();\n  }\n\n  if (item.click) {\n    await item.click();\n    const activityStore = useActivityStore();\n    activityStore.reload();\n  }\n}\n\nfunction getCurrentItem(): INavigationItem | undefined {\n  return navItems.find((item) => currentRoute.path.includes(item.route));\n}\n\nfunction getIcon(index: number): string {\n  return navItems[index].icon ?? '';\n}\n</script>\n\n<template>\n  <section class=\"nav\">\n    <div v-if=\"isLoading\" class=\"nav__loading\">\n      <spinner-icon class=\"icon icon_white icon_largest nav__loading\" />\n    </div>\n    <div\n      v-for=\"(section, sectionIndex) in navigationSections\"\n      v-else\n      :key=\"sectionIndex\"\n      class=\"nav__section\"\n      :class=\"{ nav__section_divider: section.divider, nav__section_footer: section.isFooter }\"\n    >\n      <div v-if=\"section.isHeader\" class=\"nav__head\">\n        <image-control\n          v-if=\"commonStore.currentProject\"\n          class=\"nav__logo\"\n          :src=\"projectLogo.src\"\n          spinner=\"white\"\n          compress=\"logo\"\n        />\n        <logo-icon v-else class=\"icon nav__logo\" :style=\"{ width: 200 }\" />\n        <span class=\"nav__subtitle\">{{ section.name }}</span>\n      </div>\n      <template v-else>\n        <div v-if=\"section.name\" class=\"nav__group\">\n          <span class=\"nav__subtitle\">{{ section.name }}</span>\n          <avatar-control v-if=\"section.icon\" :src=\"section.icon\" class=\"nav__avatar\" />\n        </div>\n        <ul class=\"nav__list\">\n          <li\n            v-for=\"(item, itemIndex) in section.items\"\n            v-show=\"item.isVisible !== false\"\n            :key=\"item.id\"\n            class=\"nav__item\"\n            @click=\"() => OnItemClick(item)\"\n          >\n            <router-link\n              :to=\"{ name: item.route }\"\n              class=\"nav__link\"\n              :class=\"{ nav__link_excluded: sectionIndex === 1 && itemIndex === 0 }\"\n            >\n              <component :is=\"getIcon(item.id!)\" class=\"icon icon_white icon_small\" />\n              <span class=\"nav__text\">{{ item.name }}</span>\n              <div v-if=\"item.value && item.value()\" class=\"nav__value\">{{ item.value() }}</div>\n            </router-link>\n          </li>\n        </ul>\n      </template>\n    </div>\n    <!-- <a href=\"https://refocus.community\" target=\"_blank\" class=\"nav__title\">Powered by Refocus</a> -->\n  </section>\n</template>\n\n<style lang=\"scss\" scoped>\n.nav {\n  color: $white;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px 15px;\n\n  &__logo {\n    min-height: 80px;\n    max-height: 80px;\n    width: 160px;\n  }\n\n  &__group {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  &__avatar {\n    $size: 30px;\n    width: $size;\n    height: $size;\n\n    :deep(.avatar__upload) {\n      min-width: $size;\n      min-height: $size;\n    }\n\n    :deep(.avatar__image) {\n      width: $size;\n      height: $size;\n    }\n  }\n\n  &__head {\n    height: 100px;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &__loading {\n    display: flex;\n    justify-content: center;\n  }\n\n  // &__title {\n  //   flex: 1;\n  //   display: flex;\n  //   align-items: flex-end;\n  //   justify-content: center;\n\n  //   font-weight: 500;\n  //   font-size: 13px;\n  //   line-height: 16px;\n  //   letter-spacing: 0%;\n\n  //   &:hover {\n  //     text-decoration: underline;\n  //   }\n  // }\n\n  &__text {\n    font-size: 15px;\n  }\n\n  &__section {\n    display: flex;\n    flex-direction: column;\n    gap: 11px;\n\n    &_divider {\n      border-bottom: 1px solid $white;\n    }\n\n    &_footer {\n      margin-top: auto;\n    }\n  }\n\n  &__list {\n    display: flex;\n    flex-direction: column;\n    gap: 11px;\n  }\n\n  & :not(&__section_footer) &__list {\n    padding-bottom: 15px;\n  }\n\n  // eslint-disable-next-line vue-scoped-css/no-unused-selector\n  &__link {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    opacity: 0.7;\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: -10px;\n      width: 3px;\n      height: 100%;\n      background-color: $white;\n      opacity: 0;\n      transition: 0.3s all;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n\n    &.router-link-active {\n      &::before {\n        opacity: 1;\n      }\n    }\n\n    &:not(&_excluded).router-link-exact-active {\n      opacity: 1;\n      pointer-events: none;\n    }\n  }\n\n  &__value {\n    min-width: 15px;\n    margin-left: auto;\n    border-radius: 40%;\n    padding: 4px;\n    background-color: $white;\n    color: var(--primaryColor);\n    font-size: 10px;\n    line-height: 1;\n    text-align: center;\n  }\n}\n</style>\n"],"names":["serviceStore","useServiceStore","profileStore","useProfileStore","socketStore","useSocketStore","commonStore","useCommonStore","currentRoute","useRoute","navItems","getInitNavItems","navigationSections","ref","currentItem","isLoading","onMounted","_","index","loadProfile","init","watch","getCurrentItem","back","previousRoute","Routes","projectLogo","computed","currentName","profile","currentAvatar","isMultiProjects","item","Role","items","NavigationItemName","SettingsIcon","CommunityIcon","ListIcon","count","PlaneIcon","MembersIcon","ModeratorIcon","MonitorIcon","GearIcon","RocketIcon","ExitIcon","OnItemClick","useActivityStore","getIcon"],"mappings":"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"}