Start with the main navigation closed.

src/components/NavItem.vue

@@ -2,9 +2,9 @@
 </script>
 
 <template>
-    <li>
-        <slot />
-    </li>
+  <li v-if="$slots.default">
+    <slot />
+  </li>
 </template>
 
 <style scoped>

src/components/NavTree.vue

@@ -1,20 +1,31 @@
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { Ref, inject, ref, computed, useSlots, provide, } from 'vue';
 
-  const open = ref(true)
-  function toggle()
+  const slots = useSlots()
+  const props = defineProps<{startsOpen?:boolean, forceOpen?:boolean}>()
+
+  const forceNavigationOpen = inject<Ref<boolean>>('forceNavigationOpen', computed(() => props.forceOpen ?? false))
+  provide('forceNavigationOpen', forceNavigationOpen)
+
+  const open = ref(props?.startsOpen ?? false)
+  const isOpen = computed(() => forceNavigationOpen.value || open.value || !slots.header)
+
+  function toggleOpen()
   {
+    if (forceNavigationOpen.value)
+      return
+
     open.value = !open.value
   }
 </script>
 
 <template>
-    <div v-if="$slots.header" @click="toggle()" class="navtree-header" :class="open ? 'navtree-open' : 'navtree-closed'">
-        <slot name="header" />
-    </div>
-    <ul class="navtree" v-if="open">
-        <slot />
-    </ul>
+  <div v-if="$slots.header" @click="toggleOpen()" :class="['navtree-header', isOpen ? 'navtree-open' : 'navtree-closed', forceNavigationOpen ? 'navtree-forcedopen' : '']">
+    <slot name="header" />
+  </div>
+  <ul v-if="$slots.default && isOpen" class="navtree">
+    <slot />
+  </ul>
 </template>
 
 <style scoped>

src/style.css

