-
-
-
-
-
-
+
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 58c713e..5eda04d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -5,6 +5,7 @@ import {
DoorArrowRight20Regular as AuthIcon,
CheckmarkStarburst16Regular as BrandsIcon,
Folder32Regular as CategoryIcon,
+ Dismiss20Filled as CloseIcon,
Color24Regular as ColorsIcon,
People28Regular as CustomersIcon,
Home32Regular as DashboardIcon,
@@ -22,14 +23,15 @@ import {
import { storeToRefs } from 'pinia'
const layoutStore = useLayoutStore()
-const { collapsed, forceCollapsed } = storeToRefs(layoutStore)
+const { collapsed, forceCollapsed, mobileMode, mobileMenuClosed } = storeToRefs(layoutStore)
const { t } = useI18n()
const { renderIcon, renderLabel } = useRender()
-const isHovered = ref(false)
-
const effectiveCollapsed = computed(() => {
- return (collapsed.value || forceCollapsed.value) && !isHovered.value
+ if (mobileMode.value)
+ return mobileMenuClosed.value
+
+ return (collapsed.value || forceCollapsed.value)
})
const menuOptions: MenuOption[] = [
@@ -137,31 +139,51 @@ const menuOptions: MenuOption[] = [
const route = useRoute()
const selectedMenuKey = ref('dashboard')
const menuRef = ref
+ 
+
+
+
+
+
+
+
+
+
+
- ('./common/filters/*.filter.ts', { eager: true, import: 'default' }))
.forEach(filters => Object.keys(filters).forEach(func => app.config.globalProperties.$filters[func] = filters[func]))
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, _, next) => {
const { t } = i18n.global
let title = t('title')
if (to.meta.title)
title = `${t(`menu.${to.meta.title}`)} - ${title}`
document.title = title
-
next()
})
diff --git a/src/store/layout.store.ts b/src/store/layout.store.ts
index f3a1234..00ab215 100644
--- a/src/store/layout.store.ts
+++ b/src/store/layout.store.ts
@@ -1,22 +1,33 @@
import { acceptHMRUpdate, defineStore } from 'pinia'
export const useLayoutStore = defineStore('layout', () => {
+ const { t, locale } = useI18n()
const collapsed = ref(false)
const forceCollapsed = ref(false)
+ const mobileMenuClosed = ref(true)
+ const mobileMode = ref(false)
const activeLanguage = ref('en')
const isRtl = ref(false)
- const { t, locale } = useI18n()
const themeColor = ref('#00ad4c')
const isDark = ref(false)
const isWelcomeShown = ref(false)
const dialogPlacement = computed(() => isRtl.value ? 'left' : 'right')
+
watch(() => useWindowSize().width.value, (newValue: number) => {
- forceCollapsed.value = newValue < 1000
- })
+ forceCollapsed.value = newValue <= 1024
+ mobileMode.value = newValue < 600
+ }, { immediate: true })
function toggleSidebar() {
- collapsed.value = !collapsed.value
+ if (mobileMode.value)
+ mobileMenuClosed.value = false
+ else
+ collapsed.value = !collapsed.value
+ }
+
+ function closeSidebar() {
+ mobileMenuClosed.value = true
}
function toggleTheme() {
@@ -38,20 +49,28 @@ export const useLayoutStore = defineStore('layout', () => {
isWelcomeShown.value = true
}
+ function $reset() {
+ mobileMode.value = false
+ }
+
return {
collapsed,
+ forceCollapsed,
+ mobileMode,
toggleSidebar,
toggleTheme,
isRtl,
activeLanguage,
changeLanguage,
- forceCollapsed,
isDark,
setThemeColor,
themeColor,
dialogPlacement,
isWelcomeShown,
showWelcome,
+ closeSidebar,
+ $reset,
+ mobileMenuClosed,
}
}, { persist: true })
diff --git a/src/styles/main.scss b/src/styles/main.scss
index aa111fd..c7dd020 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3,8 +3,14 @@
@use 'utils/animations';
:root {
- --sidebar-width: 20rem;
--primary-color: #00ad4c;
+ --background: #EEE;
+ --main-content: #FFF;
+}
+
+.dark {
+ --background: #283046;
+ --main-content: #222;
}
html,
@@ -25,8 +31,7 @@ body,
}
body {
- // background: url('~/assets/images/background.svg') no-repeat fixed;
- background-color: #EEE;
+ background-color: var(--background);
background-size: cover;
}
@@ -45,23 +50,9 @@ body {
}
-#nprogress {
- pointer-events: none;
-}
-
-#nprogress .bar {
- background: var(--primary-color);
- opacity: 0.75;
- position: fixed;
- z-index: 1031;
- top: 0;
- left: 0;
- width: 100%;
- height: 2px;
-}
.main-content {
- background: #fff;
+ background: var(--main-content);
border-radius: 10px;
min-height: calc(100vh - 1.6rem);
}
@@ -71,11 +62,6 @@ body {
}
.dark {
- body {
- background: #283046;
- // background: url('~/assets/images/background.svg') no-repeat #283046;
- }
-
.p-button.p-button-text.p-button-plain {
color: #e4e4e4;
}
@@ -85,56 +71,6 @@ body {
}
}
-.error-message {
- max-width: 520px;
- width: 100%;
- text-align: center;
- line-height: 1.4;
-
- h1 {
- font-family: montserrat, sans-serif;
- font-size: 146px;
- font-weight: 700;
- margin: 0;
-
- span.emoji {
- display: inline-block;
- width: 120px;
- height: 120px;
- background-image: url(@/assets/images/emoji.webp);
- background-size: cover;
- -webkit-transform: scale(1.4);
- -ms-transform: scale(1.4);
- transform: scale(1.4);
- }
- }
-
- h2 {
- font-family: montserrat, sans-serif;
- font-size: 22px;
- font-weight: 700;
- margin: 0;
- text-transform: uppercase;
-
- span {
- color: #726f5e;
- }
- }
-
- p {
- font-family: montserrat, sans-serif;
- color: #787878;
- font-weight: 300;
- padding: .8rem 0;
- }
-
-
-}
-.rtl {
- .error-message {
- h2, p {
- font-family: Shabnam;
- }
- }
-}
\ No newline at end of file
+@import url('./utils/_error.scss');
+@import url('./utils/_progress.scss');
\ No newline at end of file
diff --git a/src/styles/utils/_error.scss b/src/styles/utils/_error.scss
new file mode 100644
index 0000000..ac9abae
--- /dev/null
+++ b/src/styles/utils/_error.scss
@@ -0,0 +1,53 @@
+.error-message {
+ max-width: 520px;
+ width: 100%;
+ text-align: center;
+ line-height: 1.4;
+
+ h1 {
+ font-family: montserrat, sans-serif;
+ font-size: 146px;
+ font-weight: 700;
+ margin: 0;
+
+ span.emoji {
+ display: inline-block;
+ width: 120px;
+ height: 120px;
+ background-image: url(@/assets/images/emoji.webp);
+ background-size: cover;
+ -webkit-transform: scale(1.4);
+ -ms-transform: scale(1.4);
+ transform: scale(1.4);
+ }
+ }
+
+ h2 {
+ font-family: montserrat, sans-serif;
+ font-size: 22px;
+ font-weight: 700;
+ margin: 0;
+ text-transform: uppercase;
+
+ span {
+ color: #726f5e;
+ }
+ }
+
+ p {
+ font-family: montserrat, sans-serif;
+ color: #787878;
+ font-weight: 300;
+ padding: .8rem 0;
+ }
+}
+
+.rtl {
+ .error-message {
+
+ h2,
+ p {
+ font-family: Shabnam;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/utils/_override.scss b/src/styles/utils/_override.scss
index 1fba83a..7e86ebe 100644
--- a/src/styles/utils/_override.scss
+++ b/src/styles/utils/_override.scss
@@ -12,6 +12,9 @@
.p-sidebar {
background: transparent;
box-shadow: none;
+
+
+
}
.p-sidebar-left {
diff --git a/src/styles/utils/_progress.scss b/src/styles/utils/_progress.scss
new file mode 100644
index 0000000..1d5c538
--- /dev/null
+++ b/src/styles/utils/_progress.scss
@@ -0,0 +1,14 @@
+#nprogress {
+ pointer-events: none;
+}
+
+#nprogress .bar {
+ background: var(--primary-color);
+ opacity: 0.75;
+ position: fixed;
+ z-index: 1031;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 038f9ba..e5c71bd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,6 @@ import Layouts from 'vite-plugin-vue-layouts'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import VueI18n from '@intlify/unplugin-vue-i18n/vite'
-import VueDevTools from 'vite-plugin-vue-devtools'
import Unocss from 'unocss/vite'
import VueMacros from 'unplugin-vue-macros/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
@@ -43,10 +42,6 @@ export default defineConfig({
},
}),
- // VueRouter({
- // extensions: ['.vue'],
- // dts: 'src/typed-router.d.ts',
- // }),
Pages({
extensions: ['vue'],
importMode: 'async',
@@ -102,33 +97,6 @@ export default defineConfig({
// see uno.config.ts for config
Unocss(),
- // https://github.com/antfu/vite-plugin-pwa
- // VitePWA({
- // workbox: {
- // // cleanupOutdatedCaches: true,
- // // skipWaiting: true,
- // // clientsClaim: true,
- // },
- // registerType: 'prompt',
- // includeAssets: ['/favicon/favicon.ico'],
- // devOptions: {
- // enabled: true,
- // /* other options */
- // },
- // manifest: {
- // name: 'Yummy Admin',
- // short_name: 'YummyAdmin',
- // theme_color: '#459858',
- // icons: [
- // {
- // src: '/pwa-192x192.png',
- // sizes: '192x192',
- // type: 'image/png',
- // },
- // ],
- // },
- // }),
-
// https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
VueI18n({
runtimeOnly: true,
@@ -137,21 +105,9 @@ export default defineConfig({
include: [path.resolve(__dirname, 'locales/**')],
}),
- // partytownVite({
- // dest: path.join(__dirname, 'dist', '~partytown'),
- // }),
-
// https://github.com/webfansplz/vite-plugin-vue-devtools
- VueDevTools(),
+ // VueDevTools(),
],
- // https://github.com/vitest-dev/vitest
- // test: {
- // include: ['test/**/*.test.ts'],
- // environment: 'jsdom',
- // deps: {
- // inline: ['@vue', '@vueuse', 'vue-demi'],
- // },
- // },
define: { 'process.env': {} },
})
-
-
- - {{ t('title') }} -
+
+
+
+
+
+
+
+
+
+
+
+