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.
104 lines
2.5 KiB
104 lines
2.5 KiB
<template>
|
|
<div class="default">
|
|
<div id="aside" class="page-sidenav" :class="theme">
|
|
<div class="sidenav h-100">
|
|
<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 class="flex-fill scrollable hover py-lg-0">
|
|
<ul>
|
|
<li class="menu-item">
|
|
<div class="nav-link">
|
|
<div class="nav-icon">sa</div>
|
|
</div>
|
|
</li>
|
|
<li class="menu-item">
|
|
<div class="nav-link">sda</div>
|
|
</li>
|
|
<li class="menu-item">
|
|
<div class="nav-link">sda</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content" :class="theme">
|
|
<nuxt />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// https://theme.nicetheme.xyz/lighthouse/sample-page
|
|
// 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;
|
|
}
|
|
.sidenav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.menu-item {
|
|
list-style: none;
|
|
.nav-link {
|
|
position: relative;
|
|
font-size: 0.875rem;
|
|
padding: 0 0.75rem;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
opacity: 0.6;
|
|
.nav-icon{
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.page-content {
|
|
flex: 1 1 auto !important;
|
|
min-height: 100vh;
|
|
&.light {
|
|
background-color: #ffffff;
|
|
}
|
|
&.dark {
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|