From 38a1fa7002ef08e761cf52b8b2b005bc7a9c11f8 Mon Sep 17 00:00:00 2001
From: Rafael-gc <rafaelfernandeszk@gmail.com>
Date: Wed, 3 Jul 2024 13:34:04 -0300
Subject: [PATCH 1/4] Add accordions to docs menu

Signed-off-by: Rafael-gc <rafaelfernandeszk@gmail.com>
---
 site/layouts/partials/tree.html | 128 ++++++++++++++++++--------------
 1 file changed, 74 insertions(+), 54 deletions(-)

diff --git a/site/layouts/partials/tree.html b/site/layouts/partials/tree.html
index 6c00cd7c7..7da47501f 100644
--- a/site/layouts/partials/tree.html
+++ b/site/layouts/partials/tree.html
@@ -1,61 +1,81 @@
 <section class="tree-menu">
-<input type="text" name="filter" data-tree-filter placeholder="Filter links" />
-<ul class="tree-root">
-{{- $here := .dir }}
-{{- range (readDir $here) }}
-    {{ if in .Name "image" }}
-    {{ else }}
-        {{- $fullPath := (printf "%s%s" $here .Name) }}
-        {{- $fullUrl := replace $fullPath "/content" "" }}
-        {{- $stat := os.Stat $fullPath }}
-        {{ if $stat.IsDir }}
-            {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" 1 }}
-        {{ end }}
-    {{ end }}
-{{- end -}}
-</ul>
-</section>
-{{ define "treemenu" }}
-    {{ $nextDepth := add .depth 1 }}
-    {{- $activeLink := $.root.Permalink }}
-    {{- $className := "" }}
-    {{- $deprecated := true }}
-    {{- with $.root.Site.GetPage .url }}
-        {{- if not .Params.deprecated }}
-            {{- $deprecated = false }}
-            {{- $branchLink := .Permalink }}
-            {{- if in $activeLink $branchLink  }}
-                {{- $className = "tree-branch-active" -}}
-            {{ end }}
-            {{- if eq $activeLink $branchLink  }}
-                {{- $className = "tree-active tree-branch-active" -}}
-            {{- end -}}
-            <li data-depth="{{ $.depth }}" class="{{ $className }}">
-                <a href="{{ .Permalink }}">{{ .Title }}</a>
-        {{- end }}
-    {{- end }}
-    {{- if not $deprecated }}
-        <ul class="tree-branch">
-        {{- range (readDir .path) }}
-            {{- if in .Name "image" | or (eq .Name "_index.md") }}
-            {{- else }}
-                {{- $fullPath := (printf "%s/%s" $.path .Name) }}
+    <input type="text" name="filter" data-tree-filter placeholder="Filter links" />
+    <ul class="tree-root">
+        {{- $here := .dir }}
+        {{- range (readDir $here) }}
+            {{- if not (in .Name "image") }}
+                {{- $fullPath := (printf "%s%s" $here .Name) }}
                 {{- $fullUrl := replace $fullPath "/content" "" }}
-                {{- $fullUrl = replace $fullUrl ".md" "" }}
                 {{- $stat := os.Stat $fullPath }}
                 {{- if $stat.IsDir }}
-                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" $nextDepth }}
-                {{- else }}
-                    {{- with $.root.Site.GetPage $fullUrl }}
-                        {{- $link := printf "%s" .Permalink }}  
-                        <li{{- if in $activeLink $link }} class="tree-active"{{ end }}> 
-                            <a href="{{ .Permalink }}">{{ .Title }}</a>
-                        </li>
-                    {{- end }}
+                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" 1 }}
                 {{- end }}
             {{- end }}
         {{- end }}
-        </ul>
-    </li>
-    {{- end }}
-{{ end }}
\ No newline at end of file
+    </ul>
+</section>
+
+{{ define "treemenu" }}
+    {{ $nextDepth := add .depth 1 }}
+    {{ $activeLink := $.root.Permalink }}
+    {{ $className := "" }}
+    {{ $deprecated := true }}
+    {{ with $.root.Site.GetPage .url }}
+        {{ if not .Params.deprecated }}
+            {{ $deprecated = false }}
+            {{ $branchLink := .Permalink }}
+            {{ if in $activeLink $branchLink }}
+                {{ $className = "tree-branch-active" }}
+            {{ end }}
+            {{ if eq $activeLink $branchLink }}
+                {{ $className = "tree-active tree-branch-active" }}
+            {{ end }}
+            <li data-depth="{{ $.depth }}" class="{{ $className }}">
+                <a href="{{ .Permalink }}" data-toggle="tree-branch">{{ .Title }}</a>
+                {{ if lt $.depth 3 }}
+                    <ul class="tree-branch" style="display:none;">
+                        {{ range (readDir $.path) }}
+                            {{ if not (in .Name "image" | or (eq .Name "_index.md")) }}
+                                {{ $fullPath := printf "%s/%s" $.path .Name }}
+                                {{ $fullUrl := replace $fullPath "/content" "" }}
+                                {{ $fullUrl = replace $fullUrl ".md" "" }}
+                                {{ $stat := os.Stat $fullPath }}
+                                {{ if $stat.IsDir }}
+                                    {{ template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" $nextDepth }}
+                                {{ else }}
+                                    {{ with $.root.Site.GetPage $fullUrl }}
+                                        {{ $link := printf "%s" .Permalink }}
+                                        <li{{ if in $activeLink $link }} class="tree-active"{{ end }}>
+                                            <a href="{{ .Permalink }}">{{ .Title }}</a>
+                                        </li>
+                                    {{ end }}
+                                {{ end }}
+                            {{ end }}
+                        {{ end }}
+                    </ul>
+                {{ end }}
+            </li>
+        {{ end }}
+    {{ end }}
+{{ end }}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggles = document.querySelectorAll('[data-toggle="tree-branch"]');
+        
+        toggles.forEach(function(toggle) {
+            toggle.addEventListener("mouseover", function(event) {
+                const branch = this.nextElementSibling;
+                if (branch && branch.classList.contains('tree-branch')) {
+                    branch.style.display = "block";
+                }
+            });
+
+            toggle.parentElement.addEventListener("mouseleave", function(event) {
+                const branch = toggle.nextElementSibling;
+                if (branch && branch.classList.contains('tree-branch')) {
+                    branch.style.display = "block";
+                }
+            });
+        });
+    });
+</script>
\ No newline at end of file

From 33b684be977eefdaa2db31eae28d48ffcf39f5b6 Mon Sep 17 00:00:00 2001
From: Rafael-gc <rafaelfernandeszk@gmail.com>
Date: Wed, 3 Jul 2024 20:21:27 -0300
Subject: [PATCH 2/4] Signed-off-by: Rafael-gc <rafaelfernandeszk@gmail.com>

---
 site/layouts/partials/tree.html | 144 ++++++++++++++++++++------------
 1 file changed, 92 insertions(+), 52 deletions(-)

diff --git a/site/layouts/partials/tree.html b/site/layouts/partials/tree.html
index 7da47501f..3376665c2 100644
--- a/site/layouts/partials/tree.html
+++ b/site/layouts/partials/tree.html
@@ -3,79 +3,119 @@
     <ul class="tree-root">
         {{- $here := .dir }}
         {{- range (readDir $here) }}
-            {{- if not (in .Name "image") }}
+            {{ if in .Name "image" }}
+            {{ else }}
                 {{- $fullPath := (printf "%s%s" $here .Name) }}
                 {{- $fullUrl := replace $fullPath "/content" "" }}
                 {{- $stat := os.Stat $fullPath }}
-                {{- if $stat.IsDir }}
+                {{ if $stat.IsDir }}
                     {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" 1 }}
-                {{- end }}
-            {{- end }}
-        {{- end }}
+                {{ end }}
+            {{ end }}
+        {{- end -}}
     </ul>
 </section>
 
 {{ define "treemenu" }}
     {{ $nextDepth := add .depth 1 }}
-    {{ $activeLink := $.root.Permalink }}
-    {{ $className := "" }}
-    {{ $deprecated := true }}
-    {{ with $.root.Site.GetPage .url }}
-        {{ if not .Params.deprecated }}
-            {{ $deprecated = false }}
-            {{ $branchLink := .Permalink }}
-            {{ if in $activeLink $branchLink }}
-                {{ $className = "tree-branch-active" }}
-            {{ end }}
-            {{ if eq $activeLink $branchLink }}
-                {{ $className = "tree-active tree-branch-active" }}
+    {{- $activeLink := $.root.Permalink }}
+    {{- $className := "" }}
+    {{- $deprecated := true }}
+    {{- with $.root.Site.GetPage .url }}
+        {{- if not .Params.deprecated }}
+            {{- $deprecated = false }}
+            {{- $branchLink := .Permalink }}
+            {{- if in $activeLink $branchLink  }}
+                {{- $className = "tree-branch-active" -}}
             {{ end }}
+            {{- if eq $activeLink $branchLink  }}
+                {{- $className = "tree-active tree-branch-active" -}}
+            {{- end -}}
             <li data-depth="{{ $.depth }}" class="{{ $className }}">
                 <a href="{{ .Permalink }}" data-toggle="tree-branch">{{ .Title }}</a>
-                {{ if lt $.depth 3 }}
-                    <ul class="tree-branch" style="display:none;">
-                        {{ range (readDir $.path) }}
-                            {{ if not (in .Name "image" | or (eq .Name "_index.md")) }}
-                                {{ $fullPath := printf "%s/%s" $.path .Name }}
-                                {{ $fullUrl := replace $fullPath "/content" "" }}
-                                {{ $fullUrl = replace $fullUrl ".md" "" }}
-                                {{ $stat := os.Stat $fullPath }}
-                                {{ if $stat.IsDir }}
-                                    {{ template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" $nextDepth }}
-                                {{ else }}
-                                    {{ with $.root.Site.GetPage $fullUrl }}
-                                        {{ $link := printf "%s" .Permalink }}
-                                        <li{{ if in $activeLink $link }} class="tree-active"{{ end }}>
-                                            <a href="{{ .Permalink }}">{{ .Title }}</a>
-                                        </li>
-                                    {{ end }}
-                                {{ end }}
-                            {{ end }}
-                        {{ end }}
-                    </ul>
-                {{ end }}
-            </li>
-        {{ end }}
-    {{ end }}
+        {{- end }}
+    {{- end }}
+    {{- if not $deprecated }}
+        <ul class="tree-branch" style="display:none;">
+        {{- range (readDir .path) }}
+            {{- if in .Name "image" | or (eq .Name "_index.md") }}
+            {{- else }}
+                {{- $fullPath := (printf "%s/%s" $.path .Name) }}
+                {{- $fullUrl := replace $fullPath "/content" "" }}
+                {{- $fullUrl = replace $fullUrl ".md" "" }}
+                {{- $stat := os.Stat $fullPath }}
+                {{- if $stat.IsDir }}
+                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" $nextDepth }}
+                {{- else }}
+                    {{- with $.root.Site.GetPage $fullUrl }}
+                        {{- $link := printf "%s" .Permalink }}  
+                        <li{{- if in $activeLink $link }} class="tree-active"{{ end }}> 
+                            <a href="{{ .Permalink }}">{{ .Title }}</a>
+                        </li>
+                    {{- end }}
+                {{- end }}
+            {{- end }}
+        {{- end }}
+        </ul>
+    </li>
+    {{- end }}
 {{ end }}
+
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         const toggles = document.querySelectorAll('[data-toggle="tree-branch"]');
-        
+        const filterInput = document.querySelector('[data-tree-filter]');
+
+        let clickedOnce = false;
+
         toggles.forEach(function(toggle) {
-            toggle.addEventListener("mouseover", function(event) {
+            toggle.addEventListener("click", function(event) {
                 const branch = this.nextElementSibling;
-                if (branch && branch.classList.contains('tree-branch')) {
-                    branch.style.display = "block";
-                }
-            });
 
-            toggle.parentElement.addEventListener("mouseleave", function(event) {
-                const branch = toggle.nextElementSibling;
                 if (branch && branch.classList.contains('tree-branch')) {
-                    branch.style.display = "block";
+                    if (clickedOnce) {
+                        window.location.href = this.href;
+                    } else {
+                        event.preventDefault();
+                        branch.style.display = branch.style.display === "none" || branch.style.display === "" ? "block" : "none";
+                        clickedOnce = true;
+                        setTimeout(() => clickedOnce = false, 300);
+                    }
                 }
             });
         });
+
+        filterInput.addEventListener('keypress', function(event) {
+            if (event.key === 'Enter') {
+                const filter = this.value.trim().toLowerCase();
+                const items = document.querySelectorAll('.tree-root li');
+
+                items.forEach(function(item) {
+                    const text = item.textContent.toLowerCase();
+                    const parent = item.closest('ul.tree-branch');
+
+                    if (filter === '') {
+                        item.style.display = 'list-item';
+                        if (parent) {
+                            parent.style.display = 'block';
+                        }
+                    } else if (text.includes(filter)) {
+                        item.style.display = 'list-item';
+                        if (parent) {
+                            parent.style.display = 'block';
+                        }
+                    } else {
+                        item.style.display = 'none';
+                    }
+
+                    if (item.querySelectorAll('li[style="display: list-item;"]').length > 0) {
+                        item.style.display = 'list-item';
+                        if (item.closest('ul.tree-branch')) {
+                            item.closest('ul.tree-branch').style.display = 'block';
+                        }
+                    }
+                });
+            }
+        });
     });
-</script>
\ No newline at end of file
+</script>

From cf03d1eb2a14d139a234c12e335cf568ce445289 Mon Sep 17 00:00:00 2001
From: Rafael-gc <rafaelfernandeszk@gmail.com>
Date: Sun, 14 Jul 2024 19:30:17 -0300
Subject: [PATCH 3/4] Change logic of the navigation tree Signed-off-by:
 Rafael-gc <rafaelfernandeszk@gmail.com>

---
 site/layouts/partials/tree.html | 56 +++++++++++++++++----------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/site/layouts/partials/tree.html b/site/layouts/partials/tree.html
index 3376665c2..0bf914772 100644
--- a/site/layouts/partials/tree.html
+++ b/site/layouts/partials/tree.html
@@ -32,7 +32,8 @@
                 {{- $className = "tree-active tree-branch-active" -}}
             {{- end -}}
             <li data-depth="{{ $.depth }}" class="{{ $className }}">
-                <a href="{{ .Permalink }}" data-toggle="tree-branch">{{ .Title }}</a>
+                <span class="toggle-btn" data-toggle="tree-branch">[+]</span>
+                <a href="{{ .Permalink }}">{{ .Title }}</a>
         {{- end }}
     {{- end }}
     {{- if not $deprecated }}
@@ -61,26 +62,25 @@
     {{- end }}
 {{ end }}
 
+<style>
+    .toggle-btn {
+        cursor: pointer;
+    }
+</style>
+
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         const toggles = document.querySelectorAll('[data-toggle="tree-branch"]');
         const filterInput = document.querySelector('[data-tree-filter]');
 
-        let clickedOnce = false;
-
         toggles.forEach(function(toggle) {
             toggle.addEventListener("click", function(event) {
-                const branch = this.nextElementSibling;
-
-                if (branch && branch.classList.contains('tree-branch')) {
-                    if (clickedOnce) {
-                        window.location.href = this.href;
-                    } else {
-                        event.preventDefault();
-                        branch.style.display = branch.style.display === "none" || branch.style.display === "" ? "block" : "none";
-                        clickedOnce = true;
-                        setTimeout(() => clickedOnce = false, 300);
-                    }
+                event.stopPropagation();
+                const branch = this.parentElement.querySelector('.tree-branch');
+                if (branch) {
+                    const isOpen = branch.style.display === "block";
+                    branch.style.display = isOpen ? "none" : "block";
+                    this.textContent = isOpen ? "[+]" : "[-]";
                 }
             });
         });
@@ -92,30 +92,32 @@
 
                 items.forEach(function(item) {
                     const text = item.textContent.toLowerCase();
-                    const parent = item.closest('ul.tree-branch');
+                    const parentBranch = item.closest('ul.tree-branch');
+                    const toggleBtn = parentBranch ? parentBranch.previousElementSibling.querySelector('.toggle-btn') : null;
 
                     if (filter === '') {
                         item.style.display = 'list-item';
-                        if (parent) {
-                            parent.style.display = 'block';
-                        }
+                        if (parentBranch) parentBranch.style.display = 'block';
+                        if (toggleBtn) toggleBtn.textContent = "[+]";
                     } else if (text.includes(filter)) {
                         item.style.display = 'list-item';
-                        if (parent) {
-                            parent.style.display = 'block';
-                        }
+                        if (parentBranch) parentBranch.style.display = 'block';
+                        if (toggleBtn) toggleBtn.textContent = "[-]";
                     } else {
                         item.style.display = 'none';
                     }
+                });
 
-                    if (item.querySelectorAll('li[style="display: list-item;"]').length > 0) {
-                        item.style.display = 'list-item';
-                        if (item.closest('ul.tree-branch')) {
-                            item.closest('ul.tree-branch').style.display = 'block';
-                        }
+                document.querySelectorAll('.tree-branch').forEach(function(branch) {
+                    if (branch.querySelectorAll('li[style="display: list-item;"]').length > 0) {
+                        branch.style.display = 'block';
+                        const toggleBtn = branch.previousElementSibling.querySelector('.toggle-btn');
+                        if (toggleBtn) toggleBtn.textContent = "[-]";
+                    } else {
+                        branch.style.display = 'none';
                     }
                 });
             }
         });
     });
-</script>
+</script>
\ No newline at end of file

From 42ec505c91f0c0dd52cb50560b67c2956da4f8d0 Mon Sep 17 00:00:00 2001
From: Rafael-gc <rafaelfernandeszk@gmail.com>
Date: Mon, 2 Sep 2024 14:54:08 -0300
Subject: [PATCH 4/4] Signed-off-by: Rafael-gc <rafaelfernandeszk@gmail.com>

---
 site/layouts/partials/tree.html | 95 ++++++++++++---------------------
 1 file changed, 34 insertions(+), 61 deletions(-)

diff --git a/site/layouts/partials/tree.html b/site/layouts/partials/tree.html
index 0bf914772..e5a1f5fce 100644
--- a/site/layouts/partials/tree.html
+++ b/site/layouts/partials/tree.html
@@ -3,13 +3,13 @@
     <ul class="tree-root">
         {{- $here := .dir }}
         {{- range (readDir $here) }}
-            {{ if in .Name "image" }}
+            {{ if in .Name "image" | or (eq .Name "_index.md") }}
             {{ else }}
                 {{- $fullPath := (printf "%s%s" $here .Name) }}
                 {{- $fullUrl := replace $fullPath "/content" "" }}
                 {{- $stat := os.Stat $fullPath }}
                 {{ if $stat.IsDir }}
-                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" 1 }}
+                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" 1 "expand" false }}
                 {{ end }}
             {{ end }}
         {{- end -}}
@@ -21,23 +21,18 @@
     {{- $activeLink := $.root.Permalink }}
     {{- $className := "" }}
     {{- $deprecated := true }}
+    {{- $expand := .expand }}
     {{- with $.root.Site.GetPage .url }}
         {{- if not .Params.deprecated }}
             {{- $deprecated = false }}
             {{- $branchLink := .Permalink }}
-            {{- if in $activeLink $branchLink  }}
-                {{- $className = "tree-branch-active" -}}
-            {{ end }}
-            {{- if eq $activeLink $branchLink  }}
-                {{- $className = "tree-active tree-branch-active" -}}
-            {{- end -}}
             <li data-depth="{{ $.depth }}" class="{{ $className }}">
-                <span class="toggle-btn" data-toggle="tree-branch">[+]</span>
                 <a href="{{ .Permalink }}">{{ .Title }}</a>
         {{- end }}
     {{- end }}
+
     {{- if not $deprecated }}
-        <ul class="tree-branch" style="display:none;">
+        <ul class="tree-branch" style="display: none;"> <!-- Oculto por padrão -->
         {{- range (readDir .path) }}
             {{- if in .Name "image" | or (eq .Name "_index.md") }}
             {{- else }}
@@ -46,11 +41,11 @@
                 {{- $fullUrl = replace $fullUrl ".md" "" }}
                 {{- $stat := os.Stat $fullPath }}
                 {{- if $stat.IsDir }}
-                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" $nextDepth }}
+                    {{- template "treemenu" dict "path" $fullPath "url" $fullUrl "root" $.root "depth" $nextDepth "expand" false }}
                 {{- else }}
                     {{- with $.root.Site.GetPage $fullUrl }}
-                        {{- $link := printf "%s" .Permalink }}  
-                        <li{{- if in $activeLink $link }} class="tree-active"{{ end }}> 
+                        {{- $link := printf "%s" .Permalink }}
+                        <li{{- if in $activeLink $link }} class="tree-active"{{ end }}>
                             <a href="{{ .Permalink }}">{{ .Title }}</a>
                         </li>
                     {{- end }}
@@ -62,62 +57,40 @@
     {{- end }}
 {{ end }}
 
-<style>
-    .toggle-btn {
-        cursor: pointer;
-    }
-</style>
-
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const toggles = document.querySelectorAll('[data-toggle="tree-branch"]');
-        const filterInput = document.querySelector('[data-tree-filter]');
+    document.addEventListener("DOMContentLoaded", function() {
+        var treeItems = document.querySelectorAll('.tree-menu li');
 
-        toggles.forEach(function(toggle) {
-            toggle.addEventListener("click", function(event) {
-                event.stopPropagation();
-                const branch = this.parentElement.querySelector('.tree-branch');
-                if (branch) {
-                    const isOpen = branch.style.display === "block";
-                    branch.style.display = isOpen ? "none" : "block";
-                    this.textContent = isOpen ? "[+]" : "[-]";
-                }
-            });
-        });
+        treeItems.forEach(function(item) {
+            var timer;
+            var subTree = item.querySelector('.tree-branch');
 
-        filterInput.addEventListener('keypress', function(event) {
-            if (event.key === 'Enter') {
-                const filter = this.value.trim().toLowerCase();
-                const items = document.querySelectorAll('.tree-root li');
+            if (subTree) {
+                item.addEventListener('mouseenter', function() {
+                    clearTimeout(timer);
+                    subTree.style.display = 'block';
+                });
 
-                items.forEach(function(item) {
-                    const text = item.textContent.toLowerCase();
-                    const parentBranch = item.closest('ul.tree-branch');
-                    const toggleBtn = parentBranch ? parentBranch.previousElementSibling.querySelector('.toggle-btn') : null;
+                item.addEventListener('mouseleave', function() {
+                    timer = setTimeout(function() {
+                        if (!item.matches(':hover') && !subTree.matches(':hover')) {
+                            subTree.style.display = 'none';
+                        }
+                    }, 5000);
+                });
 
-                    if (filter === '') {
-                        item.style.display = 'list-item';
-                        if (parentBranch) parentBranch.style.display = 'block';
-                        if (toggleBtn) toggleBtn.textContent = "[+]";
-                    } else if (text.includes(filter)) {
-                        item.style.display = 'list-item';
-                        if (parentBranch) parentBranch.style.display = 'block';
-                        if (toggleBtn) toggleBtn.textContent = "[-]";
-                    } else {
-                        item.style.display = 'none';
-                    }
+                subTree.addEventListener('mouseenter', function() {
+                    clearTimeout(timer);
                 });
 
-                document.querySelectorAll('.tree-branch').forEach(function(branch) {
-                    if (branch.querySelectorAll('li[style="display: list-item;"]').length > 0) {
-                        branch.style.display = 'block';
-                        const toggleBtn = branch.previousElementSibling.querySelector('.toggle-btn');
-                        if (toggleBtn) toggleBtn.textContent = "[-]";
-                    } else {
-                        branch.style.display = 'none';
-                    }
+                subTree.addEventListener('mouseleave', function() {
+                    timer = setTimeout(function() {
+                        if (!item.matches(':hover') && !subTree.matches(':hover')) {
+                            subTree.style.display = 'none';
+                        }
+                    }, 5000);
                 });
             }
         });
     });
-</script>
\ No newline at end of file
+</script>