Updated

.gitignore

@@ -7,7 +7,11 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+# dependencies
+/node_modules
+package-lock.json
+yarn.lock
+
 .DS_Store
 dist
 dist-ssr

package.json

@@ -9,9 +9,9 @@
     },
     "dependencies": {
         "chart.js": "3.3.2",
-        "primeflex": "^3.2.1",
+        "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
-        "primevue": "3.28.0",
+        "primevue": "3.30.2",
         "vue": "^3.2.41",
         "vue-router": "^4.1.5"
     },
@@ -25,4 +25,4 @@
         "sass": "^1.55.0",
         "vite": "^4.2.1"
     }
-}
+}

src/assets/demo/code.scss

@@ -0,0 +1,15 @@
+pre.app-code {
+    background-color: var(--surface-ground);
+    margin: 0 0 1rem 0;
+    padding: 0;
+    border-radius: var(--border-radius);
+    overflow: auto;
+
+    code {
+        color: var(--surface-900);
+        padding: 1rem;
+        line-height: 1.5;
+        display: block;
+        font-family: monaco, Consolas, monospace;
+    }
+}

src/assets/demo/demo.scss

@@ -0,0 +1,2 @@
+@import './flags/flags.css';
+@import './code.scss';

src/assets/layout/_config.scss

@@ -0,0 +1,44 @@
+.layout-wrapper {
+    .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;
+            }
+        }
+    }
+}