Disable optimizer

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 4.1.0 (2024-07-29)
+
+-   Changed menu button location at topbar
+-   Add border to overlay menu
+-   Animation for mobile mask
+-   Fixed chart colors
+
+## 4.0.0 (2024-07-29)
+
+-   Updated to PrimeVue v4
+
 ## 3.10.0 (2024-03-11)
 
 **Migration Guide**

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sakai-vue",
-    "version": "4.0.0",
+    "version": "4.1.0",
     "scripts": {
         "dev": "vite",
         "build": "vite build",

src/assets/layout/_responsive.scss

@@ -22,6 +22,10 @@
                 height: 100vh;
                 border-top-left-radius: 0;
                 border-bottom-left-radius: 0;
+                border-right: 1px solid var(--surface-border);
+                transition:
+                    transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+                    left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
                 box-shadow:
                     0px 3px 5px rgba(0, 0, 0, 0.02),
                     0px 0px 2px rgba(0, 0, 0, 0.05),
@@ -77,6 +81,9 @@
             height: 100vh;
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
+            transition:
+                transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+                left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
         }
 
         .layout-mask {
@@ -97,7 +104,6 @@
 
             .layout-mask {
                 display: block;
-                animation: fadein var(--layout-section-transition-duration);
             }
         }
     }

src/assets/layout/_topbar.scss

@@ -71,7 +71,7 @@
     }
 
     .layout-menu-button {
-        margin-left: 2rem;
+        margin-right: 0.5rem;
     }
 
     .layout-topbar-menu-button {
@@ -97,24 +97,19 @@
 
 @media (max-width: 991px) {
     .layout-topbar {
+        padding: 0 2rem;
+
         .layout-topbar-logo-container {
             width: auto;
-            order: 2;
         }
 
         .layout-menu-button {
             margin-left: 0;
-            margin-right: 1rem;
+            margin-right: 0.5rem;
-            order: 1;
         }
 
         .layout-topbar-menu-button {
             display: inline-flex;
-            order: 4;
-        }
-
-        .layout-topbar-actions {
-            order: 3;
         }
 
         .layout-topbar-menu {

src/layout/AppLayout.vue

@@ -60,7 +60,7 @@ const isOutsideClicked = (event) => {
             </div>
             <app-footer></app-footer>
         </div>
-        <div class="layout-mask"></div>
+        <div class="layout-mask animate-fadein"></div>
     </div>
     <Toast />
 </template>

src/layout/AppTopbar.vue

@@ -8,6 +8,9 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 <template>
     <div class="layout-topbar">
         <div class="layout-topbar-logo-container">
+            <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
+                <i class="pi pi-bars"></i>
+            </button>
             <router-link to="/" class="layout-topbar-logo">
                 <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
@@ -31,10 +34,6 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
             </router-link>
         </div>
 
-        <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
-            <i class="pi pi-bars"></i>
-        </button>
-
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
                 <button type="button" class="layout-topbar-action" @click="toggleDarkMode">

src/views/Dashboard.vue

@@ -29,21 +29,21 @@ function setChartData() {
             {
                 type: 'bar',
                 label: 'Subscriptions',
-                backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
                 data: [4000, 10000, 15000, 4000],
                 barThickness: 32
             },
             {
                 type: 'bar',
                 label: 'Advertising',
-                backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
                 data: [2100, 8400, 2400, 7500],
                 barThickness: 32
             },
             {
                 type: 'bar',
                 label: 'Affiliate',
-                backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
                 data: [4100, 5200, 3400, 7400],
                 borderRadius: {
                     topLeft: 8,

vite.config.mjs

@@ -1,12 +1,15 @@
 import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite';
+import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 import vue from '@vitejs/plugin-vue';
 import Components from 'unplugin-vue-components/vite';
-import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    optimizeDeps: {
+        noDiscovery: true
+    },
     plugins: [
         vue(),
         Components({