Auto-expand/collapse on search

The old expand/collapse state is cached when a search begins, and then
restored if the search is ever cleared.

I don't love the UX, but it's the best alternative I could think of.

src/components/SidebarNav.vue

@@ -25,7 +25,11 @@
                     <nav-section
                         v-if="item.title"
                         v-bind="item"
-                        :key="item.title" />
+                        :key="item.title"
+                        :expanded="expandState[index]"
+                        @click="
+                            $set(expandState, index, !expandState[index])
+                        " />
                     <hr
                         v-else
                         :key="index" />
@@ -99,10 +103,25 @@ export default {
         return {
             siteVersion: require('@/../package.json').version,
             libVersion: require('@pendo/components/package.json').version,
-            search: ''
+            search: '',
+            expandState: Array.from({ length: NAV_ITEMS.length }, () => false),
+            expandStateCache: []
         };
     },
+    watch: {
+        hasSearch(value) {
+            if (value) {
+                this.expandStateCache = Array.from(this.expandState);
+                this.expandState.fill(true);
+            } else {
+                this.expandState = this.expandStateCache;
+            }
+        }
+    },
     computed: {
+        hasSearch() {
+            return !!this.search.trim();
+        },
         filteredItems() {
             const search = this.search.trim().toLowerCase();
             if (!search) {
@@ -118,6 +137,7 @@ export default {
                         )
                     };
                 }
+
                 return element;
             });
 

src/components/sidebar/NavSection.vue

@@ -1,18 +1,18 @@
 <template>
     <li>
         <template v-if="items.length">
-            <input
-                type="checkbox"
-                :id="id" />
-            <label
-                :for="id"
-                class="trigger">
+            <div
+                class="trigger"
+                :class="{ expanded }"
+                @click="$emit('click')">
                 <pendo-icon
                     type="chevron-right"
                     size="16" />
                 <span>{{ title }}</span>
-            </label>
-            <div class="dropdown">
+            </div>
+            <div
+                class="dropdown"
+                :class="{ expanded }">
                 <ul>
                     <li
                         v-for="item in items"
@@ -66,6 +66,10 @@ export default {
         items: {
             type: Array,
             default: () => []
+        },
+        expanded: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -91,6 +95,10 @@ li {
         display: grid;
         grid-template-rows: 0fr;
         transition: grid-template-rows 0.3s ease;
+
+        &.expanded {
+            grid-template-rows: 1fr;
+        }
     }
 
     ul {
@@ -118,20 +126,6 @@ a {
     }
 }
 
-input[type='checkbox'] {
-    opacity: 0;
-    position: absolute;
-    cursor: pointer;
-
-    &:checked + .trigger .pendo-icon {
-        transform: rotate(90deg);
-    }
-
-    &:checked ~ .dropdown {
-        grid-template-rows: 1fr;
-    }
-}
-
 .trigger {
     display: flex;
     align-items: center;
@@ -142,5 +136,9 @@ input[type='checkbox'] {
         display: inline-block;
         transition: transform 0.3s ease;
     }
+
+    &.expanded .pendo-icon {
+        transform: rotate(90deg);
+    }
 }
 </style>