Update visuals

assets/styles/layout/_content.scss

@@ -1,9 +1,10 @@
 .layout-content {
-    margin-left: 250px;
     padding-top: 5rem;
 
     .layout-content-inner {
         padding: 2rem 4rem;
+        display: flex;
+        gap: 4rem;
     }
 
     .card {

assets/styles/layout/_responsive.scss

@@ -8,6 +8,10 @@
         max-width: 1478px;
         margin: 0 auto;
     }
+
+    .layout-sidebar {
+        left: 200px;
+    } 
 }
 
 @media screen and (max-width: 991px) {

assets/styles/layout/_sidebar.scss

@@ -1,5 +1,5 @@
 .layout-sidebar {
-    position: fixed;
+    position: sticky;
     left: 0;
     top: 5rem;
     height: 100%;
@@ -8,7 +8,8 @@
     transition: transform .4s cubic-bezier(.05,.74,.2,.99);
     display: flex;
     flex-direction: column;
-    padding: 1.5rem 0 1rem 0;
+    padding: 0;
+    flex-shrink: 0;
 
     .logo {
         display: flex;
@@ -16,7 +17,7 @@
     }
 
     nav {
-        padding: 0 0 2rem 2rem;
+        padding: 0;
         margin: 0;
         flex-grow: 1;
         overflow-y: auto;

assets/styles/layout/_topbar.scss

@@ -4,6 +4,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    padding: 0 4rem;
     width: 100%;
     z-index: 1100;
     transition: background-color 1s;

layouts/default.vue

@@ -2,15 +2,15 @@
     <div class="layout-wrapper" :class="containerClass">
         <app-news v-if="$appState.newsActive" />
         <app-topbar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
-        <app-menu :active="sidebarActive" />
         <app-configurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
         <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
         <div class="layout-content">
             <div class="layout-content-inner">
+                <app-menu :active="sidebarActive" />
                 <slot></slot>
-                <app-footer />
             </div>
         </div>
+        <app-footer />
         <Toast />
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />