update new sidebar (70 %)

src/components/header-toolbar.vue

@@ -2,7 +2,7 @@
   <header class="header-component">
     <dx-toolbar class="header-toolbar" style="background-image: url('images/bg-header.jpg');">
       <dx-item
-        :visible="menuToggleEnabled"
+        :visible="false"
         location="before"
         css-class="menu-button"
       >
@@ -142,7 +142,7 @@ export default {
 }
 
 .header-title .dx-item-content {
-  padding: 0;
+  padding: 0 24px;
   margin: 0;
 }
 

src/components/side-nav-menu.vue

@@ -1,26 +1,31 @@
 <template>
   <div
-    class="dx-swatch-additional side-navigation-menu"
+    class="side-navigation-menu"
     @click="forwardClick"
   >
     <slot />
-    <div class="menu-container">
-      <dx-tree-view
-        ref="treeViewRef"
-        :items="menus"
-        key-expr="path"
-        selection-mode="single"
-        :focus-state-enabled="false"
-        expand-event="click"
-        @item-click="handleItemClick"
-        width="100%"
-      />
+    <div v-for="item in menus" :key="item.id" class="relative-view">
+      <img :src="item.icon" alt="icon" @click="handleIconClick(item.text)" :class="selectedMenus === item.text ? 'active-icons' : 'icons'">
+
+      <div ref="expandRef" v-if="item.text === selectedMenus" class="absolute-view">
+        <div class="expand-title">
+          <p>{{item.text}}</p>
+        </div>
+
+        <dx-scroll-view ref="scrollViewRef" :class="checkLength(item.items) ? 'expand-menu-height' : 'expand-menu'">
+          <div v-for="it in item.items" :key="it.id" class="no-wrap">
+            <p :class="route.path === it.path ? 'pointer-active' : 'pointer'" @click="handleItemClick(item.text,it.path)">
+              {{it.text}}
+            </p>
+          </div>
+        </dx-scroll-view>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import DxTreeView from "devextreme-vue/ui/tree-view";
+import DxScrollView from "devextreme-vue/scroll-view";
 import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 import { onMounted, ref, watch } from 'vue';
@@ -36,7 +41,12 @@ export default {
     const router = useRouter();
 
     const menus = ref("");
-    auth.getUser().then((e) => menus.value = e.data.menus);
+    const selectedMenus = ref("")
+
+    auth.getUser().then((e) => {
+      const listMenu = e.data.menus.filter((it) => it.text !== "Home")
+      menus.value = listMenu
+      });
     //console.log(navigation);
     console.log(menus);
 
@@ -48,29 +58,39 @@ export default {
       return {...item, expanded: isLargeScreen} 
     });
 
+    const expandRef = ref(null)
     const treeViewRef = ref(null);
+    const scrollViewRef = ref(null);
 
     function forwardClick (...args) {
       context.emit("click", args);
     }
 
