78 lines
2.5 KiB
Vue
78 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
|
|
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
|
import DiscussionSideBarElement from "@/components/DiscussionSideBarElement.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
|
|
import { ref, watch } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const { t, locale } = useI18n();
|
|
const route = useRoute();
|
|
|
|
const navigationDrawerShown = ref(true);
|
|
const currentLocale = ref(locale.value);
|
|
const expanded = ref([route.params.hruid]);
|
|
|
|
watch(locale, (newLocale) => {
|
|
currentLocale.value = newLocale;
|
|
});
|
|
|
|
const allLearningPathsResult = useGetAllLearningPaths(() => currentLocale.value);
|
|
</script>
|
|
|
|
<template>
|
|
<v-navigation-drawer
|
|
v-model="navigationDrawerShown"
|
|
:width="350"
|
|
app
|
|
>
|
|
<div class="d-flex flex-column h-100">
|
|
<v-list-item>
|
|
<template v-slot:title>
|
|
<div class="title">{{ t("discussions") }}</div>
|
|
</template>
|
|
</v-list-item>
|
|
<v-divider></v-divider>
|
|
<div class="nav-scroll-area">
|
|
<v-expansion-panels v-model="expanded">
|
|
<using-query-result
|
|
:query-result="allLearningPathsResult"
|
|
v-slot="learningPaths: { data: LearningPath[] }"
|
|
>
|
|
<DiscussionSideBarElement
|
|
v-for="learningPath in learningPaths.data"
|
|
:path="learningPath"
|
|
:activeObjectId="'' as string"
|
|
:key="learningPath.hruid"
|
|
/>
|
|
</using-query-result>
|
|
</v-expansion-panels>
|
|
</div>
|
|
</div>
|
|
</v-navigation-drawer>
|
|
<div class="control-bar-above-content">
|
|
<v-btn
|
|
:icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
|
|
class="navigation-drawer-toggle-button"
|
|
variant="plain"
|
|
@click="navigationDrawerShown = !navigationDrawerShown"
|
|
></v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.title {
|
|
color: #0e6942;
|
|
text-transform: uppercase;
|
|
font-weight: bolder;
|
|
padding-top: 2%;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.nav-scroll-area {
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
</style>
|