47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup>
|
|
import { onMounted, useSlots, computed } from 'vue';
|
|
import { initFlowbite } from 'flowbite';
|
|
import Toast from '@/Components/Toast.vue';
|
|
|
|
const slots = useSlots();
|
|
const hasHeader = computed(() => !!slots.header)
|
|
|
|
onMounted(() => {
|
|
initFlowbite();
|
|
|
|
// Force light mode (dark mode not implemented, yet)
|
|
// if the user has selected darkmode in the dashboard
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem('dark', 'false');
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Toast :duration="8" />
|
|
<!-- Warn for small screens -->
|
|
<div class="lg:hidden text-center p-6 bg-yellow-100 text-yellow-800">
|
|
Denne funksjonen er kun tilgjengelig på større skjermer (LG og opp).
|
|
</div>
|
|
|
|
<!-- Main layout for large screens -->
|
|
<div class="hidden lg:block min-h-screen">
|
|
<!-- Optional Sticky Header -->
|
|
<header
|
|
v-if="slots.header"
|
|
class="fixed top-0 left-0 w-full z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-6 py-2 shadow-sm"
|
|
>
|
|
<div class="max-w-screen-xl mx-auto flex justify-between items-center h-[48px]">
|
|
<slot name="header" />
|
|
</div>
|
|
</header>
|
|
|
|
<main :class="{ 'pt-[56px]': hasHeader }">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Add any layout-specific styling here */
|
|
</style> |