forked from Kispi/Core
97 lines
No EOL
2.6 KiB
Vue
97 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<div class="drawer drawer-mobile">
|
|
<input
|
|
:id="drawerId"
|
|
type="checkbox"
|
|
class="drawer-toggle"
|
|
/>
|
|
<div class="drawer-content flex flex-col bg-base-300 h-screen">
|
|
<div
|
|
class="navbar shadow-lg bg-neutral-focus text-neutral-content lg:hidden sticky top-0 z-50 max-w-7xl place-self-center"
|
|
>
|
|
<div class="flex-none">
|
|
<label
|
|
:for="drawerId"
|
|
class="btn btn-ghost rounded-btn lg:hidden"
|
|
>
|
|
<MenuIcon class="h-7 w-7" />
|
|
</label>
|
|
<label
|
|
tabindex="0"
|
|
class="btn btn-ghost avatar"
|
|
>
|
|
<AtomLogo class="w-12" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label
|
|
:for="drawerId"
|
|
class="drawer-overlay"
|
|
/>
|
|
<ul class="menu p-4 overflow-y-auto w-64 bg-base-100">
|
|
<li class="pointer-events-none">
|
|
<a>
|
|
<AtomLogo class="w-28" />
|
|
</a>
|
|
</li>
|
|
<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 } from 'vue';
|
|
import { isDark, toggleDark } from '../../utils/darkMode';
|
|
import { INavigationEntry } from '../../interfaces/navigation-entry.interface';
|
|
import { MenuIcon, MoonIcon, SunIcon } from '@heroicons/vue/outline';
|
|
import AtomLogo from '../atoms/AtomLogo.vue';
|
|
import AtomSwap from '../atoms/AtomSwap.vue';
|
|
|
|
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': navigationEntry.name === 'divider',
|
|
disabled: navigationEntry.disabled,
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |