| | |
|---|
| | | <template> |
|---|
| | | <div :class="classObj" class="app-wrapper"> |
|---|
| | | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
|---|
| | | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> |
|---|
| | | <sidebar class="sidebar-container" /> |
|---|
| | | <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> |
|---|
| | | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
|---|
| | | <div :class="{'fixed-header':fixedHeader}"> |
|---|
| | | <navbar /> |
|---|
| | |
|---|
| | | import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' |
|---|
| | | import ResizeMixin from './mixin/ResizeHandler' |
|---|
| | | import { mapState } from 'vuex' |
|---|
| | | import variables from '@/assets/styles/variables.scss' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'Layout', |
|---|
| | |
|---|
| | | mixins: [ResizeMixin], |
|---|
| | | computed: { |
|---|
| | | ...mapState({ |
|---|
| | | theme: state => state.settings.theme, |
|---|
| | | sideTheme: state => state.settings.sideTheme, |
|---|
| | | sidebar: state => state.app.sidebar, |
|---|
| | | device: state => state.app.device, |
|---|
| | | showSettings: state => state.settings.showSettings, |
|---|
| | |
|---|
| | | withoutAnimation: this.sidebar.withoutAnimation, |
|---|
| | | mobile: this.device === 'mobile' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | variables() { |
|---|
| | | return variables; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
