52 lines
770 B
Vue
52 lines
770 B
Vue
<template>
|
|
<PageHeader />
|
|
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
|
|
<Navigationbar />
|
|
<slot />
|
|
<Actionbar />
|
|
</main>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
import PageHeader from "./PageHeader.vue";
|
|
import Navigationbar from "./Navigationbar.vue";
|
|
import Actionbar from "./Actionbar.vue";
|
|
|
|
const darkMode = ref(true)
|
|
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
name: "default",
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
padding: 0.625rem;
|
|
gap: 0.625rem;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.main-darkmode {
|
|
background-color: #212121;
|
|
}
|
|
|
|
.main-lightmode {
|
|
background-color: #EBEBEB;
|
|
}
|
|
</style> |