useCustomizerStore

Author: giladfuchs

react/package.json

@@ -7,12 +7,8 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.3",
-    "@mui/lab": "^5.0.0-alpha.50",
     "@mui/material": "^5.0.3",
     "@mui/styles": "^5.0.1",
-    "@mui/system": "^5.0.3",
-    "@mui/utils": "^5.0.1",
-    "@mui/x-data-grid": "^5.0.0-beta.3",
     "@reduxjs/toolkit": "^2.7.0",
     "@tabler/icons": "^1.39.1",
     "ag-grid-community": "^29.3.3",

vue3/package.json

@@ -54,5 +54,10 @@
     "vue-cli-plugin-vuetify": "2.5.5",
     "vue-tsc": "^1.0.24",
     "vuetify-loader": "^2.0.0-alpha.9"
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11",
+    "not op_mini all"
+  ]
 }

vue3/src/assets/layouts/full/FullLayout.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
 import VerticalHeaderVue from '@/assets/layouts/full/vertical-header/VerticalHeader.vue';
-import Customizer from '@/assets/layouts/full/customizer/Customizer.vue';
 import { useCustomizerStore } from '@/common/stores/customizer';
 import { useAuthStore } from '@/common/stores/auth';
 
@@ -21,7 +20,6 @@ const auth_store: any = useAuthStore();
         customizer.inputBg ? 'inputWithbg' : ''
       ]"
     >
-      <Customizer />
 
       <VerticalHeaderVue v-if="auth_store.authenticated" />
 

vue3/src/assets/layouts/full/customizer/Customizer.vue

@@ -7,7 +7,6 @@ import { ChecksIcon } from 'vue-tabler-icons';
 const theme = useTheme();
 const customizer = useCustomizerStore();
 
-// themes color options
 const themeColors = ref([
   {
     name: 'PurpleTheme',
@@ -54,8 +53,6 @@ const fontFamily = ref(['Roboto', 'Poppins', 'Inter']);
 </script>
 
 <template style="z-index: 21">
-  <v-navigation-drawer app temporary elevation="10" location="right" v-model="customizer.Customizer_drawer" width="280">
-    <perfect-scrollbar style="height: 100%">
       <div class="pa-5">
         <v-row>
           <v-col cols="12">
@@ -108,8 +105,6 @@ const fontFamily = ref(['Roboto', 'Poppins', 'Inter']);
           </v-col>
         </v-row>
       </div>
-    </perfect-scrollbar>
-  </v-navigation-drawer>
 </template>
 
 <style lang="scss"></style>

vue3/src/assets/layouts/full/vertical-header/ProfileDD.vue

@@ -2,6 +2,7 @@
 import { SettingsIcon, LogoutIcon, UserIcon } from 'vue-tabler-icons';
 import { useAuthStore } from '@/common/stores/auth';
 import { useCustomizerStore } from '@/common/stores/customizer';
+import Customizer from "@/assets/layouts/full/customizer/Customizer.vue";
 
 const authStore = useAuthStore();
 const customizer = useCustomizerStore();
@@ -12,15 +13,9 @@ const customizer = useCustomizerStore();
     <span class="text-subtitle-2 text-medium-emphasis">Vue Full Stack Template</span>
 
     <v-divider></v-divider>
-    <perfect-scrollbar style="height: calc(100vh - 300px); max-height: 515px">
+    <perfect-scrollbar style=" max-height: 303rem">
       <v-list class="mt-3 bg-lightwarning rounded-md pa-5 my-3 circle sm-circle lg-circle">
-        <v-list-item @click.stop="customizer.SET_CUSTOMIZER_DRAWER(!customizer.Customizer_drawer)" active-color="secondary" rounded="md">
-          <template v-slot:prepend>
-            <SettingsIcon size="20" class="mr-2" />
-          </template>
 
-          <v-list-item-title class="text-subtitle-2"> Theme Settings</v-list-item-title>
-        </v-list-item>
 
         <v-list-item @click="authStore.logout()" active-color="secondary" rounded="md">
           <template v-slot:prepend>
@@ -29,7 +24,13 @@ const customizer = useCustomizerStore();
 
           <v-list-item-title class="text-subtitle-2"> Logout</v-list-item-title>
         </v-list-item>
+
       </v-list>
+      <v-card-title class="d-flex align-center">
+        <SettingsIcon size="20" class="mr-2" />
+        <span class="text-h6">Theme Settings</span>
+      </v-card-title>
+          <Customizer />
     </perfect-scrollbar>
   </div>
 </template>

vue3/src/common/config.ts

@@ -1,6 +1,4 @@
 export type ConfigProps = {
-  Sidebar_drawer: any;
-  Customizer_drawer: boolean;
   mini_sidebar: boolean;
   setHorizontalLayout: boolean;
   actTheme: string;
@@ -13,8 +11,6 @@ export type ConfigProps = {
 export const is_development: boolean = process.env.NODE_ENV === 'development';
 
 const config: ConfigProps = {
-  Sidebar_drawer: null,
-  Customizer_drawer: false,
   mini_sidebar: false,
   setHorizontalLayout: false,
   actTheme: 'DarkGreenTheme',

vue3/src/common/stores/customizer.ts

@@ -4,8 +4,6 @@ import config from '@/common/config';
 export const useCustomizerStore = defineStore({
   id: 'customizer',
   state: () => ({
-    Sidebar_drawer: config.Sidebar_drawer,
-    Customizer_drawer: config.Customizer_drawer,
     mini_sidebar: config.mini_sidebar,
     setHorizontalLayout: config.setHorizontalLayout,
     actTheme: config.actTheme,
@@ -16,9 +14,5 @@ export const useCustomizerStore = defineStore({
   }),
 
   getters: {},
-  actions: {
-    SET_CUSTOMIZER_DRAWER(payload: any) {
-      this.Customizer_drawer = payload;
-    }
-  }
+
 });