vbv/client/src/components/MobileMenu.vue

92 lines
2.8 KiB
Vue

<script setup lang="ts">
import IconLogout from "@/components/icons/IconLogout.vue";
import IconSettings from "@/components/icons/IconSettings.vue";
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import { useUserStore } from "@/stores/user";
import type { CourseSession } from "@/types";
import { useRouter } from "vue-router";
const router = useRouter();
const userStore = useUserStore();
const props = defineProps<{
show: boolean;
courseSession: CourseSession | undefined;
}>();
const emits = defineEmits(["closemodal"]);
const clickLink = (to: string | undefined) => {
if (to) {
router.push(to);
emits("closemodal");
}
};
</script>
<template>
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
<div>
<div>
<div v-if="userStore.loggedIn" class="border-b -mx-4 px-8 pb-4">
<div class="-ml-4 flex">
<div v-if="userStore.avatar_url">
<img
class="inline-block h-16 w-16 rounded-full"
:src="userStore.avatar_url"
alt=""
/>
</div>
<div class="ml-6">
<h3>{{ userStore.first_name }} {{ userStore.last_name }}</h3>
<button
class="mt-2 inline-block flex items-center"
@click="clickLink('/profile')"
>
<IconSettings class="inline-block" />
<span class="ml-3"> {{ $t("mainNavigation.settings") }} </span>
</button>
</div>
</div>
</div>
<div>
<div v-if="courseSession" class="mt-6 pb-6 border-b">
<h4 class="text-gray-900 text-sm">{{ courseSession.course.title }}</h4>
<ul class="mt-6">
<li>
<button @click="clickLink(courseSession?.learning_path_url)">
{{ $t("general.learningPath") }}
</button>
</li>
<li class="mt-6">
<button @click="clickLink(courseSession?.competence_url)">
KompetenzNavi
</button>
</li>
</ul>
</div>
<div class="mt-6 pb-6 border-b">
<ul>
<li>Shop</li>
<li class="mt-6">
<button @click="clickLink(`/media/versicherungsvermittlerin-media`)">
{{ $t("mediaLibrary.title") }}
</button>
</li>
</ul>
</div>
<button
v-if="userStore.loggedIn"
type="button"
class="mt-6 items-center flex"
@click="userStore.handleLogout()"
>
<IconLogout class="inline-block" />
<span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
</button>
</div>
</div>
</div>
</ItFullScreenModal>
</template>