| 
					
				 | 
			
			
				@@ -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> 
			 |