|
|
@ -1,10 +1,15 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
|
|
|
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
|
|
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
|
|
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
|
|
|
|
|
|
|
<div class="logoDIV" style="display: inline-block">
|
|
|
|
|
|
|
|
<logo v-if="showLogo" :collapse="true"/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="navbarDIV" style="display: inline-block">
|
|
|
|
|
|
|
|
<navbar/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
|
|
|
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
|
|
|
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
|
|
|
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
|
|
|
<div :class="{'fixed-header':fixedHeader}">
|
|
|
|
<div :class="{'fixed-header':fixedHeader}">
|
|
|
|
<navbar/>
|
|
|
|
|
|
|
|
<tags-view v-if="needTagsView"/>
|
|
|
|
<tags-view v-if="needTagsView"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<app-main/>
|
|
|
|
<app-main/>
|
|
|
@ -17,6 +22,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import RightPanel from '@/components/RightPanel'
|
|
|
|
import RightPanel from '@/components/RightPanel'
|
|
|
|
|
|
|
|
import Logo from "@/layout/components/Sidebar/Logo.vue";
|
|
|
|
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
|
|
|
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
|
|
|
import ResizeMixin from './mixin/ResizeHandler'
|
|
|
|
import ResizeMixin from './mixin/ResizeHandler'
|
|
|
|
import { mapState } from 'vuex'
|
|
|
|
import { mapState } from 'vuex'
|
|
|
@ -30,7 +36,8 @@ export default {
|
|
|
|
RightPanel,
|
|
|
|
RightPanel,
|
|
|
|
Settings,
|
|
|
|
Settings,
|
|
|
|
Sidebar,
|
|
|
|
Sidebar,
|
|
|
|
TagsView
|
|
|
|
TagsView,
|
|
|
|
|
|
|
|
Logo
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mixins: [ResizeMixin],
|
|
|
|
mixins: [ResizeMixin],
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
@ -42,6 +49,12 @@ export default {
|
|
|
|
needTagsView: state => state.settings.tagsView,
|
|
|
|
needTagsView: state => state.settings.tagsView,
|
|
|
|
fixedHeader: state => state.settings.fixedHeader
|
|
|
|
fixedHeader: state => state.settings.fixedHeader
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
|
|
|
|
showLogo() {
|
|
|
|
|
|
|
|
return this.$store.state.settings.sidebarLogo;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
isCollapse() {
|
|
|
|
|
|
|
|
return !this.sidebar.opened;
|
|
|
|
|
|
|
|
},
|
|
|
|
classObj() {
|
|
|
|
classObj() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
hideSidebar: !this.sidebar.opened,
|
|
|
|
hideSidebar: !this.sidebar.opened,
|
|
|
@ -108,4 +121,13 @@ export default {
|
|
|
|
.mobile .fixed-header {
|
|
|
|
.mobile .fixed-header {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.logoDIV {
|
|
|
|
|
|
|
|
width: #{$base-sidebar-width};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.navbarDIV {
|
|
|
|
|
|
|
|
width: calc(100% - #{$base-sidebar-width});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|