79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
<template>
|
|
<PageHeader />
|
|
<main :class="[loggedInUserDarkModeBoolean ? 'main-darkmode' : 'main-lightmode']">
|
|
<Navigationbar />
|
|
<slot />
|
|
<Actionbar />
|
|
</main>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch } from 'vue';
|
|
|
|
import PageHeader from "./PageHeader.vue";
|
|
import Navigationbar from "./Navigationbar.vue";
|
|
import Actionbar from "./Actionbar.vue";
|
|
import { useStore } from 'vuex';
|
|
import { computed } from 'vue';
|
|
|
|
const store = useStore();
|
|
const modeChanged = computed(() => store.state.updateDarkMode);
|
|
|
|
const loggedInUserDarkModeBoolean = ref('');
|
|
|
|
const getSession = async () => {
|
|
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
|
if (loggedInUserDarkModeBool == 1) {
|
|
loggedInUserDarkModeBoolean.value = true;
|
|
} else {
|
|
loggedInUserDarkModeBoolean.value = false;
|
|
}
|
|
}
|
|
|
|
function getItem(item) {
|
|
if (process.client) {
|
|
return localStorage.getItem(item)
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
watch(modeChanged, getSession)
|
|
|
|
onMounted(async () => {
|
|
await getSession();
|
|
});
|
|
</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> |