Dashboard completed. Demo files added

src/layout/composables/layoutService.js

@@ -0,0 +1,48 @@
+import { toRefs, reactive, computed } from 'vue';
+
+const layoutConfig = reactive({
+    ripple: false,
+    darkTheme: false,
+    inputStyle: 'outlined',
+    menuMode: 'static',
+    theme: 'lara-light-indigo',
+    scale: 14
+});
+
+const layoutState = reactive({
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    profileSidebarVisible: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false
+});
+
+export function useLayoutService () {
+    const changeThemeSettings = (theme, darkTheme) => {
+        layoutConfig.theme = theme;
+        layoutConfig.darkTheme = darkTheme;
+    };
+
+    const setScale = scale => {
+        layoutConfig.scale = scale;
+    };
+
+    const onMenuToggle = () => {
+        if (layoutConfig.menuMode === 'overlay') {
+            layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
+        }
+
+        if (window.innerWidth > 991) {
+            layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
+        } else {
+            layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
+        }
+    };
+
+    const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
+
+    const isDarkTheme = computed(() => layoutConfig.darkTheme);
+
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme };
+}