update new sidebar (70 %)

src/layouts/side-nav-outer-toolbar.vue

@@ -9,7 +9,6 @@
     <dx-drawer
       class="layout-body"
       position="before"
-      template="menuTemplate"
       v-model:opened="menuOpened"
       :opened-state-mode="drawerOptions.menuMode"
       :reveal-mode="drawerOptions.menuRevealMode"
@@ -18,16 +17,18 @@
       :shading="drawerOptions.shaderEnabled"
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
-      <dx-scroll-view ref="scrollViewRef" class="with-footer">
-        <slot />
-        <slot name="footer" />
-      </dx-scroll-view>
-      <template #menuTemplate>
-        <side-nav-menu
-          :compact-mode="!menuOpened"
-          @click="handleSideBarClick"
-        />
-      </template>
+      <div class="flex">
+        <div class="sidebar">
+          <side-nav-menu
+            :compact-mode="!menuOpened"
+            @click="handleSideBarClick"
+          />
+        </div>
+        <dx-scroll-view ref="scrollViewRef" class="with-footer">
+          <slot />
+          <slot name="footer" />
+        </dx-scroll-view>
+      </div>
     </dx-drawer>
   </div>
 </template>
@@ -122,6 +123,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../dx-styles.scss";
+
 .side-nav-outer-toolbar {
   flex-direction: column;
   display: flex;
@@ -132,4 +135,14 @@ export default {
 .layout-header {
   z-index: 1501;
 }
+
+.flex {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.sidebar {
+  width: $side-bar-width;
+}
 </style>