From 930f86254751a8ec2a5fcc6046efd5db00e26ffd Mon Sep 17 00:00:00 2001
From: Sukomal Dutta <100500478+Sukomal07@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:06:53 +0530
Subject: [PATCH] fix website jumping isuue (#1612)

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
---
 .../components/icons/CategoryListItem.vue     | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/docs/.vitepress/theme/components/icons/CategoryListItem.vue b/docs/.vitepress/theme/components/icons/CategoryListItem.vue
index 9472a2c73..b0888ebf7 100644
--- a/docs/.vitepress/theme/components/icons/CategoryListItem.vue
+++ b/docs/.vitepress/theme/components/icons/CategoryListItem.vue
@@ -1,48 +1,50 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useCategoryView } from '../../composables/useCategoryView'
+import { onMounted } from 'vue';
+import { useCategoryView } from '../../composables/useCategoryView';
 
 interface Header {
-  level: number
-  title: string
-  slug: string
-  iconCount: number
-  link: string
-  children: Header[]
+  level: number;
+  title: string;
+  slug: string;
+  iconCount: number;
+  link: string;
+  children: Header[];
 }
 
 type MenuItem = Omit<Header, 'slug' | 'children'> & {
-  children?: MenuItem[]
-}
+  children?: MenuItem[];
+};
 
 const props = defineProps<{
-  headers: MenuItem[]
-  root?: boolean
-}>()
+  headers: MenuItem[];
+  root?: boolean;
+}>();
 
-const { selectedCategory } = useCategoryView()
+const { selectedCategory } = useCategoryView();
 
 function onClick(event: Event) {
-  const target = (event.target as HTMLElement).nodeName === 'span' ? (event.target as HTMLElement).parentNode : event.target as HTMLElement
-  const id = '#' + (target as HTMLAnchorElement).href!.split('#')[1]
-  const decodedId = decodeURIComponent(id)
+  const target =
+    (event.target as HTMLElement).nodeName === 'span'
+      ? (event.target as HTMLElement).parentNode
+      : (event.target as HTMLElement);
+  const href = (target as HTMLAnchorElement)?.href;
 
-  selectedCategory.value = decodedId.replace('#', '')
+  if (href) {
+    const id = '#' + href.split('#')[1];
+    const decodedId = decodeURIComponent(id);
 
-  const heading = document.querySelector<HTMLAnchorElement>(decodedId)
-  heading?.focus()
+    selectedCategory.value = decodedId.replace('#', '');
+
+    const heading = document.querySelector<HTMLAnchorElement>(decodedId);
+    heading?.focus();
+  }
 }
 </script>
 
 <template>
   <ul :class="root ? 'root' : 'nested'">
     <li v-for="{ children, link, title, iconCount } in headers">
-      <a
-        class="outline-link"
-        :href="link"
-        @click="onClick"
-        :title="title"
-      >
+      <a class="outline-link" :href="link" @click="onClick" :title="title">
         <span>
           {{ title }}
         </span>