71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="w-full flex flex-col sm:flex-row flex-grow"
|
||
|
|
:class="{ 'sidebar-toggle': sidebarToggle }">
|
||
|
|
<aside
|
||
|
|
class="hidden md:block h-screen overflow-y-auto no-scrollbar border-r">
|
||
|
|
<Sidebar/>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main role="main" class="w-full h-full flex-grow overflow-auto p-3">
|
||
|
|
<RouterView/>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<button class="sidebar-toggle-btn md:hidden" v-on:click="toggleSidebar">
|
||
|
|
<svg class="svg-icon" style="width: 30px; height: 30px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M682.666667 682.666667h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666H170.666667v-170.666666z m512-256h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666H170.666667v-170.666666z m512-256h170.666666v170.666666h-170.666666V170.666667z m-256 0h170.666666v170.666666h-170.666666V170.666667zM170.666667 170.666667h170.666666v170.666666H170.666667V170.666667z" fill="#000000" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { RouterView } from 'vue-router'
|
||
|
|
import Sidebar from '@/components/Sidebar.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Sidebar,
|
||
|
|
RouterView,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
sidebarToggle: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggleSidebar() {
|
||
|
|
this.sidebarToggle = !this.sidebarToggle;
|
||
|
|
|
||
|
|
this.emitter.emit('sidebar.toggle');
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
aside {
|
||
|
|
width: 480px;
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.sidebar-toggle {
|
||
|
|
aside {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
max-width: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-btn {
|
||
|
|
right: 10px;
|
||
|
|
bottom: 10px;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1000;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|