tabSize: 4

src/components/SideBar.vue

@@ -6,80 +6,80 @@ import { activeViewMode } from '@/composables/useViewMode'
 const loading = inject<boolean>('loading')
 
 const props = defineProps<{
-  viewModes: ViewMode[]
-  activeViewMode: ViewMode
+    viewModes: ViewMode[]
+    activeViewMode: ViewMode
 }>()
 
 const emit = defineEmits<{
-  setViewMode: [viewMode: ViewMode]
-  collapse: [collapse: boolean]
+    setViewMode: [viewMode: ViewMode]
+    collapse: [collapse: boolean]
 }>()
 
 const setActiveNote = (noteId: string | undefined) => {
-  emit('collapse', windowIsMobile())
-  baseSetActiveNote(noteId)
+    emit('collapse', windowIsMobile())
+    baseSetActiveNote(noteId)
 }
 
 const setViewMode = (viewMode: ViewMode) => {
-  emit('collapse', windowIsMobile())
-  emit('setViewMode', viewMode)
+    emit('collapse', windowIsMobile())
+    emit('setViewMode', viewMode)
 }
 </script>
 <template>
-  <div
-    id="sidebar"
-    class="fixed bottom-0 top-0 flex flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:w-sidebar-mobile max-sm:gap-6 max-sm:text-[110%] sm:w-sidebar"
-  >
-    <SideBarMenu>
-      <template #header>Root note</template>
-      <template #items>
-        <SideBarMenuItem
-          icon="fas fa-fw fa-home"
-          @click="setActiveNote(rootNote?.id)"
-          :title="rootNote?.title"
-          v-if="!loading"
-        >
-          {{ rootNote?.title }}
-        </SideBarMenuItem>
-        <SkeletonSidebarItem v-else />
-      </template>
-    </SideBarMenu>
-    <SideBarMenu>
-      <template #header>View mode</template>
-      <template #items>
-        <template v-if="!loading">
-          <SideBarMenuItem
-            v-for="viewMode in props.viewModes"
-            :key="viewMode.name"
-            :icon="viewMode.icon"
-            :active="viewMode.name === activeViewMode.name"
-            @click="setViewMode(viewMode)"
-          >
-            {{ viewMode.name }}
-          </SideBarMenuItem>
-        </template>
-        <SkeletonSidebarItem :n="3" v-else />
-      </template>
-    </SideBarMenu>
-    <SideBarMenu>
-      <template #header>
-        <i class="far fa-clock fa-fw mr-2" />
-        Recent notes
-      </template>
-      <template #items>
-        <template v-if="!loading">
-          <SideBarMenuItem
-            v-for="note in notes.slice(-5)"
-            :key="note.id"
-            icon="far fa-file-alt fa-fw"
-            @click="setActiveNote(note.id)"
-            :title="rootNote?.title"
-          >
-            {{ note.title }}
-          </SideBarMenuItem>
-        </template>
-        <SkeletonSidebarItem v-else :n="5" />
-      </template>
-    </SideBarMenu>
-  </div>
+    <div
+        id="sidebar"
+        class="fixed bottom-0 top-0 flex flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:w-sidebar-mobile max-sm:gap-6 max-sm:text-[110%] sm:w-sidebar"
+    >
+        <SideBarMenu>
+            <template #header>Root note</template>
+            <template #items>
+                <SideBarMenuItem
+                    icon="fas fa-fw fa-home"
+                    @click="setActiveNote(rootNote?.id)"
+                    :title="rootNote?.title"
+                    v-if="!loading"
+                >
+                    {{ rootNote?.title }}
+                </SideBarMenuItem>
+                <SkeletonSidebarItem v-else />
+            </template>
+        </SideBarMenu>
+        <SideBarMenu>
+            <template #header>View mode</template>
+            <template #items>
+                <template v-if="!loading">
+                    <SideBarMenuItem
+                        v-for="viewMode in props.viewModes"
+                        :key="viewMode.name"
+                        :icon="viewMode.icon"
+                        :active="viewMode.name === activeViewMode.name"
+                        @click="setViewMode(viewMode)"
+                    >
+                        {{ viewMode.name }}
+                    </SideBarMenuItem>
+                </template>
+                <SkeletonSidebarItem :n="3" v-else />
+            </template>
+        </SideBarMenu>
+        <SideBarMenu>
+            <template #header>
+                <i class="far fa-clock fa-fw mr-2" />
+                Recent notes
+            </template>
+            <template #items>
+                <template v-if="!loading">
+                    <SideBarMenuItem
+                        v-for="note in notes.slice(-5)"
+                        :key="note.id"
+                        icon="far fa-file-alt fa-fw"
+                        @click="setActiveNote(note.id)"
+                        :title="rootNote?.title"
+                    >
+                        {{ note.title }}
+                    </SideBarMenuItem>
+                </template>
+                <SkeletonSidebarItem v-else :n="5" />
+            </template>
+        </SideBarMenu>
+    </div>
 </template>