traxxx/assets/components/container/container.vue

<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 :key="$route.fullPath" />
        </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-dim);
    color: var(--text);
    transition: background var(--theme-transition);
}

.content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.content-inner {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
}
</style>