{"version":3,"file":"index-ATJq7pzJ.js","sources":["../../../packs/frontend/components/MainFobizzNavbar/LoginOffcanvas.vue","../../../packs/frontend/components/MainFobizzNavbar/LoginDropdown.vue","../../../packs/frontend/components/MainFobizzNavbar/NotificationIcon.vue","../../../packs/frontend/components/MainFobizzNavbar/IconButton.vue","../../../packs/frontend/components/MainFobizzNavbar/MyFobizzMenuHeader.vue","../../../packs/frontend/components/MainFobizzNavbar/MyFobizzMenuLink.vue","../../../packs/frontend/images/Meine_Schule_Icon.svg","../../../packs/frontend/images/Meine_Schullizenz_Icon.svg","../../../packs/frontend/composables/useUserProfileStatus.ts","../../../packs/frontend/components/MainFobizzNavbar/MyFobizzOffcanvas.vue","../../../packs/frontend/components/MainFobizzNavbar/Search.vue","../../../packs/frontend/components/MainFobizzNavbar/Tabs.vue","../../../packs/frontend/components/MainFobizzNavbar/index.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarLoginOffcanvas\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport logoUrlMobile from \"/images/fobizz-logo-F.png\";\n\ntype Props = {\n  signupUrl: string;\n};\n\ndefineProps<Props>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <li class=\"nav-item d-block d-lg-none\">\n    <a\n      class=\"main-fobizz-navbar__link main-fobizz-navbar__nav-icon\"\n      href=\"#\"\n      aria-label=\"Open login\"\n      role=\"button\"\n      data-bs-toggle=\"offcanvas\"\n      data-bs-target=\"#navbar-login-offcanvas\"\n      aria-controls=\"navbar-login-offcanvas\"\n    >\n      <BaseIcon icon-name=\"person\" color=\"dark\" style=\"font-size: 1.5rem\" />\n    </a>\n    <div\n      id=\"navbar-login-offcanvas\"\n      class=\"offcanvas offcanvas-top login-offcanvas\"\n      tabindex=\"-1\"\n      aria-labelledby=\"navbar-login-offcanvasLabel\"\n    >\n      <div class=\"offcanvas-header border-bottom\">\n        <h5 id=\"navbar-login-offcanvasLabel\" class=\"offcanvas-title\">\n          <img :src=\"logoUrlMobile\" width=\"40\" alt=\"fobizz logo\" />\n        </h5>\n        <button\n          type=\"button\"\n          class=\"btn-close text-reset\"\n          data-bs-dismiss=\"offcanvas\"\n          aria-label=\"Close\"\n        ></button>\n      </div>\n      <div class=\"offcanvas-body small p-0\">\n        <a\n          role=\"button\"\n          :href=\"signupUrl\"\n          class=\"login-offcanvas__link text-body\"\n        >\n          <h6>{{ t(\"mainFobizzNavbar.signup.title\") }}</h6>\n          <p class=\"login-offcanvas__description\">\n            {{ t(\"mainFobizzNavbar.signup.text\") }}\n          </p>\n        </a>\n        <router-link\n          :to=\"{ name: 'login' }\"\n          class=\"login-offcanvas__link text-body\"\n          data-testid=\"button-login\"\n        >\n          <h6>{{ t(\"mainFobizzNavbar.teacherLogin.title\") }}</h6>\n          <p class=\"login-offcanvas__description\">\n            {{ t(\"mainFobizzNavbar.teacherLogin.text\") }}\n          </p>\n        </router-link>\n\n        <router-link\n          :to=\"{ name: 'go-login' }\"\n          class=\"login-offcanvas__link text-body\"\n        >\n          <h6>{{ t(\"mainFobizzNavbar.pupilLogin.title\") }}</h6>\n          <p class=\"login-offcanvas__description\">\n            {{ t(\"mainFobizzNavbar.pupilLogin.text\") }}\n          </p>\n        </router-link>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style scoped lang=\"scss\">\n.login-offcanvas {\n  &__link {\n    display: flex;\n    flex-direction: column;\n    padding: $spacer-3 $spacer-4;\n    text-decoration: none;\n\n    &:hover {\n      color: $body-color;\n      background-color: $color-gray-200;\n    }\n  }\n\n  &__description {\n    font-size: $font-size-sm;\n    font-weight: 400;\n    white-space: normal;\n    color: $secondary;\n    margin-bottom: $spacer-1;\n  }\n}\n</style>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarLoginDropdown\",\n};\n</script>\n\n<script setup lang=\"ts\">\nconst { t } = useI18n();\n</script>\n\n<template>\n  <li class=\"nav-item dropdown d-none d-lg-block login-dropdown\">\n    <a\n      id=\"navbarLoginDropdown\"\n      class=\"main-fobizz-navbar__link login-dropdown__link\"\n      href=\"#\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n      data-testid=\"login-dropdown\"\n    >\n      {{ t(\"mainFobizzNavbar.login\") }}\n      <BaseIcon icon-name=\"chevron-down\" class=\"ms-1\" />\n    </a>\n    <ul\n      class=\"dropdown-menu dropdown-menu-end\"\n      style=\"width: 465px\"\n      aria-labelledby=\"navbarLoginDropdown\"\n    >\n      <li>\n        <router-link\n          :to=\"{ name: 'login' } as RouterLinks\"\n          class=\"dropdown-item login-dropdown__item-link\"\n        >\n          <h6>{{ t(\"mainFobizzNavbar.teacherLogin.title\") }}</h6>\n\n          <p class=\"dropdown-item__description\">\n            {{ t(\"mainFobizzNavbar.teacherLogin.text\") }}\n          </p>\n        </router-link>\n      </li>\n      <li>\n        <router-link\n          :to=\"{ name: 'go-login' } as RouterLinks\"\n          class=\"dropdown-item login-dropdown__item-link\"\n        >\n          <h6>\n            {{ t(\"mainFobizzNavbar.pupilLogin.title\") }}\n          </h6>\n          <p class=\"dropdown-item__description\">\n            {{ t(\"mainFobizzNavbar.pupilLogin.text\") }}\n          </p>\n        </router-link>\n      </li>\n    </ul>\n  </li>\n</template>\n\n<style scoped lang=\"scss\">\n.login-dropdown {\n  &__item-link {\n    display: block;\n\n    &:focus,\n    &:hover,\n    &:active,\n    &.active {\n      color: $body-color;\n      background-color: $color-gray-200;\n    }\n  }\n\n  // Ugly overwrites to be aligned with platform\n  // TODO: add better class names and styles\n  .dropdown-item__description {\n    font-size: $font-size-sm;\n    font-weight: 400;\n    white-space: normal;\n    color: $secondary;\n  }\n}\n</style>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarNotificationIcon\",\n};\n</script>\n\n<script setup lang=\"ts\">\nconst userStore = useUserStore();\n</script>\n\n<template>\n  <div class=\"icon-with-alert-badge\">\n    <BaseIcon icon-name=\"bell\" color=\"inherit\" size=\"inherit\" />\n    <span v-if=\"userStore.hasUnreadPosts\" class=\"alert-badge\"></span>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.icon-with-alert-badge {\n  position: relative;\n  display: flex;\n\n  .alert-badge {\n    position: absolute;\n    top: 20%;\n    left: 80%;\n    transform: translate(-50%, -50%);\n    border-radius: 50%;\n    border: 1px solid white;\n    background-color: $danger;\n    padding: 3px;\n  }\n}\n</style>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarIconButton\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { type Props as BaseIconProps } from \"@/components/Base/Icon/index.vue\";\nimport type { ButtonHTMLAttributes } from \"vue\";\n\nexport type Props = {\n  type?: ButtonHTMLAttributes[\"type\"];\n  iconName: BaseIconProps[\"iconName\"];\n  label: string;\n};\n\nwithDefaults(defineProps<Props>(), {\n  type: \"button\",\n});\n</script>\n\n<template>\n  <button\n    class=\"main-fobizz-navbar__link main-fobizz-navbar__nav-icon\"\n    :type=\"type\"\n    :aria-label=\"label\"\n  >\n    <BaseIcon :icon-name=\"iconName\" color=\"inherit\" size=\"inherit\" />\n  </button>\n</template>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarMyFobizzMenuHeader\",\n};\n</script>\n\n<script setup lang=\"ts\">\ntype Props = {\n  title: string;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <div class=\"my-fobizz-offcanvas__menu__header\">\n    <p class=\"mb-0\">\n      {{ title }}\n    </p>\n    <slot></slot>\n  </div>\n</template>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarMyFobizzMenuLink\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { type Props as BaseIconProps } from \"@/components/Base/Icon/index.vue\";\nimport { RouterLinkProps } from \"vue-router\";\n\nexport type Props = {\n  title?: string;\n  iconName?: BaseIconProps[\"iconName\"];\n  routeTo?: RouterLinkProps[\"to\"];\n  renderAsLink?: boolean;\n  href?: string;\n};\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: undefined,\n  iconName: undefined,\n  routeTo: undefined,\n  renderAsLink: false,\n  href: undefined,\n});\n\nconst component = computed(() => {\n  if (props.renderAsLink && props.href) {\n    return \"a\";\n  } else {\n    return \"router-link\";\n  }\n});\n\nconst toOrHref = computed(() => {\n  if (props.renderAsLink && props.href) {\n    return { href: props.href };\n  } else if (!props.renderAsLink && !!props.routeTo) {\n    return { to: { name: props.routeTo } };\n  }\n  return false;\n});\n</script>\n\n<template>\n  <component\n    :is=\"component\"\n    v-if=\"toOrHref\"\n    class=\"my-fobizz-offcanvas__menu__link-item\"\n    v-bind=\"{ ...$attrs, ...toOrHref }\"\n  >\n    <slot>\n      <BaseIcon\n        v-if=\"iconName\"\n        :icon-name=\"iconName\"\n        color=\"inherit\"\n        size=\"inherit\"\n      />\n      {{ title }}\n    </slot>\n  </component>\n\n  <span v-if=\"!toOrHref\">Missing Link</span>\n</template>\n","export default \"data:image/svg+xml,%3csvg%20width='20'%20height='17'%20viewBox='0%200%2020%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.42857%203.93008V16M15.5714%203.93008V16M12.1429%2016V11.2582C12.1429%2011.0202%2011.951%2010.8272%2011.7143%2010.8272H8.28571C8.04902%2010.8272%207.85714%2011.0202%207.85714%2011.2582V16M1.85714%2016H18.1429C18.6162%2016%2019%2015.614%2019%2015.1379V6.94756C19%206.47142%2018.6162%206.08543%2018.1429%206.08543H16.4286C15.9552%206.08543%2015.5714%205.69943%2015.5714%205.22329V4.05064C15.5714%203.71436%2015.377%203.40877%2015.0735%203.26785L10.3592%201.07935C10.1313%200.97355%209.86872%200.973549%209.64081%201.07935L4.92652%203.26785C4.62296%203.40877%204.42857%203.71436%204.42857%204.05064V5.22329C4.42857%205.69943%204.04482%206.08543%203.57143%206.08543H1.85714C1.38376%206.08543%201%206.47142%201%206.94756V15.1379C1%2015.614%201.38376%2016%201.85714%2016ZM11.7143%206.08543C11.7143%207.03772%2010.9468%207.8097%2010%207.8097C9.05323%207.8097%208.28571%207.03772%208.28571%206.08543C8.28571%205.13314%209.05323%204.36115%2010%204.36115C10.9468%204.36115%2011.7143%205.13314%2011.7143%206.08543Z'%20stroke='%23444444'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='18'%20viewBox='0%200%2024%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.5%2016H1.85714C1.38376%2016%201%2015.614%201%2015.1379V6.94756C1%206.47142%201.38376%206.08543%201.85714%206.08543H3.57143C4.04482%206.08543%204.42857%205.69943%204.42857%205.22329V4.05064C4.42857%203.71436%204.62296%203.40877%204.92652%203.26785L9.64081%201.07935C9.86872%200.973549%2010.1313%200.97355%2010.3592%201.07935L15.0735%203.26785C15.377%203.40877%2015.5714%203.71436%2015.5714%204.05064V5.22329C15.5714%205.69943%2015.9552%206.08543%2016.4286%206.08543H18.1429C18.6162%206.08543%2019%206.47142%2019%206.94756V10.8272M4.42857%203.93008V16M15.5714%203.93008V16M12.1429%2016V11.2582C12.1429%2011.0202%2011.951%2010.8272%2011.7143%2010.8272H8.28571C8.04902%2010.8272%207.85714%2011.0202%207.85714%2011.2582V16M11.7143%206.08543C11.7143%207.03772%2010.9468%207.8097%2010%207.8097C9.05323%207.8097%208.28571%207.03772%208.28571%206.08543C8.28571%205.13314%209.05323%204.36115%2010%204.36115C10.9468%204.36115%2011.7143%205.13314%2011.7143%206.08543Z'%20stroke='%23444'/%3e%3cpath%20d='M21.4457%2012.8207L21.4457%2012.8207C21.4284%2012.8379%2021.4122%2012.8562%2021.3972%2012.8754L21.3972%2012.8754L20.2262%2014.3675L19.709%2013.8504C19.3856%2013.527%2018.8613%2013.527%2018.5379%2013.8504C18.2145%2014.1738%2018.2145%2014.6981%2018.5379%2015.0215L18.8678%2014.6915L18.5379%2015.0215L19.6957%2016.1793C20.0191%2016.5027%2020.5434%2016.5027%2020.8668%2016.1793C20.8827%2016.1634%2020.8977%2016.1467%2020.9118%2016.1291L20.9118%2016.1291L22.6473%2013.9597C22.9399%2013.6344%2022.9297%2013.1336%2022.6168%2012.8207L22.2633%2013.1742L22.6168%2012.8207C22.2934%2012.4973%2021.7691%2012.4973%2021.4457%2012.8207ZM23.5%2014.5C23.5%2016.1569%2022.1569%2017.5%2020.5%2017.5C18.8431%2017.5%2017.5%2016.1569%2017.5%2014.5C17.5%2012.8431%2018.8431%2011.5%2020.5%2011.5C22.1569%2011.5%2023.5%2012.8431%2023.5%2014.5Z'%20fill='%23444'%20stroke='%23444'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export const useUserProfileStatus = () => {\n  const userStore = useUserStore();\n  const { t } = useI18n();\n\n  const licenseFor = (license: string): \"pro\" | \"group\" | \"basic\" => {\n    if ([\"pro\", \"pro_free\"].includes(license)) {\n      return \"pro\";\n    }\n\n    if ([\"group\", \"group_free\"].includes(license)) {\n      return \"group\";\n    }\n\n    if ([\"free\", \"basic\"].includes(license)) {\n      return \"basic\";\n    }\n\n    return \"basic\";\n  };\n\n  const profileSubscriptionUrl = \"/profile_subscription\";\n  const companyUrl = \"/schule\";\n\n  const getCoursesUrl = (license: string) => {\n    if (license === \"pro\") {\n      return profileSubscriptionUrl;\n    }\n\n    if (license === \"group\") {\n      return companyUrl;\n    }\n\n    return \"/\";\n  };\n\n  const getToolsUrl = (license: string) => {\n    if (license === \"pro\") {\n      return profileSubscriptionUrl;\n    }\n\n    if (license === \"group\") {\n      return companyUrl;\n    }\n\n    return \"/preistabelle\";\n  };\n\n  const tools = computed(() => {\n    const license = licenseFor(userStore.user?.toolsLicense || \"basic\");\n    const label = t(`profileStatus.licenses.tools.${license}.label`);\n    const tooltip = t(`profileStatus.licenses.tools.${license}.tooltip`);\n    return {\n      license,\n      label,\n      url: getToolsUrl(license),\n      tooltip,\n    };\n  });\n\n  const courses = computed(() => {\n    const license = licenseFor(userStore.user?.coursesLicense || \"basic\");\n    const label = t(`profileStatus.licenses.courses.${license}.label`);\n    const tooltip = t(`profileStatus.licenses.courses.${license}.tooltip`);\n    return {\n      license,\n      label,\n      url: getCoursesUrl(license),\n      tooltip,\n    };\n  });\n\n  return {\n    tools,\n    courses,\n  };\n};\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarMyFobizzOffcanvas\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { useSession } from \"@/composables/useSession\";\n\nimport MyFobizzMenuHeader from \"./MyFobizzMenuHeader.vue\";\nimport MyFobizzMenuLink from \"./MyFobizzMenuLink.vue\";\n\nimport mySchoolIcon from \"/images/Meine_Schule_Icon.svg\";\nimport mySchoolLicenseIcon from \"/images/Meine_Schullizenz_Icon.svg\";\nimport logoUrlMobile from \"/images/fobizz-logo-F.png\";\n\nconst userStore = useUserStore();\n\nconst { t } = useI18n();\nconst { tools, courses } = useUserProfileStatus();\n\nconst { logout } = useSession();\n\nconst handleLogout = async () => {\n  await logout();\n};\n</script>\n\n<template>\n  <span\n    v-tooltip=\"{\n      triggers: ['hover'],\n      placement: 'bottom',\n      content: t('mainFobizzNavbar.tooltips.myfobizz'),\n    }\"\n  >\n    <MainFobizzNavbarIconButton\n      style=\"font-size: 1.5rem\"\n      icon-name=\"person\"\n      data-bs-toggle=\"offcanvas\"\n      data-bs-target=\"#navbar-offcanvas\"\n      aria-controls=\"navbar-offcanvas\"\n      data-testid=\"button-myfobizz-offcanvas\"\n      :label=\"t('mainFobizzNavbar.tooltips.myfobizz')\"\n    />\n  </span>\n  <div\n    id=\"navbar-offcanvas\"\n    class=\"offcanvas offcanvas-end my-fobizz-offcanvas\"\n    tabindex=\"-1\"\n    aria-labelledby=\"navbar-offcanvasLabel\"\n  >\n    <div class=\"offcanvas-header border-bottom px-4\">\n      <img\n        class=\"d-flex align-items-center d-lg-none\"\n        :src=\"logoUrlMobile\"\n        width=\"35\"\n        alt=\"fobizz logo\"\n      />\n      <h5\n        id=\"navbar-offcanvasLabel\"\n        class=\"offcanvas-title my-fobizz-offcanvas__headline d-none d-lg-flex\"\n      >\n        {{ t(\"mainFobizzNavbar.myfobizz.headers.myfobizz\") }}\n      </h5>\n      <button\n        type=\"button\"\n        class=\"btn-close text-reset\"\n        data-bs-dismiss=\"offcanvas\"\n        aria-label=\"Close\"\n      ></button>\n    </div>\n    <div class=\"offcanvas-body p-0 d-flex flex-column\">\n      <div class=\"my-fobizz-offcanvas__menu\">\n        <div class=\"my-fobizz-offcanvas__menu__section\">\n          <div class=\"my-fobizz-offcanvas__menu__links two-columns\">\n            <MyFobizzMenuLink\n              :title=\"t('mainFobizzNavbar.myfobizz.links.contact')\"\n              route-to=\"help-redirect\"\n              icon-name=\"question-circle\"\n            />\n            <MyFobizzMenuLink\n              v-if=\"!userStore.user?.international\"\n              :title=\"t('mainFobizzNavbar.myfobizz.links.news')\"\n              href=\"/posts\"\n              :render-as-link=\"true\"\n              data-click-tracking=\"true\"\n            >\n              <MainFobizzNavbarNotificationIcon />\n              {{ t(\"mainFobizzNavbar.myfobizz.links.news\") }}\n            </MyFobizzMenuLink>\n          </div>\n        </div>\n        <hr class=\"my-fobizz-offcanvas__menu__divider\" />\n        <div class=\"my-fobizz-offcanvas__menu__section\">\n          <MyFobizzMenuHeader\n            :title=\"t('mainFobizzNavbar.myfobizz.headers.settings')\"\n          />\n          <div class=\"my-fobizz-offcanvas__menu__links two-columns\">\n            <MyFobizzMenuLink\n              :title=\"t('mainFobizzNavbar.myfobizz.links.profile')\"\n              href=\"/profile/general\"\n              icon-name=\"gear\"\n              :render-as-link=\"true\"\n            />\n\n            <MyFobizzMenuLink\n              :title=\"t('mainFobizzNavbar.myfobizz.links.subscriptions')\"\n              href=\"/profile_subscription\"\n              icon-name=\"ticket\"\n              :render-as-link=\"true\"\n            />\n\n            <MyFobizzMenuLink\n              :title=\"t('mainFobizzNavbar.myfobizz.links.school')\"\n              href=\"/schule\"\n              :render-as-link=\"true\"\n              data-click-tracking=\"true\"\n            >\n              <img\n                width=\"16\"\n                :src=\"mySchoolIcon\"\n                class=\"responsive-image\"\n                alt=\"\"\n              />\n              {{ t(\"mainFobizzNavbar.myfobizz.links.school\") }}\n            </MyFobizzMenuLink>\n\n            <MyFobizzMenuLink\n              :title=\"t('mainFobizzNavbar.myfobizz.links.schoolLicense')\"\n              href=\"/schule\"\n              :render-as-link=\"true\"\n              data-click-tracking=\"true\"\n            >\n              <img\n                width=\"16\"\n                :src=\"mySchoolLicenseIcon\"\n                class=\"responsive-image\"\n                alt=\"\"\n              />\n              {{ t(\"mainFobizzNavbar.myfobizz.links.schoolLicense\") }}\n            </MyFobizzMenuLink>\n          </div>\n          <hr class=\"my-fobizz-offcanvas__menu__divider\" />\n          <div class=\"my-fobizz-offcanvas__menu__section\">\n            <MyFobizzMenuHeader\n              :title=\"t('mainFobizzNavbar.myfobizz.headers.courses')\"\n            >\n              <span\n                v-if=\"courses.license && !userStore.user?.international\"\n                v-tooltip.bottom=\"courses.tooltip\"\n                class=\"badge rounded-pill bg-brand-1\"\n                style=\"cursor: pointer\"\n                data-click-tracking=\"true\"\n              >\n                {{ courses.label }}\n              </span>\n            </MyFobizzMenuHeader>\n\n            <div class=\"my-fobizz-offcanvas__menu__links\">\n              <MyFobizzMenuLink\n                :title=\"t('mainFobizzNavbar.myfobizz.links.courses')\"\n                icon-name=\"mortarboard\"\n                href=\"/course_enrollments?tab=doing\"\n                :render-as-link=\"true\"\n              />\n\n              <MyFobizzMenuLink\n                :title=\"t('mainFobizzNavbar.myfobizz.links.histories')\"\n                icon-name=\"patch-check\"\n                href=\"/course_enrollments?tab=done\"\n                :render-as-link=\"true\"\n              />\n\n              <MyFobizzMenuLink\n                :title=\"t('mainFobizzNavbar.myfobizz.links.courseBookmarks')\"\n                icon-name=\"heart\"\n                href=\"/course_bookmarks\"\n                :render-as-link=\"true\"\n                data-click-tracking=\"true\"\n              />\n\n              <MyFobizzMenuLink\n                v-if=\"userStore.additionalQualificationUrl\"\n                :title=\"\n                  t('mainFobizzNavbar.myfobizz.links.additionalQualification')\n                \"\n                icon-name=\"award\"\n                :href=\"userStore.additionalQualificationUrl\"\n                :render-as-link=\"true\"\n              />\n\n              <MyFobizzMenuLink\n                v-if=\"userStore.user?.admin || userStore.platformUser?.author\"\n                :title=\"t('mainFobizzNavbar.myfobizz.links.manageCourses')\"\n                icon-name=\"book\"\n                href=\"/author/courses\"\n                :render-as-link=\"true\"\n              />\n            </div>\n          </div>\n\n          <hr class=\"my-fobizz-offcanvas__menu__divider\" />\n\n          <div class=\"my-fobizz-offcanvas__menu__section\">\n            <MyFobizzMenuHeader\n              :title=\"t('mainFobizzNavbar.myfobizz.headers.tools')\"\n            >\n              <span\n                v-if=\"tools.license && !userStore.user?.international\"\n                v-tooltip.bottom=\"tools.tooltip\"\n                class=\"badge rounded-pill bg-primary\"\n                style=\"cursor: pointer\"\n                data-click-tracking=\"true\"\n              >\n                {{ tools.label }}\n              </span>\n            </MyFobizzMenuHeader>\n\n            <div class=\"my-fobizz-offcanvas__menu__links\">\n              <MyFobizzMenuLink\n                :title=\"t('mainFobizzNavbar.myfobizz.links.folders')\"\n                icon-name=\"folder\"\n                route-to=\"folders-index\"\n                data-click-tracking=\"true\"\n              />\n\n              <MyFobizzMenuLink\n                :title=\"t('mainFobizzNavbar.myfobizz.links.classes')\"\n                icon-name=\"people\"\n                route-to=\"teacher-school-class-index\"\n                data-click-tracking=\"true\"\n              />\n\n              <MyFobizzMenuLink\n                :title=\"t('mainFobizzNavbar.myfobizz.links.materialsBookmarks')\"\n                icon-name=\"heart\"\n                route-to=\"bookmark-index\"\n                data-click-tracking=\"true\"\n              />\n            </div>\n          </div>\n\n          <template\n            v-if=\"userStore.user?.admin || userStore.isPlatformReviewer\"\n          >\n            <hr class=\"my-fobizz-offcanvas__menu__divider\" />\n            <div class=\"my-fobizz-offcanvas__menu__section\">\n              <MyFobizzMenuHeader\n                :title=\"t('mainFobizzNavbar.myfobizz.headers.adminArea')\"\n              />\n              <div class=\"my-fobizz-offcanvas__menu__links\">\n                <MyFobizzMenuLink\n                  v-if=\"userStore.user?.admin\"\n                  :title=\"\n                    t('mainFobizzNavbar.myfobizz.links.backofficePlatform')\n                  \"\n                  href=\"/backoffice\"\n                  :render-as-link=\"true\"\n                />\n\n                <MyFobizzMenuLink\n                  v-if=\"userStore.user?.admin\"\n                  :title=\"t('mainFobizzNavbar.myfobizz.links.backofficeTools')\"\n                  href=\"/tools/backoffice\"\n                  :render-as-link=\"true\"\n                />\n\n                <MyFobizzMenuLink\n                  v-if=\"userStore.isPlatformReviewer\"\n                  :title=\"t('mainFobizzNavbar.myfobizz.links.reviewerSection')\"\n                  href=\"/reviewer\"\n                  :render-as-link=\"true\"\n                />\n              </div>\n            </div>\n          </template>\n        </div>\n      </div>\n      <div class=\"my-fobizz-offcanvas__menu my-fobizz-offcanvas__menu__footer\">\n        <div class=\"my-fobizz-offcanvas__menu__section\">\n          <div class=\"my-fobizz-offcanvas__menu__links\">\n            <button\n              class=\"btn btn-link w-100 my-fobizz-offcanvas__menu__link-item\"\n              data-turbo=\"false\"\n              type=\"button\"\n              data-testid=\"button-myfobizz-menu-logout\"\n              @click=\"handleLogout\"\n            >\n              <BaseIcon\n                icon-name=\"box-arrow-right\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n              {{ t(\"links.logout\") }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<!-- // Global Styles shared in nested components, align with plattform -->\n<style lang=\"scss\">\n.my-fobizz-offcanvas {\n  // Check to overwrite bootstrap offcanvas width globally after redesign\n  --#{$prefix}offcanvas-width: 450px !important;\n\n  @include media-breakpoint-down(sm) {\n    --#{$prefix}offcanvas-width: 400px !important;\n  }\n\n  background-color: $color-white;\n\n  &__headline {\n    color: $body-color;\n    font-weight: $font-weight-semibold;\n    font-size: $h4-font-size;\n  }\n\n  &__menu {\n    color: $body-color;\n    padding-top: $spacer-4;\n    padding-bottom: $spacer-4;\n    display: grid;\n    gap: $spacer-2;\n\n    &__section {\n      display: grid;\n      gap: $spacer-2;\n    }\n\n    &__header {\n      font-size: $font-size-xs;\n      font-weight: $font-weight-semibold;\n      display: flex;\n      flex-wrap: wrap;\n      gap: $spacer-2;\n      align-items: center;\n      justify-content: space-between;\n      padding-left: $spacer-4;\n      padding-right: $spacer-4;\n\n      .badge {\n        font-size: $font-size-xxs;\n      }\n    }\n\n    &__links.two-columns {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      column-gap: 0;\n\n      @include media-breakpoint-down(sm) {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto;\n      }\n    }\n\n    &__link-item {\n      font-size: $font-size-base;\n      color: $body-color;\n      text-decoration: none;\n      display: flex;\n      gap: $spacer-2;\n      align-items: center;\n      padding-left: $spacer-4;\n      padding-top: $spacer-2;\n      padding-bottom: $spacer-2;\n\n      &:hover {\n        color: $body-color;\n        background-color: $gray-100;\n      }\n    }\n\n    &__divider {\n      margin-top: $spacer-2;\n      margin-bottom: $spacer-2;\n      opacity: 1;\n      border-top: 2px solid $border-color;\n    }\n\n    &__footer {\n      background-color: $gray-100;\n      flex: 1;\n      align-items: baseline;\n    }\n\n    &__footer &__link-item:hover {\n      background-color: $gray-200;\n    }\n  }\n}\n</style>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarSearch\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { useApiClient } from \"@/composables/useApiClient\";\nimport { usePlatformApiClient } from \"@/composables/usePlatformApiClient\";\nimport type { SearchResult } from \"@/services/fobizzPlatformApi\";\nimport type { Item, Material, Folder } from \"@/services/fobizzToolsApi\";\nimport Combobox from \"@github/combobox-nav\";\nimport { vOnClickOutside } from \"@vueuse/components\";\nimport debounce from \"lodash.debounce\";\n\nconst { t } = useI18n();\nconst {\n  items: itemsService,\n  materials: materialsService,\n  folders: foldersService,\n} = useApiClient();\nconst { apiClient: platformApiClient } = usePlatformApiClient();\n\nconst emit = defineEmits([\"activated\", \"deactivated\"]);\n\nconst inputRef = ref<HTMLInputElement>();\nconst listRef = ref<HTMLElement>();\nconst searchTerm = ref(\"\");\nconst coursesResults = ref<SearchResult[]>([]);\nconst myResults = ref<(Item | Folder)[]>([]);\nconst galleryResults = ref<(Material | Folder)[]>([]);\nconst folderResults = ref<Folder[]>([]); // Results that are folders\nconst isLoading = ref(false);\nconst showDropdown = ref(false);\nconst isActive = ref(false);\n\nlet combobox: Combobox | null = null;\n\nconst start = () => {\n  if (!inputRef.value || !listRef.value) {\n    return;\n  }\n\n  if (combobox) {\n    combobox.destroy();\n  }\n\n  combobox = new Combobox(inputRef.value, listRef.value);\n  combobox.start();\n\n  // item selected event\n  listRef.value.addEventListener(\"combobox-commit\", (event) => {\n    if (event.target) {\n      (event.target as HTMLElement).click();\n    }\n  });\n};\n\nconst stop = () => {\n  if (combobox) {\n    combobox.destroy();\n  }\n};\n\nonBeforeUnmount(() => {\n  if (combobox) {\n    combobox.destroy();\n  }\n});\n\nconst queryClient = useQueryClient();\n\nconst useFoldersQuery = () => {\n  return useQuery(\n    {\n      queryKey: [\"folders\"],\n      queryFn: async () => await foldersService.listFolders({ limit: 99 }),\n      placeholderData: keepPreviousData,\n    },\n    queryClient\n  );\n};\n\nconst search = async (query: string) => {\n  if (query.length > 0) {\n    showDropdown.value = true;\n    isLoading.value = true;\n\n    const result0 = platformApiClient.searches.search({\n      query: query,\n      limit: 3,\n    });\n\n    const result1 = itemsService.searchItems({\n      query: query,\n    });\n    const result2 = materialsService.listMaterials({\n      query: query,\n    });\n\n    const { data: foldersQueryData } = useFoldersQuery();\n\n    const combinedResult = await Promise.all([\n      result0,\n      result1,\n      result2,\n      foldersQueryData,\n    ]);\n\n    coursesResults.value = combinedResult[0].courses;\n    myResults.value = combinedResult[1].collection;\n    galleryResults.value = combinedResult[2].collection;\n\n    // Remove duplicate items/materials\n    if (myResults.value.length) {\n      // If an item or material is in both my content and gallery, only show in my content\n      if (galleryResults.value.length) {\n        const myResultIds = new Set(myResults.value.map((result) => result.id));\n        galleryResults.value = galleryResults.value.filter(\n          (result) => !myResultIds.has(result.id)\n        );\n      }\n    }\n\n    // Folders can be results in current folder and my content search, too. (Not in gallery)\n    folderResults.value =\n      foldersQueryData.value?.collection.filter((folder) =>\n        folder.name.includes(query)\n      ) ?? ([] as Folder[]);\n\n    // If a folder (as search result) is located in current folder, only show in current folder, not in my content\n    if (folderResults.value.length) {\n      myResults.value.unshift(...folderResults.value);\n    }\n\n    isLoading.value = false;\n\n    if (\n      coursesResults.value.length ||\n      myResults.value.length ||\n      galleryResults.value.length\n    ) {\n      start();\n    }\n  } else {\n    showDropdown.value = false;\n    stop();\n    isActive.value = false;\n    nextTick(() => {\n      emit(\"deactivated\");\n    });\n  }\n};\n\nconst debouncedSearch = debounce((query: string) => search(query), 300);\n\nconst handleSearchInput = (value: string) => {\n  activate();\n  debouncedSearch(value);\n};\n\nconst activate = () => {\n  isActive.value = true;\n  nextTick(() => {\n    inputRef.value?.focus();\n  });\n  emit(\"activated\");\n};\n\nconst handleBlur = () => {\n  if (searchTerm.value.length === 0) {\n    stop();\n    isActive.value = false;\n    nextTick(() => {\n      emit(\"deactivated\");\n    });\n  }\n};\n\nconst isEmpty = computed(\n  () =>\n    coursesResults.value.length === 0 &&\n    myResults.value.length === 0 &&\n    galleryResults.value.length === 0\n);\n\nconst clearAndClose = () => {\n  searchTerm.value = \"\";\n  stop();\n  isActive.value = false;\n  showDropdown.value = false;\n  emit(\"deactivated\");\n};\n</script>\n\n<template>\n  <div\n    v-on-click-outside=\"clearAndClose\"\n    class=\"main-fobizz-navbar-search\"\n    :class=\"{\n      'main-fobizz-navbar-search--active': isActive,\n    }\"\n  >\n    <div class=\"dropdown\">\n      <form>\n        <div class=\"input-group\">\n          <MainFobizzNavbarIconButton\n            v-tooltip.bottom=\"t('mainFobizzNavbar.tooltips.search')\"\n            :label=\"t('mainFobizzNavbar.tooltips.search')\"\n            type=\"submit\"\n            icon-name=\"search\"\n            style=\"font-size: 1.1rem\"\n            @click.prevent=\"activate\"\n          />\n          <input\n            v-if=\"isActive\"\n            ref=\"inputRef\"\n            v-model=\"searchTerm\"\n            class=\"main-fobizz-navbar-search__input\"\n            type=\"search\"\n            pattern=\".*\\w+.*\"\n            autocomplete=\"off\"\n            :placeholder=\"t('mainFobizzNavbar.navbarSearch.placeholder')\"\n            :aria-label=\"t('mainFobizzNavbar.navbarSearch.placeholder')\"\n            @input=\"\n              handleSearchInput(($event.target as HTMLInputElement).value)\n            \"\n            @click=\"activate\"\n            @blur=\"handleBlur\"\n            @keyup.enter.prevent\n          />\n          <MainFobizzNavbarIconButton\n            v-if=\"searchTerm\"\n            label=\"Clear search\"\n            class=\"main-fobizz-navbar-search__clear-btn\"\n            icon-name=\"x-circle-fill\"\n            @click=\"clearAndClose\"\n          />\n        </div>\n        <div\n          class=\"dropdown-menu dropdown-menu-end main-fobizz-navbar-search__dropdown\"\n          :class=\"{ show: showDropdown }\"\n        >\n          <div v-if=\"isLoading\" class=\"d-flex justify-content-center p-2\">\n            <BaseSpinner size=\"md\" />\n          </div>\n          <ul ref=\"listRef\" role=\"listbox\" class=\"results-list\">\n            <template\n              v-if=\"!isLoading && coursesResults && coursesResults.length > 0\"\n            >\n              <SearchResultsHeader\n                :label=\"t('mainFobizzNavbar.navbarSearch.results.courses')\"\n                :search-term=\"searchTerm\"\n                url=\"/fortbildungen\"\n              />\n              <div class=\"py-2\">\n                <SearchResultsItem\n                  v-for=\"result in coursesResults\"\n                  :key=\"result.id\"\n                  :result=\"result\"\n                  :gallery=\"false\"\n                />\n              </div>\n            </template>\n\n            <template v-if=\"!isLoading && myResults && myResults.length > 0\">\n              <SearchResultsHeader\n                :label=\"t('mainFobizzNavbar.navbarSearch.results.myItems')\"\n                :search-term=\"searchTerm\"\n              />\n              <div class=\"py-2\">\n                <SearchResultsItem\n                  v-for=\"result in myResults.slice(0, 3)\"\n                  :key=\"result.id\"\n                  :result=\"result\"\n                  :gallery=\"false\"\n                />\n              </div>\n            </template>\n            <template\n              v-if=\"!isLoading && galleryResults && galleryResults.length > 0\"\n            >\n              <SearchResultsHeader\n                gallery\n                :label=\"t('mainFobizzNavbar.navbarSearch.results.materials')\"\n                :search-term=\"searchTerm\"\n              />\n              <div class=\"pt-2\">\n                <SearchResultsItem\n                  v-for=\"result in galleryResults.slice(0, 3)\"\n                  :key=\"result.id\"\n                  :result=\"result\"\n                  :gallery=\"true\"\n                />\n              </div>\n            </template>\n            <template v-else-if=\"!isLoading && isEmpty\">\n              <div class=\"result-empty\">\n                {{ t(\"mainFobizzNavbar.navbarSearch.results.empty\") }}\n              </div>\n            </template>\n          </ul>\n        </div>\n      </form>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.main-fobizz-navbar-search {\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  flex: 1 1;\n\n  &__input {\n    position: relative;\n    appearance: none;\n    border: none;\n    outline: none;\n    color: $secondary;\n    background-color: $gray-100;\n    width: 0;\n    padding: 0;\n    transition: width 0.2s ease-in-out;\n  }\n\n  .input-group {\n    justify-content: flex-end;\n    flex-wrap: nowrap;\n  }\n\n  &__clear-btn {\n    color: $secondary;\n    background-color: $gray-100;\n  }\n\n  &__dropdown {\n    top: 2.3rem;\n    width: 100%;\n  }\n}\n\n.main-fobizz-navbar-search--active {\n  .main-fobizz-navbar-search__input {\n    width: 500px;\n\n    @include media-breakpoint-down(lg) {\n      width: 350px;\n    }\n\n    @include media-breakpoint-down(md) {\n      width: 250px;\n    }\n\n    @include media-breakpoint-down(sm) {\n      width: 140px;\n    }\n  }\n\n  .main-fobizz-navbar__link {\n    height: fit-content;\n  }\n\n  .main-fobizz-navbar__nav-icon {\n    color: $secondary;\n    background-color: $gray-100;\n\n    &:hover::before {\n      display: none;\n    }\n  }\n\n  /* clears the ‘X’ from Chrome */\n  input[type=\"search\"]::-webkit-search-decoration,\n  input[type=\"search\"]::-webkit-search-cancel-button,\n  input[type=\"search\"]::-webkit-search-results-button,\n  input[type=\"search\"]::-webkit-search-results-decoration {\n    display: none;\n  }\n}\n\n.results-list {\n  margin: 0;\n  margin-top: -1px;\n  padding: $spacer-1 0;\n  list-style: none;\n\n  &:empty {\n    display: none;\n  }\n}\n\n.result-empty {\n  text-align: center;\n  color: $secondary;\n  font-size: $font-size-sm;\n  font-weight: $font-weight-semibold;\n}\n</style>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbarTabs\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { type RouteRecordName } from \"vue-router\";\nimport logoUrl from \"/images/fobizz-logo-F.png\";\n\nconst { t } = useI18n();\nconst route = useRoute();\n\nconst userStore = useUserStore();\n\nconst getCurrentTabName = (routeName?: RouteRecordName | null) => {\n  switch (routeName) {\n    case \"home\":\n      return t(\"mainFobizzNavbar.navbarTabs.tools\");\n    case \"gallery-index\":\n      return t(\"mainFobizzNavbar.navbarTabs.material\");\n    case \"gallery-community\":\n      return t(\"mainFobizzNavbar.navbarTabs.material\");\n    case \"/collections/[id]/\":\n      return t(\"mainFobizzNavbar.navbarTabs.material\");\n    case \"collections-how-to\":\n      return t(\"mainFobizzNavbar.navbarTabs.material\");\n    case \"partners-index\":\n      return t(\"mainFobizzNavbar.navbarTabs.partners\");\n    case \"international-partners-show\":\n      return t(\"mainFobizzNavbar.navbarTabs.partners\");\n    default:\n      return \"\";\n  }\n};\n\nconst showPartnersTab = computed(() => {\n  return !(\n    userStore.platformUser &&\n    (!userStore.platformUser.partnersEnabled ||\n      userStore.isDisabledToolsFeature(\"partners\"))\n  );\n});\n\nconst homeRouteActive = computed(() => {\n  return [\"home\", \"tools\", \"bookmark-index\"].includes(route.name as string);\n});\n\nconst galleryRouteActive = computed(() => {\n  return [\"gallery-index\", \"gallery-community\"].includes(route.name as string);\n});\n\nconst partnerRouteActive = computed(() => {\n  return [\"partners-index\", \"international-partners-show\"].includes(\n    route.name as string\n  );\n});\n</script>\n\n<template>\n  <!-- huge desktop navigation -->\n  <nav aria-label=\"Main\">\n    <ul class=\"navbar-nav main-fobizz-navbar__tabs\">\n      <li class=\"nav-item d-none d-xl-flex\">\n        <a\n          href=\"/fortbildungen\"\n          class=\"main-fobizz-navbar__link main-fobizz-navbar__tab-link\"\n        >\n          {{ t(\"mainFobizzNavbar.navbarTabs.courses\") }}\n        </a>\n        <router-link\n          :to=\"{ name: 'home' }\"\n          class=\"main-fobizz-navbar__link main-fobizz-navbar__tab-link\"\n          :class=\"{\n            active: homeRouteActive,\n          }\"\n        >\n          {{ t(\"mainFobizzNavbar.navbarTabs.tools\") }}\n        </router-link>\n        <router-link\n          :to=\"{ name: 'gallery-index' }\"\n          class=\"main-fobizz-navbar__link main-fobizz-navbar__tab-link\"\n          :class=\"{\n            active: galleryRouteActive,\n          }\"\n        >\n          {{ t(\"mainFobizzNavbar.navbarTabs.material\") }}\n        </router-link>\n        <router-link\n          v-if=\"showPartnersTab\"\n          :to=\"\n            userStore.user?.international\n              ? { name: 'international-partners-index' }\n              : { name: 'partners-index' }\n          \"\n          class=\"main-fobizz-navbar__link main-fobizz-navbar__tab-link\"\n          :class=\"{\n            active: partnerRouteActive,\n          }\"\n          data-click-tracking=\"true\"\n        >\n          {{ t(\"mainFobizzNavbar.navbarTabs.partners\") }}\n        </router-link>\n      </li>\n    </ul>\n  </nav>\n\n  <!-- mobile & desktop navigation -->\n  <ul class=\"navbar-nav d-block d-xl-none main-fobizz-navbar__tabs\">\n    <li class=\"nav-item\">\n      <button\n        class=\"main-fobizz-navbar__link main-fobizz-navbar__link--sm main-fobizz-navbar__tab-link\"\n        data-bs-toggle=\"offcanvas\"\n        data-bs-target=\"#navbar-tab-offcanvas\"\n        aria-controls=\"navbar-tab-offcanvas\"\n        aria-label=\"Open navigation\"\n      >\n        <span>{{ getCurrentTabName(route.name) }}</span>\n        <BaseIcon icon-name=\"chevron-down\" class=\"ms-2\" size=\"inherit\" />\n      </button>\n\n      <div\n        id=\"navbar-tab-offcanvas\"\n        class=\"offcanvas offcanvas-top navbar-tabs-offcanvas\"\n        tabindex=\"-1\"\n        aria-labelledby=\"navbar-tab-offcanvasLabel\"\n        data-bs-scroll=\"true\"\n      >\n        <div class=\"offcanvas-header\">\n          <p id=\"navbar-tab-offcanvasLabel\" class=\"offcanvas-title\">\n            <img :src=\"logoUrl\" width=\"40\" alt=\"fobizz logo\" />\n          </p>\n          <button\n            type=\"button\"\n            class=\"btn-close text-reset\"\n            data-bs-dismiss=\"offcanvas\"\n            aria-label=\"Close navigation\"\n          ></button>\n        </div>\n\n        <div class=\"offcanvas-body small\">\n          <nav>\n            <a\n              href=\"/fortbildungen\"\n              class=\"main-fobizz-navbar__link navbar-tabs-offcanvas__link\"\n            >\n              {{ t(\"mainFobizzNavbar.navbarTabs.courses\") }}\n            </a>\n            <router-link\n              :to=\"{ name: 'home' }\"\n              class=\"main-fobizz-navbar__link navbar-tabs-offcanvas__link\"\n              :class=\"{\n                active: homeRouteActive,\n              }\"\n            >\n              {{ t(\"mainFobizzNavbar.navbarTabs.tools\") }}\n            </router-link>\n            <router-link\n              :to=\"{ name: 'gallery-index' }\"\n              class=\"main-fobizz-navbar__link navbar-tabs-offcanvas__link\"\n              :class=\"{\n                active: galleryRouteActive,\n              }\"\n            >\n              {{ t(\"mainFobizzNavbar.navbarTabs.material\") }}\n            </router-link>\n            <router-link\n              v-if=\"showPartnersTab\"\n              :to=\"\n                userStore.user?.international\n                  ? { name: 'international-partners-index' }\n                  : { name: 'partners-index' }\n              \"\n              class=\"main-fobizz-navbar__link navbar-tabs-offcanvas__link\"\n              :class=\"{\n                active: partnerRouteActive,\n              }\"\n              data-click-tracking=\"true\"\n            >\n              {{ t(\"mainFobizzNavbar.navbarTabs.partners\") }}\n            </router-link>\n          </nav>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style scoped lang=\"scss\">\n.main-fobizz-navbar__tabs {\n  flex-direction: row;\n  align-items: center;\n  width: fit-content;\n\n  .nav-item {\n    display: flex;\n    align-items: center;\n  }\n\n  .login-dropdown {\n    &__link {\n      &.main-fobizz-navbar__link::before {\n        margin: 0 $spacer-3;\n\n        @include media-breakpoint-down(md) {\n          margin: 0 $spacer-2;\n        }\n      }\n    }\n  }\n\n  .navbar-tabs-offcanvas {\n    border-radius: 0 0 $border-radius-lg $border-radius-lg;\n\n    &__link {\n      width: fit-content;\n      font-size: $h5-font-size !important;\n\n      &.active {\n        font-weight: $font-weight-semibold;\n      }\n\n      &.main-fobizz-navbar__link::before {\n        @include media-breakpoint-down(md) {\n          left: $spacer-2;\n          right: $spacer-2;\n        }\n      }\n    }\n  }\n}\n\n.main-fobizz-navbar__tab-link {\n  border: none;\n  background-color: transparent;\n\n  @include media-breakpoint-down(md) {\n    padding: 0 $spacer-2;\n  }\n\n  &.active {\n    font-weight: $font-weight-semibold;\n  }\n\n  &::before {\n    @include media-breakpoint-down(lg) {\n      left: $spacer-2;\n      right: $spacer-2;\n    }\n  }\n}\n</style>\n","<script lang=\"ts\">\nexport default {\n  name: \"MainFobizzNavbar\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport mySchoolIcon from \"/images/Meine_Schule_Icon.svg\";\nimport logoUrlMobile from \"/images/fobizz-logo-F.png\";\nimport logoUrlDesktop from \"/images/fobizz_logo_4c.svg\";\n\nconst userStore = useUserStore();\n\nconst { t } = useI18n();\n\nconst searchIsActive = ref(false);\n</script>\n\n<template>\n  <a href=\"#main-content\" class=\"skip-to-content-link\">\n    {{ t(\"mainFobizzNavbar.a11y.skipToContent\") }}\n  </a>\n\n  <div class=\"startpage-navbar-wrapper\">\n    <div class=\"navbar main-fobizz-navbar\">\n      <div class=\"container\">\n        <div class=\"d-flex\">\n          <a\n            href=\"/\"\n            class=\"navbar-brand d-none d-lg-flex align-items-center\"\n            aria-label=\"Go to homepage\"\n          >\n            <img :src=\"logoUrlDesktop\" width=\"110\" alt=\"\" />\n          </a>\n          <a\n            href=\"/\"\n            class=\"d-flex align-items-center d-lg-none\"\n            aria-label=\"Go to homepage\"\n          >\n            <img :src=\"logoUrlMobile\" width=\"40\" alt=\"\" />\n          </a>\n          <div v-if=\"!searchIsActive\" class=\"me-2\">\n            <MainFobizzNavbarTabs />\n          </div>\n        </div>\n\n        <template v-if=\"userStore.isAuthenticated\">\n          <MainFobizzNavbarSearch\n            @activated=\"searchIsActive = true\"\n            @deactivated=\"searchIsActive = false\"\n          />\n\n          <nav aria-label=\"Actions\">\n            <ul class=\"navbar-nav\">\n              <li class=\"nav-item d-none d-lg-flex\">\n                <router-link\n                  v-tooltip.bottom=\"\n                    t('mainFobizzNavbar.myfobizz.links.contact')\n                  \"\n                  :aria-label=\"t('mainFobizzNavbar.myfobizz.links.contact')\"\n                  class=\"main-fobizz-navbar__link main-fobizz-navbar__nav-icon\"\n                  :to=\"{ name: 'help-redirect' }\"\n                  data-click-tracking=\"true\"\n                >\n                  <BaseIcon\n                    icon-name=\"question-circle\"\n                    color=\"inherit\"\n                    style=\"font-size: 1.2rem\"\n                  />\n                </router-link>\n              </li>\n              <li\n                v-if=\"!userStore.user?.international\"\n                class=\"nav-item d-none d-lg-flex\"\n              >\n                <a\n                  v-tooltip.bottom=\"t('mainFobizzNavbar.tooltips.news')\"\n                  :aria-label=\"t('mainFobizzNavbar.tooltips.news')\"\n                  class=\"main-fobizz-navbar__link main-fobizz-navbar__nav-icon\"\n                  href=\"/posts\"\n                  data-click-tracking=\"true\"\n                >\n                  <MainFobizzNavbarNotificationIcon style=\"font-size: 1.2rem\" />\n                </a>\n              </li>\n              <li class=\"nav-item d-none d-lg-flex\">\n                <a\n                  v-tooltip.bottom=\"t('mainFobizzNavbar.tooltips.mySchool')\"\n                  class=\"main-fobizz-navbar__link main-fobizz-navbar__nav-icon\"\n                  href=\"/schule\"\n                  :aria-label=\"t('mainFobizzNavbar.tooltips.mySchool')\"\n                >\n                  <BaseIcon :size=\"22\" :icon-svg=\"mySchoolIcon\" />\n                </a>\n              </li>\n              <li class=\"nav-item\">\n                <MainFobizzNavbarMyFobizzOffcanvas />\n              </li>\n            </ul>\n          </nav>\n        </template>\n        <template v-else>\n          <ul class=\"navbar-nav\">\n            <MainFobizzNavbarLoginDropdown class=\"d-none d-lg-flex\" />\n            <MainFobizzNavbarLoginOffcanvas\n              signup-url=\"/users/sign_up\"\n              class=\"d-flex d-lg-none\"\n            />\n            <li class=\"nav-item ms-2 d-none d-lg-flex\">\n              <a\n                href=\"/users/sign_up\"\n                class=\"btn btn-primary btn-rounded text-nowrap\"\n                target=\"_blank\"\n              >\n                {{ t(\"links.signup\") }}\n              </a>\n            </li>\n          </ul>\n        </template>\n      </div>\n    </div>\n    <slot name=\"tabs\"></slot>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.startpage-navbar-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 1030;\n  max-width: 100vw;\n}\n\n.skip-to-content-link {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: $color-white;\n  padding: $spacer-2 $spacer-3;\n  border: 1px solid $border-color;\n  border-radius: $border-radius;\n  color: $body-color;\n  text-decoration: none;\n  z-index: 1031;\n  top: -100px;\n\n  &:focus-visible {\n    top: $spacer-2;\n  }\n}\n</style>\n\n<!-- // Global Styles shared in nested components, align with plattform -->\n<style lang=\"scss\">\n.main-fobizz-navbar {\n  height: $navbar-height;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  background-color: $color-white;\n  border-bottom: 1px solid $border-color;\n\n  .navbar-nav {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  &.navbar > .container {\n    flex-wrap: nowrap !important;\n  }\n\n  &__link {\n    position: relative;\n    color: $body-color;\n    display: flex;\n    align-items: center;\n    height: $navbar-height;\n    font-size: 1rem;\n    padding: 0 $spacer-3;\n    text-decoration: none;\n\n    @include media-breakpoint-down(md) {\n      padding: 0 $spacer-2;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      bottom: 0;\n      left: $spacer-3;\n      right: $spacer-3;\n      height: 2px;\n      background-color: $brand-courses;\n      display: none;\n    }\n\n    &.active::before,\n    &:hover::before {\n      display: flex;\n    }\n\n    &--sm {\n      padding: 0 $spacer-2;\n    }\n  }\n\n  &__nav-icon {\n    border: none;\n    border-radius: 0;\n    padding: 0.375rem 0.75rem;\n    background-color: transparent;\n\n    &::before {\n      left: 0.75rem;\n      right: 0.75rem;\n    }\n  }\n\n  & .nav-item:last-of-type &__nav-icon {\n    // removing the padding will change the pseudo element's width\n    margin-right: -0.5rem;\n  }\n}\n</style>\n"],"names":["__default__","t","useI18n","userStore","useUserStore","props","__props","component","computed","toOrHref","mySchoolIcon","mySchoolLicenseIcon","useUserProfileStatus","licenseFor","license","profileSubscriptionUrl","companyUrl","getCoursesUrl","getToolsUrl","tools","label","tooltip","courses","logout","useSession","handleLogout","itemsService","materialsService","foldersService","useApiClient","platformApiClient","usePlatformApiClient","emit","__emit","inputRef","ref","listRef","searchTerm","coursesResults","myResults","galleryResults","folderResults","isLoading","showDropdown","isActive","combobox","start","Combobox","event","stop","onBeforeUnmount","queryClient","useQueryClient","useFoldersQuery","useQuery","keepPreviousData","search","query","result0","result1","result2","foldersQueryData","combinedResult","myResultIds","result","folder","nextTick","debouncedSearch","debounce","handleSearchInput","value","activate","handleBlur","isEmpty","clearAndClose","route","useRoute","getCurrentTabName","routeName","showPartnersTab","homeRouteActive","galleryRouteActive","partnerRouteActive","searchIsActive"],"mappings":"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"}