Update to PrimeVue v4

src/assets/layout/_config.scss

@@ -1,42 +0,0 @@
-.layout-config-button {
-    display: block;
-    position: fixed;
-    width: 3rem;
-    height: 3rem;
-    line-height: 3rem;
-    background: var(--primary-color);
-    color: var(--primary-color-text);
-    text-align: center;
-    top: 50%;
-    right: 0;
-    margin-top: -1.5rem;
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    transition: background-color var(--transition-duration);
-    overflow: hidden;
-    cursor: pointer;
-    z-index: 999;
-    box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
-
-    i {
-        font-size: 2rem;
-        line-height: inherit;
-        transform: rotate(0deg);
-        transition: transform 1s;
-    }
-
-    &:hover {
-        background: var(--primary-400);
-    }
-}
-
-.layout-config-sidebar {
-    &.p-sidebar {
-        .p-sidebar-content {
-            padding-left: 2rem;
-            padding-right: 2rem;
-        }
-    }
-}

src/assets/layout/_topbar.scss

@@ -147,3 +147,62 @@
         }
     }
 }
+
+.config-panel {
+    position: absolute;
+    top: calc(100% + 2px);
+    right: 0;
+    width: 16rem;
+    padding: .75rem;
+    background-color: var(--overlay-background);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    transform-origin: top;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    
+    .config-panel-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .config-panel-label {
+        font-size: .875rem;
+        color: var(--text-secondary-color);
+        font-weight: 600;
+        line-height: 1;
+    }
+
+    .config-panel-colors {
+        > div {
+            padding-top: .5rem;
+            display: flex;
+            gap: .5rem;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
+            button {
+                border: none;
+                width: 1.25rem;
+                height: 1.25rem;
+                border-radius: 50%;
+                padding: 0;
+                cursor: pointer;
+                outline-color: transparent;
+                outline-width: 2px;
+                outline-style: solid;
+                outline-offset: 1px;
+
+                &.active-color {
+                    outline-color: var(--primary-color);
+                }
+            }
+        }
+    }
+
+    .config-panel-settings {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}

src/assets/layout/layout.scss

@@ -1,12 +1,11 @@
 @import './_variables';
-@import "./_mixins";
-@import "./_preloading";
-@import "./_main";
-@import "./_topbar";
-@import "./_menu";
-@import "./_config";
-@import "./_content";
-@import "./_footer";
-@import "./_responsive";
-@import "./_utils";
-@import "./_typography";
+@import './_mixins';
+@import './_preloading';
+@import './_main';
+@import './_topbar';
+@import './_menu';
+@import './_content';
+@import './_footer';
+@import './_responsive';
+@import './_utils';
+@import './_typography';

src/assets/styles.scss

@@ -1,12 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-
-$gutter: 1rem; //for primeflex grid system
 @import '@/assets/layout/layout.scss';
-
-/* PrimeVue */
-// @import 'primevue/resources/primevue.min.css'; // version deplicated. You must open the command line if you are using < 3.29.00
-@import 'primeflex/primeflex.scss';
 @import 'primeicons/primeicons.css';
-
-/* Demos */
 @import '@/assets/demo/demo.scss';
+

src/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;