diff --git a/components/layout/full/logo/LogoLight.vue b/components/layout/full/logo/LogoLight.vue
new file mode 100644
index 0000000..c36eeaf
--- /dev/null
+++ b/components/layout/full/logo/LogoLight.vue
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/layout/full/vertical-header/AppsLink.vue b/components/layout/full/vertical-header/AppsLink.vue
new file mode 100644
index 0000000..345505b
--- /dev/null
+++ b/components/layout/full/vertical-header/AppsLink.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ item.title }}
+
{{ item.subtext }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/layout/full/vertical-header/Navigations.vue b/components/layout/full/vertical-header/Navigations.vue
new file mode 100644
index 0000000..c08f130
--- /dev/null
+++ b/components/layout/full/vertical-header/Navigations.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+ Apps
+
+
+
+
+
+
+
+
+
+
+
+
+ Frequently Asked Questions
+
+ Check
+
+
+
+
+
+
+
+
+
Quick Links
+
+
+
+
+
+
+
+ Chat
+ Calendar
+ Email
+
diff --git a/components/layout/full/vertical-header/RightMobileSidebar.vue b/components/layout/full/vertical-header/RightMobileSidebar.vue
new file mode 100644
index 0000000..e986bd2
--- /dev/null
+++ b/components/layout/full/vertical-header/RightMobileSidebar.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
Navigation
+
+
+
Quick Links
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 4c150e1..f5fcf54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
"devDependencies": {
"@sidebase/nuxt-auth": "^0.10.1",
"@sidebase/nuxt-session": "^0.2.8",
+ "axios-mock-adapter": "^2.1.0",
"nuxt": "3.16.2"
}
},
@@ -7146,6 +7147,44 @@
"proxy-from-env": "^1.1.0"
}
},
+ "node_modules/axios-mock-adapter": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-2.1.0.tgz",
+ "integrity": "sha512-AZUe4OjECGCNNssH8SOdtneiQELsqTsat3SQQCWLPjN436/H+L9AjWfV7bF+Zg/YL9cgbhrz5671hoh+Tbn98w==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "fast-deep-equal": "^3.1.3",
+ "is-buffer": "^2.0.5"
+ },
+ "peerDependencies": {
+ "axios": ">= 0.17.0"
+ }
+ },
+ "node_modules/axios-mock-adapter/node_modules/is-buffer": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+ "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/b4a": {
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -9616,8 +9655,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/fast-fifo": {
"version": "1.3.2",
diff --git a/package.json b/package.json
index 3b586cc..17b3574 100644
--- a/package.json
+++ b/package.json
@@ -37,9 +37,10 @@
"devDependencies": {
"@sidebase/nuxt-auth": "^0.10.1",
"@sidebase/nuxt-session": "^0.2.8",
+ "axios-mock-adapter": "^2.1.0",
"nuxt": "3.16.2"
},
"overrides": {
"nth-check": "2.1.1"
}
-}
\ No newline at end of file
+}
diff --git a/theme/DarkTheme.ts b/theme/DarkTheme.ts
new file mode 100644
index 0000000..4e9a3dc
--- /dev/null
+++ b/theme/DarkTheme.ts
@@ -0,0 +1,213 @@
+import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
+
+const DARK_BLUE_THEME: ThemeTypes = {
+ name: 'DARK_BLUE_THEME',
+ dark: true,
+ variables: {
+ 'border-color': '#333F55',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#635BFF',
+ secondary: '#14E9E2',
+ info: '#3CACC8',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#29305F',
+ lightsecondary: '#194D59',
+ lightsuccess: '#1B3C48',
+ lighterror: '#4B313D',
+ lightinfo: '#274A60',
+ lightwarning: '#4D3A2A',
+ textPrimary: '#EAEFF4',
+ textSecondary: '#7C8FAC',
+ borderColor: '#333F55',
+ containerBg: '#1A2537',
+ background: '#1F2A3D',
+ hoverColor: '#333f55',
+ surface: '#1a2537',
+ grey100: '#333F55',
+ grey200: '#465670',
+ light: '#1F2A3D',
+ muted: '#babfc3',
+ darkgray: '#404A5A'
+ }
+};
+
+const DARK_AQUA_THEME: ThemeTypes = {
+ name: 'DARK_AQUA_THEME',
+ dark: true,
+ variables: {
+ 'border-color': '#333F55',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#0074BA',
+ secondary: '#47D7BC',
+ info: '#3CACC8',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#103247',
+ lightsecondary: '#0C4339',
+ lightsuccess: '#1B3C48',
+ lighterror: '#4B313D',
+ lightinfo: '#274A60',
+ lightwarning: '#4D3A2A',
+ textPrimary: '#EAEFF4',
+ textSecondary: '#7C8FAC',
+ borderColor: '#333F55',
+ containerBg: '#1A2537',
+ background: '#1F2A3D',
+ hoverColor: '#333f55',
+ surface: '#1a2537',
+ grey100: '#333F55',
+ grey200: '#465670',
+ light: '#1F2A3D',
+ muted: '#babfc3',
+ darkgray: '#404A5A'
+ }
+};
+
+const DARK_PURPLE_THEME: ThemeTypes = {
+ name: 'DARK_PURPLE_THEME',
+ dark: true,
+ variables: {
+ 'border-color': '#333F55',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#763EBD',
+ secondary: '#95CFD5',
+ info: '#3CACC8',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#26153C',
+ lightsecondary: '#09454B',
+ lightsuccess: '#1B3C48',
+ lighterror: '#4B313D',
+ lightinfo: '#274A60',
+ lightwarning: '#4D3A2A',
+ textPrimary: '#EAEFF4',
+ textSecondary: '#7C8FAC',
+ borderColor: '#333F55',
+ containerBg: '#1A2537',
+ background: '#1F2A3D',
+ hoverColor: '#333f55',
+ surface: '#1a2537',
+ grey100: '#333F55',
+ grey200: '#465670',
+ light: '#1F2A3D',
+ muted: '#babfc3',
+ darkgray: '#404A5A'
+ }
+};
+
+const DARK_GREEN_THEME: ThemeTypes = {
+ name: 'DARK_GREEN_THEME',
+ dark: true,
+ variables: {
+ 'border-color': '#333F55',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#0A7EA4',
+ secondary: '#CCDA4E',
+ info: '#3CACC8',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#05313F',
+ lightsecondary: '#282917',
+ lightsuccess: '#1B3C48',
+ lighterror: '#4B313D',
+ lightinfo: '#274A60',
+ lightwarning: '#4D3A2A',
+ textPrimary: '#EAEFF4',
+ textSecondary: '#7C8FAC',
+ borderColor: '#333F55',
+ containerBg: '#1A2537',
+ background: '#1F2A3D',
+ hoverColor: '#333f55',
+ surface: '#1a2537',
+ grey100: '#333F55',
+ grey200: '#465670',
+ light: '#1F2A3D',
+ muted: '#babfc3',
+ darkgray: '#404A5A'
+ }
+};
+
+const DARK_CYAN_THEME: ThemeTypes = {
+ name: 'DARK_CYAN_THEME',
+ dark: true,
+ variables: {
+ 'border-color': '#333F55',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#01C0C8',
+ secondary: '#FB9678',
+ info: '#3CACC8',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#003638',
+ lightsecondary: '#40241C',
+ lightsuccess: '#1B3C48',
+ lighterror: '#4B313D',
+ lightinfo: '#274A60',
+ lightwarning: '#4D3A2A',
+ textPrimary: '#EAEFF4',
+ textSecondary: '#7C8FAC',
+ borderColor: '#333F55',
+ containerBg: '#1A2537',
+ background: '#1F2A3D',
+ hoverColor: '#333f55',
+ surface: '#1a2537',
+ grey100: '#333F55',
+ grey200: '#465670',
+ light: '#1F2A3D',
+ muted: '#babfc3',
+ darkgray: '#404A5A'
+ }
+};
+
+const DARK_ORANGE_THEME: ThemeTypes = {
+ name: 'DARK_ORANGE_THEME',
+ dark: true,
+ variables: {
+ 'border-color': '#333F55',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#FA896B',
+ secondary: '#0074BA',
+ info: '#3CACC8',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#402E32',
+ lightsecondary: '#082E45',
+ lightsuccess: '#1B3C48',
+ lighterror: '#4B313D',
+ lightinfo: '#274A60',
+ lightwarning: '#4D3A2A',
+ textPrimary: '#EAEFF4',
+ textSecondary: '#7C8FAC',
+ borderColor: '#333F55',
+ containerBg: '#1A2537',
+ background: '#1F2A3D',
+ hoverColor: '#333f55',
+ surface: '#1a2537',
+ grey100: '#333F55',
+ grey200: '#465670',
+ light: '#1F2A3D',
+ muted: '#babfc3',
+ darkgray: '#404A5A'
+ }
+};
+
+export { DARK_BLUE_THEME, DARK_AQUA_THEME, DARK_ORANGE_THEME, DARK_PURPLE_THEME, DARK_GREEN_THEME, DARK_CYAN_THEME };
\ No newline at end of file
diff --git a/theme/LightTheme.ts b/theme/LightTheme.ts
index a33c9ff..de242b5 100644
--- a/theme/LightTheme.ts
+++ b/theme/LightTheme.ts
@@ -1,5 +1,4 @@
import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
-
const BLUE_THEME: ThemeTypes = {
name: 'BLUE_THEME',
dark: false,
@@ -8,32 +7,206 @@ const BLUE_THEME: ThemeTypes = {
'border-opacity': 1
},
colors: {
- primary: '#06ac8b',
- secondary: '#14E9E2',
+ primary: '#635BFF',
+ secondary: '#16CDC7',
info: '#46caeb',
success: '#36c76c',
warning: '#ffd648',
error: '#ff6692',
- lightprimary: '#D5D3FC',
- lightsecondary: '#D0FBF9',
+ lightprimary: '#DDDBFF',
+ lightsecondary: '#A6F7F5',
lightsuccess: '#E1F7E9',
- lighterror: '#FFD9E4',
+ lighterror: '#FFCCDB',
lightinfo: '#DAF4FB',
- lightwarning: '#FFF7DA',
- textPrimary: '#0a2540',
- textSecondary: '#7b8893',
+ lightwarning: '#FFF9E5',
+ textPrimary: '#29343D',
+ textSecondary: '#98A4AE',
borderColor: '#e0e6eb',
containerBg: '#ffffff',
background: '#F4F7FB',
hoverColor: '#f6f9fc',
surface: '#fff',
- grey100: '#EAEFF4',
+ grey100: '#F6F7F9',
grey200: '#29343d',
+ darkgray: '#0a2540',
light: '#EFF4FA',
muted:'#526b7a'
}
};
+const AQUA_THEME: ThemeTypes = {
+ name: 'AQUA_THEME',
+ dark: false,
+ variables: {
+ 'border-color': '#e0e6eb',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#0074BA',
+ secondary: '#47D7BC',
+ info: '#539BFF',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#EFF9FF',
+ lightsecondary: '#EDFBF7',
+ lightsuccess: '#E6FFFA',
+ lighterror: '#FDEDE8',
+ lightinfo: '#EBF3FE',
+ lightwarning: '#FEF5E5',
+ textPrimary: '#29343D',
+ textSecondary: '#98A4AE',
+ borderColor: '#e5eaef',
+ containerBg: '#ffffff',
+ background: '#F4F7FB',
+ hoverColor: '#f6f9fc',
+ surface: '#fff',
+ grey100: '#F6F7F9',
+ grey200: '#29343d',
+ darkgray: '#0a2540',
+ light: '#EFF4FA',
+ muted:'#526b7a'
+ }
+};
+const PURPLE_THEME: ThemeTypes = {
+ name: 'PURPLE_THEME',
+ dark: false,
+ variables: {
+ 'border-color': '#e0e6eb',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#763EBD',
+ secondary: '#95CFD5',
+ info: '#539BFF',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#F2ECF9',
+ lightsecondary: '#EDF8FA',
+ lightsuccess: '#E6FFFA',
+ lighterror: '#FDEDE8',
+ lightinfo: '#EBF3FE',
+ lightwarning: '#FEF5E5',
+ textPrimary: '#29343D',
+ textSecondary: '#98A4AE',
+ borderColor: '#e5eaef',
+ containerBg: '#ffffff',
+ background: '#F4F7FB',
+ hoverColor: '#f6f9fc',
+ surface: '#fff',
+ grey100: '#F6F7F9',
+ grey200: '#29343d',
+ darkgray: '#0a2540',
+ light: '#EFF4FA',
+ muted:'#526b7a'
+ }
+};
-export { BLUE_THEME};
+const GREEN_THEME: ThemeTypes = {
+ name: 'GREEN_THEME',
+ dark: false,
+ variables: {
+ 'border-color': '#e0e6eb',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#0A7EA4',
+ secondary: '#CCDA4E',
+ info: '#539BFF',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#F4F9FB',
+ lightsecondary: '#FAFBEF',
+ lightsuccess: '#E6FFFA',
+ lighterror: '#FDEDE8',
+ lightinfo: '#EBF3FE',
+ lightwarning: '#FEF5E5',
+ textPrimary: '#29343D',
+ textSecondary: '#98A4AE',
+ borderColor: '#e5eaef',
+ containerBg: '#ffffff',
+ background: '#F4F7FB',
+ hoverColor: '#f6f9fc',
+ surface: '#fff',
+ grey100: '#F6F7F9',
+ grey200: '#29343d',
+ darkgray: '#0a2540',
+ light: '#EFF4FA',
+ muted:'#526b7a'
+ }
+};
+
+const CYAN_THEME: ThemeTypes = {
+ name: 'CYAN_THEME',
+ dark: false,
+ variables: {
+ 'border-color': '#e0e6eb',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#01C0C8',
+ secondary: '#FB9678',
+ info: '#539BFF',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#EBF9FA',
+ lightsecondary: '#FFF5F2',
+ lightsuccess: '#E6FFFA',
+ lighterror: '#FDEDE8',
+ lightinfo: '#EBF3FE',
+ lightwarning: '#FEF5E5',
+ textPrimary: '#29343D',
+ textSecondary: '#98A4AE',
+ borderColor: '#e5eaef',
+ containerBg: '#ffffff',
+ background: '#F4F7FB',
+ hoverColor: '#f6f9fc',
+ surface: '#fff',
+ grey100: '#F6F7F9',
+ grey200: '#29343d',
+ darkgray: '#0a2540',
+ light: '#EFF4FA',
+ muted:'#526b7a'
+ }
+};
+
+const ORANGE_THEME: ThemeTypes = {
+ name: 'ORANGE_THEME',
+ dark: false,
+ variables: {
+ 'border-color': '#e0e6eb',
+ 'border-opacity': 1
+ },
+ colors: {
+ primary: '#FA896B',
+ secondary: '#0074BA',
+ info: '#539BFF',
+ success: '#13DEB9',
+ warning: '#FFAE1F',
+ error: '#ff6692',
+ lightprimary: '#FBF2EF',
+ lightsecondary: '#EFF9FF',
+ lightsuccess: '#E6FFFA',
+ lighterror: '#FDEDE8',
+ lightinfo: '#EBF3FE',
+ lightwarning: '#FEF5E5',
+ textPrimary: '#29343D',
+ textSecondary: '#98A4AE',
+ borderColor: '#e5eaef',
+ containerBg: '#ffffff',
+ background: '#F4F7FB',
+ hoverColor: '#f6f9fc',
+ surface: '#fff',
+ grey100: '#F6F7F9',
+ grey200: '#29343d',
+ darkgray: '#0a2540',
+ light: '#EFF4FA',
+ muted:'#526b7a'
+ }
+};
+
+export { BLUE_THEME, AQUA_THEME, ORANGE_THEME, PURPLE_THEME, GREEN_THEME, CYAN_THEME };
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a746f2a..b65acbd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,6 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
- "extends": "./.nuxt/tsconfig.json"
+ "extends": "./.nuxt/tsconfig.json",
+
}
+
diff --git a/types/HeaderTypes.ts b/types/HeaderTypes.ts
new file mode 100644
index 0000000..af64626
--- /dev/null
+++ b/types/HeaderTypes.ts
@@ -0,0 +1,38 @@
+
+type notificationType = {
+ avatar: string;
+ title: string;
+ subtitle: string;
+ color:string;
+ time:string;
+};
+
+type profileType = {
+ title: string;
+ href: string;
+ badge:boolean;
+};
+
+type languageType = {
+ avatar: string;
+ title: string;
+ subtext: string;
+ value: string;
+};
+
+type appsLinkType = {
+ avatar: string;
+ title: string;
+ subtext: string;
+ color:string;
+ href: string;
+};
+
+
+type searchType = {
+ title: string;
+ href: string;
+};
+
+
+export type { notificationType, profileType, languageType, appsLinkType, searchType }
\ No newline at end of file
diff --git a/types/themeTypes/ThemeType.ts b/types/themeTypes/ThemeType.ts
index f25ec93..ef8e231 100644
--- a/types/themeTypes/ThemeType.ts
+++ b/types/themeTypes/ThemeType.ts
@@ -26,5 +26,6 @@ export type ThemeTypes = {
grey200?: string;
light?:string;
muted?:string;
+ darkgray?: string;
};
};
diff --git a/utils/axios.ts b/utils/axios.ts
new file mode 100644
index 0000000..06079fb
--- /dev/null
+++ b/utils/axios.ts
@@ -0,0 +1,16 @@
+/**
+ * axios setup to use mock service
+ */
+
+import axios from "axios";
+
+const axiosServices = axios.create();
+
+// interceptor for http
+axiosServices.interceptors.response.use(
+ (response) => response,
+ (error) =>
+ Promise.reject((error.response && error.response.data) || "Wrong Services")
+);
+
+export default axiosServices;