You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.3 KiB
59 lines
1.3 KiB
<template>
|
|
<div class="default">
|
|
<div id="aside" class="page-sidenav" :class="theme">
|
|
<div class="sidenav">
|
|
<div class="logo px-md-4 py-md-4">
|
|
<a href="#" class="navbar-brand" style="width:140px;">
|
|
<img v-if="theme=='light'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo.png" alt="nicetheme">
|
|
<img v-if="theme=='dark'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo-dark.png" alt="nicetheme">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content" :class="theme">
|
|
<nuxt />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
|
|
export default {
|
|
components: {},
|
|
mounted(){
|
|
console.log(this);
|
|
|
|
},
|
|
computed:{
|
|
theme(){
|
|
return this.$store.getters.theme
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
.default {
|
|
display: flex;
|
|
.page-sidenav {
|
|
z-index: 1000;
|
|
min-width: 13rem;
|
|
height: 100vh;
|
|
&.light{
|
|
background-color: #f4f6fb;
|
|
}
|
|
&.dark{
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
.page-content {
|
|
flex: 1 1 auto!important;
|
|
min-height: 100vh;
|
|
&.light{
|
|
background-color: #ffffff;
|
|
}
|
|
&.dark{
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|