From 89102b38eb86ec720b311e627de9827e024cb214 Mon Sep 17 00:00:00 2001
From: Ruslan Semak <ruslan.semack1501@gmail.com>
Date: Tue, 22 Apr 2025 15:33:59 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=92=D1=81=D1=91=20=D0=B5=D1=89=D1=91?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D0=B1=D0=BB=D0=B5=D0=BC=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../themes/default/components/nav-sidebar.vue | 82 ++++++-------------
 1 file changed, 24 insertions(+), 58 deletions(-)

diff --git a/client/themes/default/components/nav-sidebar.vue b/client/themes/default/components/nav-sidebar.vue
index f3a778c4..fd69594d 100644
--- a/client/themes/default/components/nav-sidebar.vue
+++ b/client/themes/default/components/nav-sidebar.vue
@@ -14,7 +14,7 @@
         depressed
         :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
         style='flex: 1 1 100%;'
-        @click='switchMode(`tree`)'
+        @click='switchMode(`browse`)'
         )
         v-icon(left) mdi-file-tree
         .body-2.text-none {{$t('common:sidebar.browse')}}
@@ -70,10 +70,13 @@
         v-icon(v-else-if="open") mdi-folder-open
         v-icon(v-else) mdi-folder
       template(v-slot:label="{ item }")
-        div(class='tree-item' :class="{ 'tree-item-link': !item.children }")
-          a(v-if="!item.children" :href="'/'+item.locale+'/'+item.path" class='tree-item-link')
-            span {{item.name}}
-          span(v-else) {{item.name}}
+        a.d-flex.align-center(
+          v-if="!item.children"
+          :href="'/'+item.locale+'/'+item.path"
+          style="width: 100%; text-decoration: none; color: inherit;"
+        )
+          span {{item.name}}
+        span(v-else) {{item.name}}
 
     //-> Browse
     v-list.py-2(v-else-if='currentMode === `browse`', dense, :class='color', :dark='dark')
@@ -320,7 +323,7 @@ export default {
       this.treeItems = children.map(item => this.pageItem2TreeItem(item, 0))
       this.checkTreeDefaultOpen(this.treeItems, 0)
     },
-    async checkTreeDefaultOpen(items) {
+    checkTreeDefaultOpen(items) {
       const item = items.find(item => item.children && this.path.startsWith(item.path))
       if (item) {
         setTimeout(() => {
@@ -365,11 +368,12 @@ export default {
     }
     if (this.navMode === 'STATIC') {
       this.currentMode = 'custom'
-    // } else if (this.navMode === 'NEWTREE') {
-    //   this.currentMode = 'tree'
+    } else if (this.navMode === 'NEWTREE') {
+      this.currentMode = 'tree'
     } else {
       this.currentMode = window.localStorage.getItem('navPref') || 'custom'
     }
+
     if (this.currentMode === 'browse') {
       this.loadFromCurrentPath()
     }
@@ -381,63 +385,25 @@ export default {
 </script>
 
 <style lang="scss">
+.v-treeview {
+  .v-treeview-node {
+    &__root {
+      padding: 0;
+    }
 
-.v-treeview{
-  .tree-item {
-    width: 100%;
-    padding: 8px 0;
-    font-weight: 500;
-    line-height: 1rem;
-    font-size: 1rem;
-  }
-
-  .tree-item-link {
-    display: block;
-    width: 100%;
-    text-decoration: none;
-    color: inherit;
+    &__content {
+      margin: 0;
+      width: 100%;
+    }
   }
 
-  .tree-item-link a {
-    display: block;
+  a {
+    display: flex;
+    align-items: center;
     width: 100%;
     padding: 8px 16px;
-    margin: -8px 0;
     text-decoration: none;
     color: inherit;
   }
-
-  //.tree-item {
-  //  width: 100%;
-  //  padding: 8px 0;
-  //  font-weight: 500;
-  //  line-height: 1rem;
-  //  font-size: 0.8rem;
-  //}
-  //
-  //.tree-item-link {
-  //  display: block;
-  //  width: 100%;
-  //  text-decoration: none;
-  //  color: inherit;
-  //}
-  //
-  //.tree-item-link a {
-  //  display: block;
-  //  width: 100%;
-  //  padding: 8px 16px;
-  //  margin: -8px 0;
-  //  text-decoration: none;
-  //  color: inherit;
-  //}
-  //
-  //a {
-  //  text-decoration: none;
-  //}
-  //&.theme--dark{
-  //  a {
-  //    color: white;
-  //  }
-  //}
 }
 </style>