1 files changed, 34 insertions, 34 deletions
diff --git a/src/components/CollapsibleToolMenu.vue b/src/components/CollapsibleToolMenu.vue
index b766255..de58ca1 100644
--- a/src/components/CollapsibleToolMenu.vue
+++ b/src/components/CollapsibleToolMenu.vue
@@ -1,39 +1,11 @@
-<template>
-  <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
-    <n-text tag="div" depth="3" class="category-name" @click="toggleCategoryCollapse({ name })">
-      <n-icon :component="ChevronRight" :class="{ rotated: isCollapsed }" size="16" />
-
-      <span>
-        {{ name }}
-      </span>
-    </n-text>
-
-    <n-collapse-transition :show="!isCollapsed">
-      <div class="menu-wrapper">
-        <div class="toggle-bar" @click="toggleCategoryCollapse({ name })" />
-
-        <n-menu
-          class="menu"
-          :value="(route.name as string)"
-          :collapsed-width="64"
-          :collapsed-icon-size="22"
-          :options="tools"
-          :indent="8"
-          :default-expand-all="true"
-        />
-      </div>
-    </n-collapse-transition>
-  </div>
-</template>
-
 <script setup lang="ts">
-import type { Tool, ToolCategory } from '@/tools/tools.types';
 import { ChevronRight } from '@vicons/tabler';
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
-import { toRefs, computed, h } from 'vue';
+import { computed, h, toRefs } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import MenuIconItem from './MenuIconItem.vue';
+import type { Tool, ToolCategory } from '@/tools/tools.types';
 
 const props = withDefaults(defineProps<{ toolsByCategory?: ToolCategory[] }>(), { toolsByCategory: () => [] });
 const { toolsByCategory } = toRefs(props);
@@ -49,8 +21,8 @@ const collapsedCategories = useStorage<Record<string, boolean>>(
   {
     deep: true,
     serializer: {
-      read: (v) => (v ? JSON.parse(v) : null),
-      write: (v) => JSON.stringify(v),
+      read: v => (v ? JSON.parse(v) : null),
+      write: v => JSON.stringify(v),
     },
   },
 );
@@ -61,9 +33,9 @@ function toggleCategoryCollapse({ name }: { name: string }) {
 
 const menuOptions = computed(() =>
   toolsByCategory.value.map(({ name, components }) => ({
-    name: name,
+    name,
     isCollapsed: collapsedCategories.value[name],
-    tools: components.map((tool) => ({
+    tools: components.map(tool => ({
       label: makeLabel(tool),
       icon: makeIcon(tool),
       key: tool.name,
@@ -74,6 +46,34 @@ const menuOptions = computed(() =>
 const themeVars = useThemeVars();
 </script>
 
+<template>
+  <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
+    <n-text tag="div" depth="3" class="category-name" @click="toggleCategoryCollapse({ name })">
+      <n-icon :component="ChevronRight" :class="{ rotated: isCollapsed }" size="16" />
+
+      <span>
+        {{ name }}
+      </span>
+    </n-text>
+
+    <n-collapse-transition :show="!isCollapsed">
+      <div class="menu-wrapper">
+        <div class="toggle-bar" @click="toggleCategoryCollapse({ name })" />
+
+        <n-menu
+          class="menu"
+          :value="route.name as string"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="tools"
+          :indent="8"
+          :default-expand-all="true"
+        />
+      </div>
+    </n-collapse-transition>
+  </div>
+</template>
+
 <style scoped lang="less">
 .category-name {
   font-size: 0.93em;