127 lines
No EOL
2.6 KiB
Vue
127 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<Sidebar/>
|
|
<div class="main">
|
|
<nav class="navbar navbar-expand navbar-light navbar-bg">
|
|
<a class="sidebar-toggle d-flex" @click="toggleSidebar">
|
|
<i class="hamburger align-self-center"></i>
|
|
</a>
|
|
<div class="navbar-collapse collapse">
|
|
<ul class="navbar-nav navbar-align">
|
|
<UserDropdown/>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<slot></slot>
|
|
<Footer/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* global closeAllDropdowns */
|
|
import Footer from "@/components/Footer.vue";
|
|
import Sidebar from "@/components/Sidebar.vue";
|
|
import UserDropdown from "@/components/UserDropdown.vue";
|
|
|
|
export default {
|
|
name: 'BaseLayout',
|
|
components: {
|
|
UserDropdown,
|
|
Footer,
|
|
Sidebar
|
|
},
|
|
props: {
|
|
hideSearch: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
toggleSidebar() {
|
|
closeAllDropdowns();
|
|
document.getElementById("sidebar").classList.toggle("collapsed");
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.wrapper {
|
|
align-items: stretch;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 100vh;
|
|
transition: margin-left .35s ease-in-out, left .35s ease-in-out, margin-right .35s ease-in-out, right .35s ease-in-out;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.navbar-expand {
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.navbar {
|
|
border-bottom: 0;
|
|
padding: .875rem 1.375rem;
|
|
box-shadow: 0 0 2rem var(--bs-shadow)
|
|
}
|
|
|
|
.navbar-align {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.navbar-bg {
|
|
background: var(--bs-white);
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
cursor: pointer;
|
|
width: 26px;
|
|
height: 26px;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.hamburger {
|
|
position: relative;
|
|
|
|
&, &:after, &:before {
|
|
cursor: pointer;
|
|
border-radius: 1px;
|
|
height: 3px;
|
|
width: 24px;
|
|
background: var(--bs-gray-700);
|
|
display: block;
|
|
content: "";
|
|
transition: background .1s ease-in-out, color .1s ease-in-out
|
|
}
|
|
|
|
&:before {
|
|
top: -7.5px;
|
|
width: 24px;
|
|
position: absolute
|
|
}
|
|
|
|
&:after {
|
|
bottom: -7.5px;
|
|
width: 16px;
|
|
position: absolute
|
|
}
|
|
}
|
|
|
|
.sidebar-toggle:hover {
|
|
.hamburger, .hamburger:after, .hamburger:before {
|
|
background: var(--bs-primary);
|
|
}
|
|
}
|
|
|
|
</style> |