@@ -203,6 +203,7 @@ ul.navtree li
 ul.navtree li > .navtree-header
 { 
   user-select: none;
+  cursor:pointer;
 }
 ul.navtree li > .navtree-header::after
 { 
@@ -216,6 +217,14 @@ ul.navtree li > .navtree-open::after
 { 
   content:' ⏷';
 }
+ul.navtree li > .navtree-forcedopen
+{
+  cursor:initial;
+}
+ul.navtree li > .navtree-forcedopen::after
+{ 
+  content:'';
+}
 ul.navtree li > .navtree-header:hover::after
 { 
   color:white;

src/views/gamecore/blocks/ModifyCurrentSkillDelayCost.vue

@@ -18,7 +18,10 @@
 <template>
   <BlockLayout :source="node">
 
-    <em>{{ node.ModifyFunction }}</em> current skill action delay cost
+    <em v-if="node.ModifyFunction">{{ node.ModifyFunction }}</em> 
+    <template v-else>Modifiy</template> 
+
+    current skill action delay cost
     <template v-if="node.NormalizedValue">
       to <em><EvaluateExpression :expression="node.NormalizedValue" /></em>×
     </template>

src/views/gamecore/blocks/ModifySPNew.vue

@@ -28,16 +28,16 @@
       Add <em><EvaluateExpression :expression="node.FixedAddValue" /></em> flat energy
       <span class="minor">(Ignores ER)</span>
     </template>
-    <template v-else-if="node.AddRatio">
-      Add <em><EvaluateExpression :expression="node.AddRatio" /></em> of the skill energy bonus
-    </template>
     <template v-else-if="node.AddMaxSPRatio">
       Add <em><EvaluateExpression :expression="node.AddMaxSPRatio" /></em>× energy
     </template>
     <template v-else-if="node.FixedAddMaxSPRatio">
       Add <em><EvaluateExpression :expression="node.FixedAddMaxSPRatio" /></em>× energy
       <span class="minor">(Ignores ER)</span>
     </template>
+    <template v-else-if="node.AddRatio">
+      Add <em><EvaluateExpression :expression="node.AddRatio" /></em>× of the skill energy bonus
+    </template>
     <template v-else>
       Add energy
     </template>

src/views/navigation/AvatarNav.vue

@@ -36,22 +36,18 @@
 <template>
   <NavTree>
     <template #header>Avatars</template>
-    <template v-for="(avatars, damageType) in avatarsSearchResults" :key="damageType">
-      <NavItem>
-
-        <NavTree>
-          <template #header>{{ damageType }}</template>
-          <template v-for="avatar in avatars" :key="avatar.AvatarID">
-            <NavItem>
-              <RouterLink :to="{ name:'avatar', params:{ commitId: commitId, objectId: avatar.AvatarID }}">
-                <span :title="avatar.AvatarName.Text">{{ avatar.AvatarName.Text }}</span>
-              </RouterLink>
-            </NavItem>
-          </template>
-        </NavTree>
-
-      </NavItem>
-    </template>
+    <NavItem v-for="(avatars, damageType) in avatarsSearchResults" :key="damageType">
+
+      <NavTree>
+        <template #header>{{ damageType }}</template>
+        <NavItem v-for="avatar in avatars" :key="avatar.AvatarID">
+          <RouterLink :to="{ name:'avatar', params:{ commitId: commitId, objectId: avatar.AvatarID }}">
+            <span :title="avatar.AvatarName.Text">{{ avatar.AvatarName.Text }}</span>
+          </RouterLink>
+        </NavItem>
+      </NavTree>
+
+    </NavItem>
   </NavTree>
 </template>
 

src/views/navigation/AvatarSubNav.vue

@@ -23,76 +23,68 @@
 </script>
 
 <template>
-  <template v-if="avatar">
+  <template v-if="avatar" :key="objectId">
     <h1>{{ avatar.AvatarName.Text }}</h1>
     <span v-if="!character" class="minor">(Missing character data)</span>
     <NavTree>
 
       <NavItem>
-        <NavTree>
+        <NavTree :startsOpen="true">
           <template #header>Skills</template>
-          <template v-for="skill in avatarSkills" :key="skill.SkillID">
-            <NavItem>
-              <CharacterSkillAbilitiesNav v-if="character" :character="character" :skillTriggerKey="skill.SkillTriggerKey">
-                <template #header>
-                  {{ skill.SkillTypeDesc.Text }} - {{ skill.SkillTag.Text }} 
-                  <span class="minor" :title="skill.SkillName.Text">{{ skill.SkillName.Text }}</span>
-                  <span class="minor">{{ skill.SkillTriggerKey }}</span> 
-                </template>
-                <template #default="slotProps">
-                  <RouterLink :to="{ name:'avatarAbility', params:{ commitId: commitId, objectId: objectId, abilityId: slotProps.ability }}">
-                    {{ slotProps.ability }}
-                  </RouterLink>
-                </template>
-              </CharacterSkillAbilitiesNav>
-            </NavItem>
-          </template>
+          <NavItem v-for="skill in avatarSkills" :key="skill.SkillID">
+            <CharacterSkillAbilitiesNav v-if="character" :character="character" :skillTriggerKey="skill.SkillTriggerKey">
+              <template #header>
+                {{ skill.SkillTypeDesc.Text }} - {{ skill.SkillTag.Text }} 
+                <span class="minor" :title="skill.SkillName.Text">{{ skill.SkillName.Text }}</span>
+                <span class="minor">{{ skill.SkillTriggerKey }}</span> 
+              </template>
+              <template #default="slotProps">
+                <RouterLink :to="{ name:'avatarAbility', params:{ commitId: commitId, objectId: objectId, abilityId: slotProps.ability }}">
+                  {{ slotProps.ability }}
+                </RouterLink>
+              </template>
+            </CharacterSkillAbilitiesNav>
+          </NavItem>
         </NavTree>
       </NavItem>
 
       <NavItem v-if="avatar.Traces.length > 0">
-        <NavTree>
+        <NavTree :startsOpen="true">
           <template #header>Traces</template>
-          <template v-for="(trace, index) in avatar.Traces.filter(t => t.PointType === 3)" :key="trace.PointID">
-            <NavItem>
-              <NavTree v-if="trace.AbilityName">
-                <template #header>
-                  A{{ (index + 1) * 2 }} 
-                  <span class="minor">{{ trace.PointName }}</span>
-                  <span class="minor">{{ trace.PointID }}</span>
-                </template>
-                <NavItem>
-                  <RouterLink :to="{ name:'avatarAbility', params:{ commitId: commitId, objectId: objectId, abilityId: trace.AbilityName, }}">
-                    {{ trace.AbilityName }}
-                  </RouterLink>
-                </NavItem>
-              </NavTree>
-            </NavItem>
-          </template>
+          <NavItem v-for="(trace, index) in avatar.Traces.filter(t => t.PointType === 3)" :key="trace.PointID">
+            <NavTree :startsOpen="true">
+              <template #header>
+                A{{ (index + 1) * 2 }} 
+                <span class="minor">{{ trace.PointName }}</span>
+                <span class="minor">{{ trace.PointID }}</span>
+              </template>
+              <NavItem v-if="trace.AbilityName">
+                <RouterLink :to="{ name:'avatarAbility', params:{ commitId: commitId, objectId: objectId, abilityId: trace.AbilityName, }}">
+                  {{ trace.AbilityName }}
+                </RouterLink>
+              </NavItem>
+            </NavTree>
+          </NavItem>
         </NavTree>
       </NavItem>
 
       <NavItem v-if="avatar.Eidolons.length > 0">
-        <NavTree>
+        <NavTree :startsOpen="true">
           <template #header>Eidolons</template>
-          <template v-for="eidolon in avatar.Eidolons" :key="eidolon.RankID">
-            <NavItem>
-              <NavTree v-if="eidolon.RankAbility.length > 0">
-                <template #header>
-                  E{{ eidolon.Rank }} 
-                  <span class="minor">{{ eidolon.Name }}</span>
-                  <span class="minor">{{ eidolon.RankID }}</span>
-                </template>
-                <template v-for="ability in eidolon.RankAbility" :key="ability">
-                  <NavItem>
-                    <RouterLink :to="{ name:'avatarAbility', params:{ commitId: commitId, objectId: objectId, abilityId: ability, }}">
-                      {{ ability }}
-                    </RouterLink>
-                  </NavItem>
-                </template>
-              </NavTree>
-            </NavItem>
-          </template>
+          <NavItem v-for="eidolon in avatar.Eidolons" :key="eidolon.RankID">
+            <NavTree :startsOpen="true">
+              <template #header>
+                E{{ eidolon.Rank }} 
+                <span class="minor">{{ eidolon.Name }}</span>
+                <span class="minor">{{ eidolon.RankID }}</span>
+              </template>
+              <NavItem v-for="ability in eidolon.RankAbility" :key="ability">
+                <RouterLink :to="{ name:'avatarAbility', params:{ commitId: commitId, objectId: objectId, abilityId: ability, }}">
+                  {{ ability }}
+                </RouterLink>
+              </NavItem>
+            </NavTree>
+          </NavItem>
         </NavTree>
       </NavItem>
 

src/views/navigation/CharacterOtherAbilitiesNav.vue

@@ -7,17 +7,15 @@
 </script>
 
 <template>
-  <NavTree>
+  <NavTree :startsOpen="true">
     <template #header>
       <slot name="header" />
     </template>
-    <template v-for="ability in character.AbilityList" :key="ability">
-      <NavItem>
-        <span :title="ability">
-          <slot :ability="ability" />
-        </span>
-      </NavItem>
-    </template>
+    <NavItem v-for="ability in character.AbilityList">
+      <span :title="ability">
+        <slot :ability="ability" />
+      </span>
+    </NavItem>
   </NavTree>
 </template>
 

src/views/navigation/CharacterSkillAbilitiesNav.vue

@@ -21,17 +21,15 @@
 </script>
 
 <template>
-  <NavTree v-if="abilities.length > 0">
+  <NavTree :startsOpen="true">
     <template #header>
       <slot name="header" />
     </template>
-    <template v-for="ability in abilities" :key="ability">
-      <NavItem>
-        <span :title="ability">
-          <slot :ability="ability" />
-        </span>
-      </NavItem>
-    </template>
+    <NavItem v-for="ability in abilities">
+      <span :title="ability">
+        <slot :ability="ability" />
+      </span>
+    </NavItem>
   </NavTree>
 </template>
 

src/views/navigation/CommitNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, provide } from 'vue'
+  import { ref, provide, computed, } from 'vue'
   import AvatarNav from './AvatarNav.vue'
   import MonsterNav from './MonsterNav.vue'
   import EquipmentNav from './EquipmentNav.vue'
@@ -10,14 +10,16 @@
 
   const search = ref<string>('')
   provide('search', search)
+  
+  const forceNavigationOpen = computed(() => !!search.value)
 </script>
 
 <template>
   <nav class="panel">
 
     <section class="mainnav">
       <input v-model.trim="search" placeholder="Search" />
-      <NavTree>
+      <NavTree :forceOpen="forceNavigationOpen">
         <NavItem> <AvatarNav />     </NavItem>
         <NavItem> <MonsterNav />    </NavItem>
         <NavItem> <EquipmentNav />  </NavItem>

src/views/navigation/EquipmentNav.vue

@@ -36,22 +36,18 @@
 <template>
   <NavTree>
     <template #header>Light Cones</template>
-    <template v-for="(equipments, path) in equipmentsSearchResults" :key="path">
-      <NavItem>
-
-        <NavTree>
-          <template #header>{{ path }}</template>
-          <template v-for="equipment in equipments" :key="equipment.EquipmentID">
-            <NavItem>
-              <RouterLink :to="{ name:'equipment', params:{ commitId: commitId, objectId: equipment.EquipmentID }}">
-                <span :title="equipment.EquipmentName.Text">{{ equipment.EquipmentName.Text }}</span>
-              </RouterLink>
-            </NavItem>
-          </template>
-        </NavTree>
+    <NavItem v-for="(equipments, path) in equipmentsSearchResults" :key="path">
+
+      <NavTree>
+        <template #header>{{ path }}</template>
+        <NavItem v-for="equipment in equipments" :key="equipment.EquipmentID">
+          <RouterLink :to="{ name:'equipment', params:{ commitId: commitId, objectId: equipment.EquipmentID }}">
+            <span :title="equipment.EquipmentName.Text">{{ equipment.EquipmentName.Text }}</span>
+          </RouterLink>
+        </NavItem>
+      </NavTree>
 
-      </NavItem>
-    </template>
+    </NavItem>
   </NavTree>
 </template>