[ADD] nav active 기능 개선

- 페이지 로드 시 nav 활성화
- 'tree' component 템플릿 구조 변경(v-list 삭제, sub-group 적용 등)

docs-front/assets/scss/guide.scss

@@ -177,23 +177,17 @@
   .navigation-wrap {
     overflow-x: hidden;
     border-right:1px solid rgba(0,0,0,0.05) !important;
+    
     .v-list-item{
       * {
         font-size: 14px !important;
       }
-      &.active{
+      &.active, &.v-list-item--active{
         *{
           font-weight: bold !important;
           color: #1E88E5;
         }
-        &.theme--dark{
-          background-color: rgba(128,128,128,0.07) !important;
-        }
-        &.theme--light{
-          background-color: rgba(128,128,128,0.07) !important;
-        }
-      }
-      &::before{
+        background-color: rgba(128,128,128,0.07) !important;
       }
     }
     

docs-front/components/tree.vue

 <template>
-  <div v-if="items">
-    <v-list
+  <div>
+    <div
       v-for="(item, i) in items"
       :key="`guide-${item.title}-${i}`"
       :class="depth > 1 ? `ml-${depth*2}` : ''"
@@ -9,25 +9,29 @@
       <v-list-item
         v-if="item.children.length === 0"
         @click="clickChildEvent(item)"
-        v-model="item.active"
         :ripple="false"
-        active-class="active"
-        :style="isActiveMenu(item.id) ? 'border-left:2px solid #1E88E5;' : 'border-left:1px solid rgba(0,0,0,0.15);'"
+        :class="isActiveMenu(item.id) ? 'active' : ''"
+        :style="isActiveMenu(item.id) ? 'border-left: 2px solid #1E88E5;' : 'border-left: 1px solid rgba(0,0,0,0.15);'"
       > 
         <v-list-item-title v-text="item.title" />
       </v-list-item>
 
       <v-list-group
         v-else
-        :ripple="false"
         v-model="item.active"
-        active-class="active"
-        :style="isActiveMenu(item.id) ? 'border-left:2px solid #1E88E5;' : 'border-left:1px solid rgba(0,0,0,0.15);'"
+        :ripple="false"
+        :class="isActiveMenu(item.id) ? 'active' : ''"
+        :sub-group="depth > 1 ? true : false"
+        :style="isActiveMenu(item.id) ? 'border-left: 2px solid #1E88E5;' : 'border-left: 1px solid rgba(0,0,0,0.15);'"
+        prepend-icon=""
       >
+        <template v-slot:appendIcon>
+          <v-icon>mdi-chevron-down</v-icon>
+        </template>
+              
         <template v-slot:activator>
           <v-list-item-content
             v-if="item"
-            v-model="item.active"
             @click="clickParentEvent(item)"
             active-class="active"
           >
@@ -42,8 +46,7 @@
           @clickChildEvent="clickChildEvent"
         />
       </v-list-group>
-    </v-list>
-  
+    </div>
   </div>
 </template>
  

docs-front/layouts/default.vue

@@ -61,14 +61,15 @@
             <v-list-item-title>홈</v-list-item-title>
           </v-list-item>
         </v-list>
-        
-        <tree
-          v-if="guideIndex"
-          :items="guideIndex"
-          @clickParentEvent="openGuide"
-          @clickChildEvent="openGuide"
-        />
-
+      
+        <v-list v-if="guideIndex && !loadingPageList">
+          <tree
+            :items="guideIndex"
+            @clickParentEvent="openGuide"
+            @clickChildEvent="openGuide"
+          />
+        </v-list>
+          
         <template v-slot:prepend>
           <v-row no-gutters align="center" justify="center"  @click="logoEvent()" class=" modile-logo-wrap my-4">
             <NuxtLink to="/" >
@@ -203,7 +204,6 @@ export default{
     currentNavIndex: 0,
     keyword:'',
     drawer:true,
-    guideTitle:'',
     clipped: false,
     rawIndexList:[],
     guideIndex:[],
@@ -247,23 +247,6 @@ export default{
       this.$router.push('/' + guide.id)
     },
 
-    // async getGuideIndex() {
-    //   this.loadingPageList = true
-      
-    //   await this.$axios.get('http://localhost:5000/api/index')
-    //   .then(res => {
-    //     this.guideIndex = res.data
-    //     // console.log('guideIndex : ', res.data)
-    //   })
-    //   .catch(err => {
-    //     console.log(err)
-    //   })
-
-      
-    //   this.loadingPageList = false
-    //   this.activeGuideTreeIndex()
-    // },
-    
     async getGuideIndex(){
       this.loadingPageList = true
 
@@ -299,6 +282,7 @@ export default{
         console.log(err)
       })
       
+      this.activeNav()
       this.loadingPageList = false
       // this.activeGuideTreeIndex(this.guideIndex)
     },
@@ -481,6 +465,34 @@ export default{
       coloredText.innerHTML = this.keyword
       coloredText.style.color = '#1e88e5'
       return text.replaceAll(this.keyword, container.innerHTML)
+    },
+    activeNav(){
+      let path = ''
+      this.rawIndexList.forEach(guide => {
+        if(guide.id === this.$route.params.guide){
+          path = guide.path
+        }
+      })
+      
+      let activeTargetPaths = []
+      let index = 0
+      
+      // 활성화 해야할 guide path 배열 생성
+      while (path.indexOf('/', index + 1) > -1) {
+        index = path.indexOf('/', index + 1)
+        activeTargetPaths.push(path.substr(0, index + 1))
+      }
+      
+      // 활성화
+      let guideList = this.guideIndex
+      for(let i=0; i<activeTargetPaths.length; ++i){
+        for(let j=0; j<guideList.length; ++j){
+          if(guideList[j].path === activeTargetPaths[i]){
+            guideList[j].active = true
+            guideList = guideList[j].children
+          }
+        }
+      }
     }
   },
   mounted(){