<template> <div class="container"> <Warning v-if="showWarning" class="warning-container" @enter="setConsent(true)" @leave="setConsent(false)" /> <transition name="slide"> <Sidebar v-if="showSidebar" @toggle="(state) => showSidebar = state" /> </transition> <Header :toggle-sidebar="toggleSidebar" /> <div class="content"> <router-view /> </div> </div> </template> <script> import Warning from './warning.vue'; import Header from '../header/header.vue'; import Sidebar from '../sidebar/sidebar.vue'; function toggleSidebar(state) { this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar; } async function setConsent(consent) { if (consent) { this.showWarning = false; localStorage.setItem('consent', window.env.sessionId); } } function blur(event) { this.events.emit('blur', event); } function resize(event) { this.events.emit('resize', event); } function mounted() { document.addEventListener('click', this.blur); window.addEventListener('resize', this.resize); } function beforeUnmount() { document.removeEventListener('click', this.blur); window.removeEventListener('resize', this.resize); } export default { components: { Header, Sidebar, Warning, }, data() { return { showSidebar: false, showWarning: localStorage.getItem('consent') !== window.env.sessionId, }; }, mounted, beforeUnmount, methods: { toggleSidebar, setConsent, blur, resize, }, }; </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; overflow-x: hidden; } .content-inner { display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; overflow-x: hidden; box-shadow: 0 0 3px var(--shadow-weak); z-index: 1; } .slide-enter-active, .slide-leave-active { &.sidebar-container { transition: background .15s ease-in-out; } .sidebar { transition: transform .15s ease-in-out; } } .slide-enter, .slide-leave-to { &.sidebar-container { background: transparent; } .sidebar { transform: translate(100%, 0); } } .column { width: 1200px; max-width: 100%; padding: 0 1rem; margin: 0 auto; box-sizing: border-box; } </style>