vbv/client/src/components/MainNavigationBar.vue

<script setup lang="ts">
import * as log from 'loglevel';

import { onMounted, reactive} from 'vue';
import { useUserStore } from '@/stores/user';
import { useLearningPathStore } from '@/stores/learningPath';
import { useRoute, useRouter } from 'vue-router';
import { useAppStore } from '@/stores/app';
import IconLogout from "@/components/icons/IconLogout.vue";
import IconSettings from "@/components/icons/IconSettings.vue";
import ItDropdown from "@/components/ui/ItDropdown.vue";
import MobileMenu from "@/components/MobileMenu.vue"

log.debug('MainNavigationBar created');

const route = useRoute()
const router = useRouter()
const userStore = useUserStore();
const appStore = useAppStore();
const learningPathStore = useLearningPathStore();
const state = reactive({showMenu: false});

function toggleNav() {
  state.showMenu = !state.showMenu;
}

function menuActive(checkPath) {
  return route.path.startsWith(checkPath);
}

function inLearningPath() {
  return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
}

function learningPathName (): string {
  return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath.title : '';
}

function backButtonUrl() {
  if (route.path.startsWith('/circle/')) {
    return '/learningpath/versicherungsvermittlerin';
  }
  return '/';
}

function handleDropdownSelect(data) {
  log.debug('Selected action:', data.action)
  switch (data.action) {
    case 'settings':
      router.push('/profile')
      break
    case 'logout':
      router.push('/logout')
      break
    default:
      console.log('no action')
  }
}

onMounted(() => {
  log.debug('MainNavigationBar mounted');
})

const profileDropdownData = [
    [
      {
        title: 'Kontoeinstellungen',
        icon: IconSettings,
        data: {
          action: 'settings'
        }
      }
    ],
    [
      {
        title: 'Abmelden',
        icon: IconLogout,
        data: {
          action: 'logout'
        }
      },
    ]
  ]

</script>

<template>
  <div>
    <Teleport to="body">
      <MobileMenu
        :user="userStore"
        :show="state.showMenu"
        :learning-path-name="learningPathName()"
        @closemodal="state.showMenu = false"
      />
    </Teleport>
    <Transition name="nav">
      <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
        <nav
          class="
            px-8
            py-2
            mx-auto
            lg:flex lg:justify-start lg:items-center lg:py-4
          "
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <a
                href="https://www.vbv.ch"
                class="flex">
                <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
              </a>
              <router-link
                to="/"
                class="flex">
                <div class="
                  text-white
                  text-2xl
                  pr-10
                  pl-3
                  ml-1
                  border-l border-white
                "
                >
                  myVBV
                </div>
              </router-link>
            </div>

            <div class="flex items-center lg:hidden">
              <router-link
                to="/messages"
                class="nav-item flex flex-row items-center"
              >
                <it-icon-message class="w-8 h-8 mr-6"/>
              </router-link>
              <!-- Mobile menu button -->
              <div @click="toggleNav" class="flex">
                <button
                  type="button"
                  class="
                    w-8
                    h-8
                    text-white
                    hover:text-sky-500
                    focus:outline-none focus:text-sky-500
                  "
                >
                  <it-icon-menu class="h-8 w-8"/>
                </button>
              </div>
            </div>
          </div>

          <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
          <div
            v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn "
            :class="state.showMenu ? 'flex' : 'hidden'"
            class="
              flex-auto
              mt-8
              lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
            "
          >
            <router-link
              v-if="inLearningPath()"
              to="/learningpath/versicherungsvermittlerin"
              class="nav-item"
              :class="{'nav-item--active': menuActive('/learningpath/')}"
            >
              Lernpfad
            </router-link>

            <router-link
              v-if="inLearningPath()"
              to="/competences/"
              class="nav-item"
              :class="{'nav-item--active': menuActive('/competences/')}"
            >
              Kompetenzprofil
            </router-link>

            <div class="hidden lg:block flex-auto"></div>
            <router-link
              to="/shop"
              class="nav-item"
              :class="{'nav-item--active': menuActive('/shop')}"
            >
              Shop
            </router-link>
            <router-link
              to="/mediacenter"
              class="nav-item"
              :class="{'nav-item--active': menuActive('/mediacenter')}"
            >
              Mediathek
            </router-link>
            <router-link
              to="/messages"
              class="nav-item flex flex-row items-center"
            >
              <it-icon-message class="w-8 h-8 mr-6"/>
            </router-link>
            <div class="nav-item flex items-center" v-if="userStore.loggedIn">
              <ItDropdown
                :button-classes="[]"
                :list-items="profileDropdownData"
                :align="'right'"
                @select="handleDropdownSelect"
              >
                <div v-if="userStore.avatar_url">
                  <img class="inline-block h-8 w-8 rounded-full"
                       :src="userStore.avatar_url"
                       alt=""/>
                </div>
                <div v-else>
                  {{ userStore.getFullName }}
                </div>
              </ItDropdown>
            </div>
            <div v-else><a class="" href="/login">Login</a></div>
          </div>
        </nav>
      </div>
    </Transition>
  </div>
</template>

<style lang="postcss" scoped>
.nav-item {
  @apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal;
}

.nav-item--active {
  @apply underline underline-offset-[21px] decoration-sky-500 decoration-4
}

.nav-enter-active,
.nav-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-enter-from,
.nav-leave-to {
  opacity: 0;
  transform: translateY(-80px);
}

</style>