<template> <div class="container" :class="theme" > <Sidebar v-if="showSidebar" :toggle-sidebar="toggleSidebar" /> <Header :toggle-sidebar="toggleSidebar" /> <div class="content"> <!-- key forces rerender when new and old path use same component --> <router-view /> </div> </div> </template> <script> import { mapState } from 'vuex'; import EventBus from '../../js/event-bus'; import Header from '../header/header.vue'; import Sidebar from '../sidebar/sidebar.vue'; function theme(state) { return state.ui.theme; } function toggleSidebar(state) { this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar; } function mounted() { document.addEventListener('click', () => { EventBus.$emit('blur'); this.showSidebar = false; }); } export default { components: { Header, Sidebar, }, data() { return { showSidebar: false, }; }, computed: { ...mapState({ theme, }), }, mounted, methods: { toggleSidebar, }, }; </script> <style lang="scss"> @import 'theme'; .container { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--background-soft); color: var(--text); } .content { display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; } .content-inner { flex-grow: 1; padding: 1rem; border-top: solid 1px var(--crease); } </style>