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

app/components/layout/AppSidebar.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-const navMenu: {
+const navMenu = ref([])
-  heading: string
-  items: Array<any>
-} = ref({
-  heading: 'Menu Utama',
-  items: [],
-})
 
 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">
+      <template v-if="navMenu.length > 0">
-        <SidebarGroupLabel>
+        <SidebarGroup v-for="(nav, indexGroup) in navMenu" :key="indexGroup">
-          {{ navMenu.heading }}
+          <SidebarGroupLabel v-if="nav.heading">
-        </SidebarGroupLabel>
+            {{ nav.heading }}
-        <component
+          </SidebarGroupLabel>
-:is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
+          <component
-          class="my-2 mb-2"
+            :is="resolveNavItemComponent(item)"
-/>
+            v-for="(item, index) in nav.items"
-      </SidebarGroup>
+            :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"

public/side-menu-items/sys.json

@@ -1,103 +1,247 @@
 [
   {
-    "title": "Dashboard",
+    "heading": "Menu Utama",
-    "icon": "i-lucide-home",
+    "items": [
-    "link": "/"
-  },
-  {
-    "title": "Rawat Jalan",
-    "icon": "i-lucide-stethoscope",
-    "children": [
       {
-        "title": "Antrian Pendaftaran",
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
         "icon": "i-lucide-stethoscope",
-        "link": "/outpatient/registration-queue"
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "icon": "i-lucide-stethoscope",
+            "link": "/outpatient/registration-queue"
+          },
+          {
+            "title": "Pendaftaran",
+            "icon": "i-lucide-building-2",
+            "link": "/outpatient/registration"
+          },
+          {
+            "title": "Antrian Pemeriksaan",
+            "icon": "i-lucide-stethoscope",
+            "link": "/outpatient/examination-queue"
+          },
+          {
+            "title": "Pendaftaran",
+            "icon": "i-lucide-building-2",
+            "link": "/outpatient/examination"
+          }
+        ]
       },
       {
-        "title": "Pendaftaran",
+        "title": "IGD",
-        "icon": "i-lucide-building-2",
-        "link": "/outpatient/registration"
-      },
-      {
-        "title": "Antrian Pemeriksaan",
         "icon": "i-lucide-stethoscope",
-        "link": "/outpatient/examination-queue"
+        "children": [
+          {
+            "title": "Triase",
+            "icon": "i-lucide-stethoscope",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Pendaftaran",
+            "icon": "i-lucide-building-2",
+            "link": "/emergency/registration"
+          },
+          {
+            "title": "Pemeriksaan",
+            "icon": "i-lucide-building-2",
+            "link": "/emergency/examination"
+          }
+        ]
       },
       {
-        "title": "Pendaftaran",
+        "title": "Rawat Inap",
         "icon": "i-lucide-building-2",
-        "link": "/outpatient/examination"
+        "children": [
+          {
+            "title": "Permintaan",
+            "icon": "i-lucide-stethoscope",
+            "link": "/outpatient/request"
+          },
+          {
+            "title": "Pendaftaran",
+            "icon": "i-lucide-building-2",
+            "link": "/outpatient/registration"
+          },
+          {
+            "title": "Pemeriksaan",
+            "icon": "i-lucide-building-2",
+            "link": "/outpatient/examination"
+          }
+        ]
+      },
+      {
+        "title": "Rehabilitasi Medik",
+        "icon": "i-lucide-heart",
+        "link": "/rehabilitasi",
+        "children": [
+          {
+            "title": "Antrian Pendaftaran",
+            "icon": "i-lucide-stethoscope",
+            "link": "/rehab/examination-queue"
+          },
+          {
+            "title": "Pendaftaran",
+            "icon": "i-lucide-building-2",
+            "link": "/rehab/registration"
+          },
+          {
+            "title": "Antrian Pemeriksaan",
+            "icon": "i-lucide-stethoscope",
+            "link": "/rehab/examination-queue"
+          },
+          {
+            "title": "Pemeriksaan",
+            "icon": "i-lucide-building-2",
+            "link": "/rehab/examination"
+          }
+        ]
+      },
+      {
+        "title": "Farmasi",
+        "icon": "i-lucide-users",
+        "children": [
+          {
+            "title": "Permintaan",
+            "icon": "i-lucide-user",
+            "link": "/pharmacy/request"
+          },
+          {
+            "title": "Standing Order",
+            "icon": "i-lucide-user",
+            "link": "/pharmacy/standing-order"
+          }
+        ]
+      },
+      {
+        "title": "Lab",
+        "icon": "i-lucide-briefcase",
+        "link": "/lab-order"
+      },
+      {
+        "title": "Radiologi",
+        "icon": "i-lucide-radio",
+        "link": "/radiology-order"
+      },
+      {
+        "title": "Gizi",
+        "icon": "i-lucide-briefcase",
+        "link": "/nutrition-order"
+      },
+      {
+        "title": "Pembayaran",
+        "icon": "i-lucide-banknote-arrow-up",
+        "link": "/payment"
       }
     ]
   },
   {
-    "title": "Karyawan",
+    "heading": "Client",
-    "icon": "i-lucide-users",
+    "items": [
-    "children": [
       {
-        "title": "User",
+        "title": "Pasien",
+        "icon": "i-lucide-users",
+        "link": "/client/patient"
+      },
+      {
+        "title": "Rekam Medis",
+        "icon": "i-lucide-file-text",
+        "link": "/client/medical-record"
+      }
+    ]
+  },
+  {
+    "heading": "Integrasi",
+    "items": [
+      {
+        "title": "BPJS",
+        "icon": "i-lucide-refresh-cw",
+        "link": "/integration/bpjs",
+        "badge": "Live"
+      },
+      {
+        "title": "SATUSEHAT",
+        "icon": "i-lucide-database",
+        "link": "/integration/satusehat",
+        "badge": "FHIR"
+      }
+    ]
+  },
+  {
+    "heading": "Source",
+    "items": [
+      {
+        "title": "Peralatan dan Perlengkapan",
+        "icon": "i-lucide-radius",
+        "children": [
+          {
+            "title": "Obat",
+            "icon": "i-lucide-stethoscope",
+            "link": "/tools-equipment-src/medicine"
+          },
+          {
+            "title": "Peralatan",
+            "icon": "i-lucide-tools",
+            "link": "/tools-equipment-src/device"
+          },
+          {
+            "title": "Perlengkapan (BMHP)",
+            "icon": "i-lucide-stethoscope",
+            "link": "/tools-equipment-src/material"
+          },
+          {
+            "title": "Metode Obat",
+            "icon": "i-lucide-user",
+            "link": "/tools-equipment-src/medicine-method"
+          },
+          {
+            "title": "Jenis Obat",
+            "icon": "i-lucide-user",
+            "link": "/tools-equipment-src/medicine-type"
+          }
+        ]
+      },
+      {
+        "title": "Pengguna",
         "icon": "i-lucide-user",
-        "link": "/human-src/user"
+        "link": "/human-src/employee"
-      }
-    ]
-  },
-  {
-    "title": "Dokter",
-    "icon": "i-lucide-cross",
-    "link": "/doctor"
-  },
-  {
-    "title": "Pasien",
-    "icon": "i-lucide-users",
-    "link": "/patient"
-  },
-  {
-    "title": "Rehabilitasi Medik",
-    "icon": "i-lucide-heart",
-    "link": "/rehabilitasi",
-    "children": [
-      {
-        "title": "Daftar Kunjungan Rawat Jalan",
-        "icon": "i-lucide-stethoscope",
-        "link": "/rehab/registration-queue"
       },
       {
-        "title": "Daftar Kunjungan Rawat Inap",
+        "title": "Layanan",
-        "icon": "i-lucide-building-2",
+        "icon": "i-lucide-card-sim",
-        "link": "/rehab/examination"
+        "children": [
+          {
+            "title": "Counter",
+            "icon": "i-lucide-stethoscope",
+            "link": "/tools-equipment-src/medicine"
+          },
+          {
+            "title": "Bed",
+            "icon": "i-lucide-tools",
+            "link": "/tools-equipment-src/device"
+          },
+          {
+            "title": "Kamar",
+            "icon": "i-lucide-stethoscope",
+            "link": "/tools-equipment-src/medical-device"
+          },
+          {
+            "title": "Lantai",
+            "icon": "i-lucide-user",
+            "link": "/tools-equipment-src/medicine-method"
+          },
+          {
+            "title": "Gedung",
+            "icon": "i-lucide-user",
+            "link": "/tools-equipment-src/medicine-type"
+          }
+        ]
       }
     ]
-  },
-  {
-    "title": "Rawat Inap",
-    "icon": "i-lucide-building-2",
-    "link": "/rawat-inap"
-  },
-  {
-    "title": "VClaim BPJS",
-    "icon": "i-lucide-refresh-cw",
-    "link": "/vclaim",
-    "badge": "Live"
-  },
-  {
-    "title": "SATUSEHAT",
-    "icon": "i-lucide-database",
-    "link": "/satusehat",
-    "badge": "FHIR"
-  },
-  {
-    "title": "Medical Records",
-    "icon": "i-lucide-file-text",
-    "link": "/medical-records"
-  },
-  {
-    "title": "Laporan",
-    "icon": "i-lucide-clipboard-list",
-    "link": "/laporan"
-  },
-  {
-    "title": "Monitoring",
-    "icon": "i-lucide-bar-chart-3",
-    "link": "/monitoring"
   }
 ]