From 1116179a9076920e03c687f20a679636f29baf0b Mon Sep 17 00:00:00 2001
From: Damnae <damnaee@gmail.com>
Date: Sun, 3 Sep 2023 22:32:24 +0200
Subject: [PATCH] Start with the main navigation closed.

---
 src/components/NavItem.vue                    |   6 +-
 src/components/NavTree.vue                    |  29 +++--
 src/style.css                                 |   9 ++
 .../blocks/ModifyCurrentSkillDelayCost.vue    |   5 +-
 src/views/gamecore/blocks/ModifySPNew.vue     |   6 +-
 src/views/navigation/AvatarNav.vue            |  28 +++--
 src/views/navigation/AvatarSubNav.vue         | 100 ++++++++----------
 .../navigation/CharacterOtherAbilitiesNav.vue |  14 ++-
 .../navigation/CharacterSkillAbilitiesNav.vue |  14 ++-
 src/views/navigation/CommitNav.vue            |   6 +-
 src/views/navigation/EquipmentNav.vue         |  26 ++---
 src/views/navigation/EquipmentSubNav.vue      |  38 +++----
 src/views/navigation/MonsterNav.vue           |  36 +++----
 src/views/navigation/MonsterSubNav.vue        |  49 ++++-----
 src/views/navigation/RelicSetNav.vue          |  12 +--
 src/views/navigation/RelicSetSubNav.vue       |  28 ++---
 src/views/navigation/StatusNav.vue            |  12 +--
 src/views/navigation/StatusSubNav.vue         |  30 +++---
 18 files changed, 224 insertions(+), 224 deletions(-)

diff --git a/src/components/NavItem.vue b/src/components/NavItem.vue
index 43e1ae1..86f4ab2 100644
--- a/src/components/NavItem.vue
+++ b/src/components/NavItem.vue
@@ -2,9 +2,9 @@
 </script>
 
 <template>
-    <li>
-        <slot />
-    </li>
+  <li v-if="$slots.default">
+    <slot />
+  </li>
 </template>
 
 <style scoped>
diff --git a/src/components/NavTree.vue b/src/components/NavTree.vue
index 53c9e7e..76575b8 100644
--- a/src/components/NavTree.vue
+++ b/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>
diff --git a/src/style.css b/src/style.css
index 0332299..dd4d596 100644
--- a/src/style.css
+++ b/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;
diff --git a/src/views/gamecore/blocks/ModifyCurrentSkillDelayCost.vue b/src/views/gamecore/blocks/ModifyCurrentSkillDelayCost.vue
index 63f9624..a0b4fab 100644
--- a/src/views/gamecore/blocks/ModifyCurrentSkillDelayCost.vue
+++ b/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>
diff --git a/src/views/gamecore/blocks/ModifySPNew.vue b/src/views/gamecore/blocks/ModifySPNew.vue
index a219734..689c82d 100644
--- a/src/views/gamecore/blocks/ModifySPNew.vue
+++ b/src/views/gamecore/blocks/ModifySPNew.vue
@@ -28,9 +28,6 @@
       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>
@@ -38,6 +35,9 @@
       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>
diff --git a/src/views/navigation/AvatarNav.vue b/src/views/navigation/AvatarNav.vue
index 302c4e2..02b08da 100644
--- a/src/views/navigation/AvatarNav.vue
+++ b/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>
 
diff --git a/src/views/navigation/AvatarSubNav.vue b/src/views/navigation/AvatarSubNav.vue
index 32f66a3..3cf38fb 100644
--- a/src/views/navigation/AvatarSubNav.vue
+++ b/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>
 
diff --git a/src/views/navigation/CharacterOtherAbilitiesNav.vue b/src/views/navigation/CharacterOtherAbilitiesNav.vue
index bd84536..1a50b6d 100644
--- a/src/views/navigation/CharacterOtherAbilitiesNav.vue
+++ b/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>
 
diff --git a/src/views/navigation/CharacterSkillAbilitiesNav.vue b/src/views/navigation/CharacterSkillAbilitiesNav.vue
index e35e975..0c3835a 100644
--- a/src/views/navigation/CharacterSkillAbilitiesNav.vue
+++ b/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>
 
diff --git a/src/views/navigation/CommitNav.vue b/src/views/navigation/CommitNav.vue
index d02871b..85217d0 100644
--- a/src/views/navigation/CommitNav.vue
+++ b/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,6 +10,8 @@
 
   const search = ref<string>('')
   provide('search', search)
+  
+  const forceNavigationOpen = computed(() => !!search.value)
 </script>
 
 <template>
@@ -17,7 +19,7 @@
 
     <section class="mainnav">
       <input v-model.trim="search" placeholder="Search" />
-      <NavTree>
+      <NavTree :forceOpen="forceNavigationOpen">
         <NavItem> <AvatarNav />     </NavItem>
         <NavItem> <MonsterNav />    </NavItem>
         <NavItem> <EquipmentNav />  </NavItem>
diff --git a/src/views/navigation/EquipmentNav.vue b/src/views/navigation/EquipmentNav.vue
index fb8d563..911c565 100644
--- a/src/views/navigation/EquipmentNav.vue
+++ b/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>
 
diff --git a/src/views/navigation/EquipmentSubNav.vue b/src/views/navigation/EquipmentSubNav.vue
index 8d509ad..fe4d608 100644
--- a/src/views/navigation/EquipmentSubNav.vue
+++ b/src/views/navigation/EquipmentSubNav.vue
@@ -6,7 +6,7 @@
 
   const props = defineProps<{commitId:string, objectId:number}>()
 
-  const equipment = ref<Equipment>(await getEquipment(props.commitId, props.objectId))
+  const equipment = ref<Equipment>()
 
   watchEffect(async () => 
   {
@@ -15,23 +15,25 @@
 </script>
 
 <template>
-  <h1>{{ equipment.EquipmentName.Text }}</h1>
-  <NavTree>
-    <NavItem v-if="equipment.Skill">
-      <NavTree>
-        <template #header>
-          Skill
-          <span class="minor">{{ equipment.Skill.SkillName.Text }}</span>
-          <span class="minor">{{ equipment.Skill.SkillID }}</span>
-        </template>
-        <NavItem>
-          <RouterLink :to="{ name:'equipmentAbility', params:{ commitId: commitId, objectId: objectId, abilityId: equipment.Skill.AbilityName, }}">
-            {{ equipment.Skill.AbilityName }}
-          </RouterLink>
-        </NavItem>
-      </NavTree>
-    </NavItem>
-  </NavTree>
+  <template v-if="equipment" :key="objectId">
+    <h1>{{ equipment.EquipmentName.Text }}</h1>
+    <NavTree>
+      <NavItem v-if="equipment.Skill">
+        <NavTree :startsOpen="true">
+          <template #header>
+            Skill
+            <span class="minor">{{ equipment.Skill.SkillName.Text }}</span>
+            <span class="minor">{{ equipment.Skill.SkillID }}</span>
+          </template>
+          <NavItem>
+            <RouterLink :to="{ name:'equipmentAbility', params:{ commitId: commitId, objectId: objectId, abilityId: equipment.Skill.AbilityName, }}">
+              {{ equipment.Skill.AbilityName }}
+            </RouterLink>
+          </NavItem>
+        </NavTree>
+      </NavItem>
+    </NavTree>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/views/navigation/MonsterNav.vue b/src/views/navigation/MonsterNav.vue
index e138293..e2db6d5 100644
--- a/src/views/navigation/MonsterNav.vue
+++ b/src/views/navigation/MonsterNav.vue
@@ -39,31 +39,25 @@
 <template>
   <NavTree>
     <template #header>Monsters</template>
-    <template v-for="(monsterTemplate, monsterCampName) in monstersSearchResults">
-      <NavItem>
+    <NavItem v-for="(monsterTemplate, monsterCampName) in monstersSearchResults">
 
-        <NavTree>
-          <template #header>{{ monsterCampName }}</template>
-          <template v-for="(monsters, monsterTemplateName) in monsterTemplate">
-            <NavItem>
-
-              <NavTree>
-                <template #header :title="monsterTemplateName.toString()">{{ monsterTemplateName }}</template>
-                <template v-for="monster in monsters" :key="monster.MonsterID">
-                  <NavItem>
-                    <RouterLink :to="{ name:'monster', params:{ commitId: commitId, objectId: monster.MonsterID }}">
-                      <span :title="monster.MonsterName.Text">{{ monster.MonsterName.Text }}</span>
-                    </RouterLink>
-                  </NavItem>
-                </template>
-              </NavTree>
+      <NavTree :startsOpen="true">
+        <template #header>{{ monsterCampName }}</template>
+        <NavItem v-for="(monsters, monsterTemplateName) in monsterTemplate">
 
+          <NavTree>
+            <template #header :title="monsterTemplateName.toString()">{{ monsterTemplateName }}</template>
+            <NavItem v-for="monster in monsters" :key="monster.MonsterID">
+              <RouterLink :to="{ name:'monster', params:{ commitId: commitId, objectId: monster.MonsterID }}">
+                <span :title="monster.MonsterName.Text">{{ monster.MonsterName.Text }}</span>
+              </RouterLink>
             </NavItem>
-          </template>
-        </NavTree>
+          </NavTree>
+
+        </NavItem>
+      </NavTree>
 
-      </NavItem>
-    </template>
+    </NavItem>
   </NavTree>
 </template>
 
diff --git a/src/views/navigation/MonsterSubNav.vue b/src/views/navigation/MonsterSubNav.vue
index f6dfbb4..f691cad 100644
--- a/src/views/navigation/MonsterSubNav.vue
+++ b/src/views/navigation/MonsterSubNav.vue
@@ -10,27 +10,29 @@
 
   const props = defineProps<{commitId:string, objectId:number}>()
 
-  const monster = ref<Monster>(await getMonster(props.commitId, props.objectId))
+  const monster = ref<Monster>()
   const monsterSkills = ref<MonsterSkill[]>([])
   const character = ref<Character>()
 
+  const ready = ref(false)
   watchEffect(async () => 
   {
     monster.value = await getMonster(props.commitId, props.objectId)
     monsterSkills.value = await getMonsterSkillsByIds(props.commitId, monster.value.SkillList)
     character.value = await getCharacterByMonster(props.commitId, monster.value)
+    ready.value = true
   })
 </script>
 
 <template>
-  <h1>{{ monster.MonsterName.Text }}</h1>
-  <span v-if="!character" class="minor">(Missing character data)</span>
-  <NavTree>
-    <NavItem>
-      <NavTree>
-        <template #header>Skills</template>
-        <template v-for="skill in monsterSkills" :key="skill.SkillID">
-          <NavItem>
+  <template v-if="monster" :key="objectId">
+    <h1>{{ monster.MonsterName.Text }}</h1>
+    <span v-if="!character" class="minor">(Missing character data)</span>
+    <NavTree>
+      <NavItem>
+        <NavTree :startsOpen="true">
+          <template #header>Skills</template>
+          <NavItem v-for="skill in monsterSkills" :key="skill.SkillID">
             <CharacterSkillAbilitiesNav v-if="character" :character="character" :skillTriggerKey="skill.SkillTriggerKey">
               <template #header>
                 {{ skill.SkillTypeDesc.Text }} - {{ skill.SkillTag.Text }} 
@@ -44,21 +46,20 @@
               </template>
             </CharacterSkillAbilitiesNav>
           </NavItem>
-        </template>
-      </NavTree>
-    </NavItem>
-    <NavItem v-if="character">
-      <div></div>
-      <CharacterOtherAbilitiesNav :character="character">
-        <template #header>Other Abilities</template>
-        <template #default="slotProps">
-        <RouterLink :to="{ name:'monsterAbility', params:{ commitId: commitId, objectId: objectId, abilityId: slotProps.ability, }}">
-          {{ slotProps.ability }}
-        </RouterLink>
-        </template>
-      </CharacterOtherAbilitiesNav>
-    </NavItem>
-  </NavTree>
+        </NavTree>
+      </NavItem>
+      <NavItem v-if="character">
+        <CharacterOtherAbilitiesNav :character="character">
+          <template #header>Other Abilities</template>
+          <template #default="slotProps">
+            <RouterLink :to="{ name:'monsterAbility', params:{ commitId: commitId, objectId: objectId, abilityId: slotProps.ability, }}">
+              {{ slotProps.ability }}
+            </RouterLink>
+          </template>
+        </CharacterOtherAbilitiesNav>
+      </NavItem>
+    </NavTree>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/views/navigation/RelicSetNav.vue b/src/views/navigation/RelicSetNav.vue
index 3f0a79c..5896891 100644
--- a/src/views/navigation/RelicSetNav.vue
+++ b/src/views/navigation/RelicSetNav.vue
@@ -22,13 +22,11 @@
 <template>
   <NavTree>
     <template #header>Relic Sets</template>
-    <template v-for="relicset in relicsetsSearchResults" :key="relicset.SetID">
-      <NavItem>
-        <RouterLink :to="{ name:'relicset', params:{ commitId: commitId, objectId: relicset.SetID }}">
-          <span :title="relicset.SetName.Text">{{ relicset.SetName.Text }}</span>
-        </RouterLink>
-      </NavItem>
-    </template>
+    <NavItem v-for="relicset in relicsetsSearchResults" :key="relicset.SetID">
+      <RouterLink :to="{ name:'relicset', params:{ commitId: commitId, objectId: relicset.SetID }}">
+        <span :title="relicset.SetName.Text">{{ relicset.SetName.Text }}</span>
+      </RouterLink>
+    </NavItem>
   </NavTree>
 </template>
 
diff --git a/src/views/navigation/RelicSetSubNav.vue b/src/views/navigation/RelicSetSubNav.vue
index 9f91f66..c27a3f9 100644
--- a/src/views/navigation/RelicSetSubNav.vue
+++ b/src/views/navigation/RelicSetSubNav.vue
@@ -6,7 +6,7 @@
 
   const props = defineProps<{commitId:string, objectId:number}>()
 
-  const relicset = ref<RelicSet>(await getRelicSet(props.commitId, props.objectId))
+  const relicset = ref<RelicSet>()
 
   watchEffect(async () => 
   {
@@ -15,26 +15,26 @@
 </script>
 
 <template>
-  <h1>{{ relicset.SetName.Text }}</h1>
-  <NavTree>
-    <NavItem v-if="relicset.Skills">
-      <NavTree>
-        <template #header>Skills</template>
-        <template v-for="skill in relicset.Skills" :key="skill.RankID">
-          <NavItem>
-            <NavTree v-if="skill.AbilityName">
+  <template v-if="relicset" :key="objectId">
+    <h1>{{ relicset.SetName.Text }}</h1>
+    <NavTree>
+      <NavItem v-if="relicset.Skills">
+        <NavTree :startsOpen="true">
+          <template #header>Skills</template>
+          <NavItem v-for="skill, rank in relicset.Skills" :key="rank">
+            <NavTree :startsOpen="true">
               <template #header>{{ skill.RequireNum }} Pieces</template>
-              <NavItem>
+              <NavItem v-if="skill.AbilityName">
                 <RouterLink :to="{ name:'relicsetAbility', params:{ commitId: commitId, objectId: objectId, abilityId: skill.AbilityName, }}">
                   {{ skill.AbilityName }}
                 </RouterLink>
               </NavItem>
             </NavTree>
           </NavItem>
-        </template>
-      </NavTree>
-    </NavItem>
-  </NavTree>
+        </NavTree>
+      </NavItem>
+    </NavTree>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/views/navigation/StatusNav.vue b/src/views/navigation/StatusNav.vue
index 48e5d56..0e77ffb 100644
--- a/src/views/navigation/StatusNav.vue
+++ b/src/views/navigation/StatusNav.vue
@@ -22,13 +22,11 @@
 <template>
   <NavTree>
     <template #header>Status Effects</template>
-    <template v-for="status in statusesSearchResults" :key="status.StatusID">
-      <NavItem>
-        <RouterLink :to="{ name:'status', params:{ commitId: commitId, objectId: status.StatusID }}">
-          <span :title="status.StatusName.Text">{{ status.StatusName.Text }}</span>
-        </RouterLink>
-      </NavItem>
-    </template>
+    <NavItem v-for="status in statusesSearchResults" :key="status.StatusID">
+      <RouterLink :to="{ name:'status', params:{ commitId: commitId, objectId: status.StatusID }}">
+        <span :title="status.StatusName.Text">{{ status.StatusName.Text }}</span>
+      </RouterLink>
+    </NavItem>
   </NavTree>
 </template>
 
diff --git a/src/views/navigation/StatusSubNav.vue b/src/views/navigation/StatusSubNav.vue
index 09e2a21..633cbd6 100644
--- a/src/views/navigation/StatusSubNav.vue
+++ b/src/views/navigation/StatusSubNav.vue
@@ -6,7 +6,7 @@
 
   const props = defineProps<{commitId:string, objectId:number}>()
 
-  const status = ref<Status>(await getStatus(props.commitId, props.objectId))
+  const status = ref<Status>()
 
   watchEffect(async () => 
   {
@@ -15,19 +15,21 @@
 </script>
 
 <template>
-  <h1>{{ status.StatusName.Text }}</h1>
-  <NavTree>
-    <NavItem v-if="status.ModifierName">
-      <NavTree>
-        <template #header>Modifier</template>
-        <NavItem>
-          <RouterLink :to="{ name:'statusModifier', params:{ commitId: commitId, objectId: objectId, modifierId: status.ModifierName, }}">
-            {{ status.ModifierName }}
-          </RouterLink>
-        </NavItem>
-      </NavTree>
-    </NavItem>
-  </NavTree>
+  <template v-if="status" :key="objectId">
+    <h1>{{ status.StatusName.Text }}</h1>
+    <NavTree>
+      <NavItem v-if="status.ModifierName">
+        <NavTree :startsOpen="true">
+          <template #header>Modifier</template>
+          <NavItem>
+            <RouterLink :to="{ name:'statusModifier', params:{ commitId: commitId, objectId: objectId, modifierId: status.ModifierName, }}">
+              {{ status.ModifierName }}
+            </RouterLink>
+          </NavItem>
+        </NavTree>
+      </NavItem>
+    </NavTree>
+  </template>
 </template>
 
 <style scoped>