|
@@ -2,29 +2,29 @@
|
|
|
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
|
|
|
|
|
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
|
|
- <sidebar v-if="!sidebar.hide" class="sidebar-container" v-show="!layoutHide"/>
|
|
|
- <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide,'layout-hide':layoutHide }" class="main-container">
|
|
|
+ <sidebar v-if="!sidebar.hide" class="sidebar-container" v-show="!layoutHide"/>
|
|
|
+ <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide,'layout-hide':layoutHide }"
|
|
|
+ class="main-container">
|
|
|
<div :class="{ 'fixed-header': fixedHeader }">
|
|
|
<navbar @setLayout="setLayout" v-show="!layoutHide"/>
|
|
|
- <tags-view v-if="needTagsView" v-show="!layoutHide"/>
|
|
|
+ <tags-view v-if="needTagsView" v-show="!layoutHide"/>
|
|
|
</div>
|
|
|
- <app-main />
|
|
|
- <settings ref="settingRef" />
|
|
|
+ <app-main/>
|
|
|
+ <settings ref="settingRef"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { useWindowSize } from '@vueuse/core'
|
|
|
+import {useWindowSize} from '@vueuse/core'
|
|
|
import Sidebar from './components/Sidebar/index.vue'
|
|
|
-import { AppMain, Navbar, Settings, TagsView } from './components'
|
|
|
-import defaultSettings from '@/settings'
|
|
|
-import { useRoute } from 'vue-router';
|
|
|
-const route = useRoute();
|
|
|
-
|
|
|
+import {AppMain, Navbar, Settings, TagsView} from './components'
|
|
|
+import {useRoute} from 'vue-router';
|
|
|
import useAppStore from '@/store/modules/app'
|
|
|
import useSettingsStore from '@/store/modules/settings'
|
|
|
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
const settingsStore = useSettingsStore()
|
|
|
const theme = computed(() => settingsStore.theme);
|
|
|
const sideTheme = computed(() => settingsStore.sideTheme);
|
|
@@ -41,34 +41,35 @@ const classObj = computed(() => ({
|
|
|
mobile: device.value === 'mobile'
|
|
|
}))
|
|
|
|
|
|
-const { width, height } = useWindowSize();
|
|
|
+const {width, height} = useWindowSize();
|
|
|
const WIDTH = 992; // refer to Bootstrap's responsive design
|
|
|
|
|
|
watchEffect(() => {
|
|
|
if (device.value === 'mobile' && sidebar.value.opened) {
|
|
|
- useAppStore().closeSideBar({ withoutAnimation: false })
|
|
|
+ useAppStore().closeSideBar({withoutAnimation: false})
|
|
|
}
|
|
|
if (width.value - 1 < WIDTH) {
|
|
|
useAppStore().toggleDevice('mobile')
|
|
|
- useAppStore().closeSideBar({ withoutAnimation: true })
|
|
|
+ useAppStore().closeSideBar({withoutAnimation: true})
|
|
|
} else {
|
|
|
useAppStore().toggleDevice('desktop')
|
|
|
}
|
|
|
})
|
|
|
|
|
|
function handleClickOutside() {
|
|
|
- useAppStore().closeSideBar({ withoutAnimation: false })
|
|
|
+ useAppStore().closeSideBar({withoutAnimation: false})
|
|
|
}
|
|
|
|
|
|
const settingRef = ref(null);
|
|
|
+
|
|
|
function setLayout() {
|
|
|
settingRef.value.openSetting();
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @import "@/assets/styles/mixin.scss";
|
|
|
- @import "@/assets/styles/variables.module.scss";
|
|
|
+@import "@/assets/styles/mixin.scss";
|
|
|
+@import "@/assets/styles/variables.module.scss";
|
|
|
|
|
|
.app-wrapper {
|
|
|
@include clearfix;
|
|
@@ -112,7 +113,8 @@ function setLayout() {
|
|
|
.mobile .fixed-header {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.layout-hide{
|
|
|
- margin-left:0!important;
|
|
|
+
|
|
|
+.layout-hide {
|
|
|
+ margin-left: 0 !important;
|
|
|
}
|
|
|
</style>
|