forked from Kispi/Core
139 lines
No EOL
3.9 KiB
Vue
139 lines
No EOL
3.9 KiB
Vue
<template>
|
|
<div
|
|
class="drawer"
|
|
:class="{
|
|
'lg:drawer-open': !hideNavigation,
|
|
}"
|
|
>
|
|
<input
|
|
:id="drawerId"
|
|
ref="drawerCheckbox"
|
|
type="checkbox"
|
|
class="drawer-toggle"
|
|
/>
|
|
<div
|
|
class="drawer-content flex flex-col bg-base-300"
|
|
:class="{'lg:pl-64': !hideNavigation}"
|
|
>
|
|
<div
|
|
class="navbar top-0 place-self-center shadow-lg"
|
|
:class="{
|
|
'lg:hidden': !hideNavigation,
|
|
}"
|
|
>
|
|
<div class="flex-none">
|
|
<label
|
|
:for="drawerId"
|
|
class="btn-ghost rounded-btn btn"
|
|
:class="{
|
|
'lg:hidden': !hideNavigation,
|
|
}"
|
|
>
|
|
<Bars3Icon class="h-7 w-7" />
|
|
</label>
|
|
<AtomLogo class="h-10 px-4" />
|
|
</div>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
<div class="drawer-side !fixed z-50">
|
|
<label
|
|
:for="drawerId"
|
|
class="drawer-overlay"
|
|
/>
|
|
<ul class="menu h-full w-64 overflow-y-auto bg-base-100 p-4">
|
|
<li class="pointer-events-none">
|
|
<AtomLogo class="w-full" />
|
|
</li>
|
|
<template v-if="isAdmin">
|
|
<li class="pointer-events-none rounded-md bg-warning uppercase text-warning-content">
|
|
<span>
|
|
<ExclamationTriangleIcon class="h-6 w-6" />
|
|
Admin-Modus
|
|
<ExclamationTriangleIcon class="h-6 w-6" />
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span @click="AuthService.logout()">
|
|
<ArrowRightOnRectangleIcon class="h-6 w-6" />
|
|
Abmelden
|
|
</span>
|
|
</li>
|
|
<li class="menu-title !p-0" />
|
|
</template>
|
|
<li
|
|
v-for="navigationEntry of navigationEntries"
|
|
:class="getNavigationEntryClass(navigationEntry)"
|
|
>
|
|
<component
|
|
:is="!navigationEntry.to || navigationEntry.disabled ? 'span' : 'router-link'"
|
|
v-if="navigationEntry.name !== 'divider'"
|
|
:to="navigationEntry.to"
|
|
active-class="active"
|
|
>
|
|
<component
|
|
:is="navigationEntry.icon"
|
|
class="h-6 w-6"
|
|
/>{{ navigationEntry.name }}
|
|
</component>
|
|
</li>
|
|
<AtomSwap
|
|
class="mt-auto place-self-end"
|
|
:on-icon="SunIcon"
|
|
:off-icon="MoonIcon"
|
|
:checked="isDark"
|
|
@change="toggleDark()"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { PropType, onMounted, ref } from 'vue';
|
|
import { useEventBus } from '@vueuse/core';
|
|
import { useRouter } from 'vue-router';
|
|
import { INavigationEntry } from '../../interfaces/navigation-entry.interface';
|
|
import { AuthService } from '../../services/auth.service';
|
|
import { isDark, toggleDark } from '../../utils/darkMode';
|
|
import { ArrowRightOnRectangleIcon, Bars3Icon, ExclamationTriangleIcon, MoonIcon, SunIcon } from '@heroicons/vue/24/outline';
|
|
import AtomLogo from '../atoms/AtomLogo.vue';
|
|
import AtomSwap from '../atoms/AtomSwap.vue';
|
|
|
|
const isAdmin = ref(false);
|
|
const hideNavigation = ref(false);
|
|
const router = useRouter();
|
|
const drawerCheckbox = ref();
|
|
|
|
defineProps({
|
|
drawerId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
navigationEntries: {
|
|
type: Array as PropType<INavigationEntry[]>,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
function getNavigationEntryClass(navigationEntry: INavigationEntry) {
|
|
return {
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
'menu-title !p-0': navigationEntry.name === 'divider',
|
|
disabled: navigationEntry.disabled,
|
|
};
|
|
}
|
|
|
|
useEventBus<boolean>('isAdmin').on(state => (isAdmin.value = state));
|
|
useEventBus<boolean>('hideNavigation').on(state => (hideNavigation.value = state));
|
|
|
|
onMounted(() => {
|
|
isAdmin.value = AuthService.isAdmin();
|
|
});
|
|
|
|
router.afterEach(() => {
|
|
drawerCheckbox.value.checked = false;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |