⚡ enhance (appsidebar): improve sidebar navigation spacing and appearance

app/components/layout/AppSidebar.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-const navMenu: {
-  heading: string
-  items: Array<any>
-} = ref({
-  heading: 'Menu Utama',
-  items: [],
-})
+const navMenu = ref([])
 
 const teams: {
   name: string
@@ -45,7 +39,7 @@ async function setMenu() {
   const position_code = 'sys'
   const res = await fetch(`/side-menu-items/${position_code}.json`)
   const rawMenu = await res.text()
-  navMenu.value.items = JSON.parse(rawMenu)
+  navMenu.value = JSON.parse(rawMenu)
 }
 </script>
 
@@ -55,15 +49,20 @@ async function setMenu() {
       <LayoutSidebarNavHeader :teams="teams" />
     </SidebarHeader>
     <SidebarContent>
-      <SidebarGroup v-if="navMenu.items.length > 0">
-        <SidebarGroupLabel>
-          {{ navMenu.heading }}
-        </SidebarGroupLabel>
-        <component
-:is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
-          class="my-2 mb-2"
-/>
-      </SidebarGroup>
+      <template v-if="navMenu.length > 0">
+        <SidebarGroup v-for="(nav, indexGroup) in navMenu" :key="indexGroup">
+          <SidebarGroupLabel v-if="nav.heading">
+            {{ nav.heading }}
+          </SidebarGroupLabel>
+          <component
+            :is="resolveNavItemComponent(item)"
+            v-for="(item, index) in nav.items"
+            :key="index"
+            :item="item"
+            class="my-1 mb-1"
+          />
+        </SidebarGroup>
+      </template>
       <template v-else>
         <div class="p-5">
           <div v-for="n in 10" :key="n" class="my-4 h-8 animate-pulse rounded bg-gray-200 py-2"></div>
@@ -71,9 +70,12 @@ async function setMenu() {
       </template>
       <SidebarGroup class="mt-auto">
         <component
-:is="resolveNavItemComponent(item)" v-for="(item, index) in navMenuBottom" :key="index" :item="item"
+          :is="resolveNavItemComponent(item)"
+          v-for="(item, index) in navMenuBottom"
+          :key="index"
+          :item="item"
           size="sm"
-/>
+        />
       </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>

app/components/layout/SidebarNavLink.vue

@@ -21,12 +21,12 @@ const { setOpenMobile } = useSidebar()
       <SidebarMenuButton as-child :tooltip="item.title" :size="size" class="">
         <NuxtLink
           :to="item.link"
-          class="group flex items-center gap-3 rounded-lg px-3 py-4 text-sm font-medium transition-all duration-200"
+          class="group flex items-center gap-3 rounded-lg px-2 py-4 text-sm font-medium transition-all duration-200"
           active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >
           <Icon :name="item.icon || ''" mode="svg" />
-          <span>{{ item.title }}</span>
+          <span class="mx-1">{{ item.title }}</span>
           <span
             v-if="item.new"
             class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline"