<template>
    <div class="content" v-show="loggedIn">
        <Menu />
        <div class="right-content">
            <top-bar />
            <router-view class="view" />
        </div>
    </div>
</template>

<script>
import Menu from './Menu'
import TopBar from './TopBar'
import { mapState } from 'vuex'

export default {
    components: {
        Menu,
        TopBar
    },
    computed: {
        ...mapState({
            loggedIn: state => state.basics.loggedIn,
        }),
    }
}
</script>

<style lang="less" scoped>
.content {
    display: flex;
    width: 100vw;
    overflow: hidden;
    .menu {
        width: 210px;
    }
    .right-content {
        flex: 1;
        height: 100vh;
        width: 100px;
        box-sizing: border-box;
        .view {
            padding: 20px;
        }
    }
}
</style>