Change button location, fixed charts on mobile

src/assets/layout/_responsive.scss

@@ -22,6 +22,7 @@
                 height: 100vh;
                 border-top-left-radius: 0;
                 border-bottom-left-radius: 0;
+                border-right: 1px solid var(--surface-border);
                 box-shadow:
                     0px 3px 5px rgba(0, 0, 0, 0.02),
                     0px 0px 2px rgba(0, 0, 0, 0.05),

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;
-            order: 1;
         }
 
         .layout-topbar-menu-button {
             display: inline-flex;
-            order: 4;
-        }
-
-        .layout-topbar-actions {
-            order: 3;
         }
 
         .layout-topbar-menu {

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,