Add prettier config, format codebase

src/components/navs/Header.vue

@@ -28,6 +28,7 @@
       <div class="drawer-content" @click.stop>
         <div class="drawer-header">
           <img :src="Logo" alt="Logo" class="drawer-logo" />
+
           <button class="close-button" aria-label="Close Menu" @click="closeDrawer">
             <i class="pi pi-times"></i>
           </button>
@@ -35,12 +36,13 @@
 
         <div class="drawer-body">
           <!-- Navigation Categories -->
+
           <div class="drawer-navigation">
             <div class="categories-container">
-              <Category 
-                v-for="cat in CATEGORIES" 
-                :key="cat.name" 
-                :category="cat" 
+              <Category
+                v-for="cat in CATEGORIES"
+                :key="cat.name"
+                :category="cat"
                 :location="route"
                 :handle-click="onNavClick"
                 :handle-transition-navigation="handleMobileTransitionNavigation"
@@ -55,9 +57,9 @@
 
           <div class="drawer-section">
             <p class="section-title">Useful Links</p>
-            <router-link to="/text-animations/split-text" @click="closeDrawer" class="drawer-link">
-              Docs
-            </router-link>
+
+            <router-link to="/text-animations/split-text" @click="closeDrawer" class="drawer-link">Docs</router-link>
+
             <a href="https://github.com/DavidHDev/vue-bits" target="_blank" @click="closeDrawer" class="drawer-link">
               GitHub
               <i class="pi pi-arrow-up-right arrow-icon"></i>
@@ -68,6 +70,7 @@
 
           <div class="drawer-section">
             <p class="section-title">Other</p>
+
             <a href="https://davidhaz.com/" target="_blank" @click="closeDrawer" class="drawer-link">
               Who made this?
               <i class="pi pi-arrow-up-right arrow-icon"></i>
@@ -80,58 +83,58 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, defineComponent, h } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useStars } from '../../composables/useStars'
-import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories'
-import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue'
-import Logo from '../../assets/logos/vue-bits-logo.svg'
-import Star from '../../assets/common/star.svg'
+import { ref, onMounted, onUnmounted, computed, defineComponent, h } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStars } from '../../composables/useStars';
+import { CATEGORIES, NEW, UPDATED } from '../../constants/Categories';
+import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue';
+import Logo from '../../assets/logos/vue-bits-logo.svg';
+import Star from '../../assets/common/star.svg';
 
-const isDrawerOpen = ref(false)
-const isTransitioning = ref(false)
-const stars = useStars()
-const route = useRoute()
-const router = useRouter()
+const isDrawerOpen = ref(false);
+const isTransitioning = ref(false);
+const stars = useStars();
+const route = useRoute();
+const router = useRouter();
 
-const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase()
+const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();
 
 const toggleDrawer = () => {
-  isDrawerOpen.value = !isDrawerOpen.value
-}
+  isDrawerOpen.value = !isDrawerOpen.value;
+};
 
 const closeDrawer = () => {
-  isDrawerOpen.value = false
-}
+  isDrawerOpen.value = false;
+};
 
 const openGitHub = () => {
-  window.open('https://github.com/DavidHDev/vue-bits', '_blank')
-}
+  window.open('https://github.com/DavidHDev/vue-bits', '_blank');
+};
 
 const onNavClick = () => {
-  closeDrawer()
-  window.scrollTo(0, 0)
-}
+  closeDrawer();
+  window.scrollTo(0, 0);
+};
 
 const handleMobileTransitionNavigation = async (path: string) => {
-  if (isTransitioning.value || route.path === path) return
+  if (isTransitioning.value || route.path === path) return;
 
-  closeDrawer()
-  isTransitioning.value = true
+  closeDrawer();
+  isTransitioning.value = true;
 
   try {
-    await router.push(path)
-    window.scrollTo(0, 0)
+    await router.push(path);
+    window.scrollTo(0, 0);
   } finally {
-    isTransitioning.value = false
+    isTransitioning.value = false;
   }
-}
+};
 
 const handleKeyDown = (e: KeyboardEvent) => {
   if (e.key === 'Escape' && isDrawerOpen.value) {
-    closeDrawer()
+    closeDrawer();
   }
-}
+};
 
 const Category = defineComponent({
   name: 'Category',
@@ -167,63 +170,67 @@ const Category = defineComponent({
   },
   setup(props) {
     interface ItemType {
-      sub: string
-      path: string
-      isActive: boolean
-      isNew: boolean
-      isUpdated: boolean
+      sub: string;
+      path: string;
+      isActive: boolean;
+      isNew: boolean;
+      isUpdated: boolean;
     }
 
     const items = computed(() =>
       props.category.subcategories.map((sub: string): ItemType => {
-        const path = `/${slug(props.category.name)}/${slug(sub)}`
-        const activePath = props.location.path
+        const path = `/${slug(props.category.name)}/${slug(sub)}`;
+        const activePath = props.location.path;
         return {
           sub,
           path,
           isActive: activePath === path,
           isNew: (NEW as string[]).includes(sub),
-          isUpdated: (UPDATED as string[]).includes(sub),
-        }
+          isUpdated: (UPDATED as string[]).includes(sub)
+        };
       })
-    )
+    );
 
-    return () => h('div', { class: 'category' }, [
-      h('p', { class: 'category-name' }, props.category.name),
-      h('div', { class: 'category-items' },
-        items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
-          return h('router-link', {
-            key: path,
-            to: path,
-            class: [
-              'sidebar-item',
-              { 'active-sidebar-item': isActive },
-              { 'transitioning': props.isTransitioning }
-            ],
-            onClick: (e: Event) => {
-              e.preventDefault()
-              props.handleTransitionNavigation(path)
-            },
-            onMouseenter: (e: Event) => props.onItemMouseEnter(path, e),
-            onMouseleave: props.onItemMouseLeave
-          }, {
-            default: () => [
-              sub,
-              isNew ? h('span', { class: 'new-tag' }, 'New') : null,
-              isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
-            ].filter(Boolean)
+    return () =>
+      h('div', { class: 'category' }, [
+        h('p', { class: 'category-name' }, props.category.name),
+        h(
+          'div',
+          { class: 'category-items' },
+          items.value.map(({ sub, path, isActive, isNew, isUpdated }: ItemType) => {
+            return h(
+              'router-link',
+              {
+                key: path,
+                to: path,
+                class: ['sidebar-item', { 'active-sidebar-item': isActive }, { transitioning: props.isTransitioning }],
+                onClick: (e: Event) => {
+                  e.preventDefault();
+                  props.handleTransitionNavigation(path);
+                },
+                onMouseenter: (e: Event) => props.onItemMouseEnter(path, e),
+                onMouseleave: props.onItemMouseLeave
+              },
+              {
+                default: () =>
+                  [
+                    sub,
+                    isNew ? h('span', { class: 'new-tag' }, 'New') : null,
+                    isUpdated ? h('span', { class: 'updated-tag' }, 'Updated') : null
+                  ].filter(Boolean)
+              }
+            );
           })
-        })
-      )
-    ])
+        )
+      ]);
   }
-})
+});
 
 onMounted(() => {
-  document.addEventListener('keydown', handleKeyDown)
-})
+  document.addEventListener('keydown', handleKeyDown);
+});
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeyDown)
-})
-</script>
+  document.removeEventListener('keydown', handleKeyDown);
+});
+</script>