-    function handleItemClick(e) {
-      if (!e.itemData.path || props.compactMode) {
+    function handleItemClick(text, path) {
+      if (!path) {
         return;
       }
-      router.push(e.itemData.path);
+      router.push(path);
+      selectedMenus.value = text
+    }
 
-      const pointerEvent = e.event;
-      pointerEvent.stopPropagation();
+    function handleIconClick(text) {
+      if(text === selectedMenus.value) {
+        selectedMenus.value = ""
+        return
+      }
+      selectedMenus.value = text 
     }
 
     function updateSelection () {
-      if (!treeViewRef.value || !treeViewRef.value.instance) {
-        return;
+      if(route.path === "/home") {
+        selectedMenus.value = "Home"
+        selectedMenus.value = ""
       }
+    }
 
-      treeViewRef.value.instance.selectItem(route.path);
-      treeViewRef.value.instance.expandItem(route.path);
+    function checkLength(it) {
+      return it.length > 4
     }
 
     onMounted(() => { 
@@ -105,11 +125,16 @@ export default {
       forwardClick,
       handleItemClick,
       updateSelection,
-      menus
+      menus,
+      route,
+      selectedMenus,
+      handleIconClick,
+      scrollViewRef,
+      checkLength,
+      expandRef
     };
-  },
-  components: {
-    DxTreeView
+  },components: {
+    DxScrollView
   }
 };
 </script>
@@ -117,95 +142,95 @@ export default {
 <style lang="scss">
 @import "../dx-styles.scss";
 @import "../themes/generated/variables.additional.scss";
+@import "../themes/generated/variables.base.scss";
 
 .side-navigation-menu {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
-  width: 250px !important;
+  width: $side-bar-width !important;
+  box-shadow: $base-shadow-color 4px 100px 10px 0px !important;
+  padding-top: 25px !important;
+  background-color: white;
+  padding-left: 9px;
+  
+  .relative-view {
+    position: relative;
 
-  .menu-container {
-    min-height: 100%;
-    display: flex;
-    flex: 1;
+    .icons {
+      border-radius: 4px !important;
+      width: $side-bar-icon-size !important;
+      height: $side-bar-icon-size !important;
+      border: 1px solid $base-border-color !important;
+      margin-bottom: 24px;
+      cursor: pointer;
+    }
 
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
+    .active-icons {
+      border-radius: 4px !important;
+      width: $side-bar-icon-size !important;
+      height: $side-bar-icon-size !important;
+      border: 1px solid $datagrid-columnchooser-item-color !important;
+      margin-bottom: 24px;
+      cursor: pointer;
+    }
+    
+    .absolute-view {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+      background: transparent;
+      left: $side-bar-expand-left;
+      width: $side-bar-expand-width;
 
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        padding-right: 0;
+        .pointer {
+          cursor: pointer;
+          width: 100%;
+          background: white;
+          padding: 4px 38px;
+          color: $base-text-color;
+        }
 
-        .dx-icon {
-          width: $side-panel-min-width !important;
+        .pointer-active {
+          cursor: pointer;
+          width: 100%;
+          background: white;
+          padding: 4px 38px;
+          color: $datagrid-columnchooser-item-color;
+        }
+
+        .expand-title {
+          border-radius: 0px 8px 0px 0px !important;
+          background: $datagrid-columnchooser-item-color;
           margin: 0 !important;
-        }
-      }
-      // ##
-
-      // ## Arrow customization
-      .dx-treeview-node {
-        padding: 0 0 !important;
-      }
-
-      .dx-treeview-toggle-item-visibility {
-        right: 10px;
-        left: auto;
-      }
-
-      .dx-rtl .dx-treeview-toggle-item-visibility {
-        left: 10px;
-        right: auto;
-      }
-      // ##
-
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level="1"] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+          color: white;
+          padding: 1px 22px;
+          font-size: 18px;
+          font-weight: 600;
         }
 
-        &[aria-level="2"] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
+        .expand-menu {
+          background: white;
+          margin-top: 0px !important;
+          padding: 8px 0px;
+          border-radius: 0px 0px 8px 0px !important;
+        }
+
+        .expand-menu-height {
+          background: white;
+          margin-top: 0px !important;
+          padding: 8px 0px;
+          border-radius: 0px 0px 8px 0px !important;
+          height: 200px;
+        }
+
+        .no-wrap {
+          white-space: nowrap;
         }
       }
-      // ##
-    }
-
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
-          }
-
-          &:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4);
-          }
-        }
-      }
-    }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container
-        .dx-treeview-node.dx-state-selected.dx-state-focused
-        > .dx-treeview-item
-        * {
-        color: inherit;
-      }
-    }
-    // ##
   }
+
+
 }
 </style>

src/dx-styles.scss

@@ -67,3 +67,8 @@
  }
 
 $side-panel-min-width: 60px;
+$side-bar-width: 76px;
+$side-bar-expand-left: 70px;
+$side-bar-icon-size: 56px;
+$side-bar-expand-width: 239px;
+$base-shadow-color: #3333331A;

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>