spacing cleanup

Author: connorabbas

resources/js/Layouts/Admin/Partials/DrawerMenu.vue

@@ -56,7 +56,7 @@ const exampleNestedMenuItems = ref([
                 icon: 'pi pi-cloud-upload',
                 command: () => {
                     alert('Example using programmatic functionality');
-                }
+                },
             },
             {
                 label: 'Download',
@@ -72,26 +72,20 @@ const exampleNestedMenuItems = ref([
 </script>
 
 <template>
-    <Drawer
-        v-model:visible="visible"
-        position="left"
-        :autoZIndex="false"
-    >
-        <div>
-            <div class="mb-5">
-                <p class="text-muted-color font-bold uppercase text-sm mb-2">
-                    Home
-                </p>
+    <Drawer v-model:visible="visible" position="left" :autoZIndex="false">
+        <div class="space-y-5">
+            <div class="space-y-2">
+                <p class="text-muted-color font-bold uppercase text-sm">Home</p>
                 <LinksPanelMenu :model="homeMenuItems" class="w-full" />
             </div>
-            <div class="mb-5">
-                <p class="text-muted-color font-bold uppercase text-sm mb-2">
+            <div class="space-y-2">
+                <p class="text-muted-color font-bold uppercase text-sm">
                     Analytics
                 </p>
                 <LinksPanelMenu :model="analyticsMenuItems" class="w-full" />
             </div>
-            <div class="mb-5">
-                <p class="text-muted-color font-bold uppercase text-sm mb-2">
+            <div class="space-y-2">
+                <p class="text-muted-color font-bold uppercase text-sm">
                     Example Nested
                 </p>
                 <LinksPanelMenu

resources/js/Layouts/Admin/Partials/SideMenuItems.vue

@@ -67,21 +67,19 @@ const exampleNestedMenuItems = [
 </script>
 
 <template>
-    <div class="h-full">
-        <div class="mb-5">
-            <p class="text-muted-color font-bold uppercase text-sm mb-2">
-                Home
-            </p>
+    <div class="h-full space-y-5">
+        <div class="space-y-2">
+            <p class="text-muted-color font-bold uppercase text-sm">Home</p>
             <LinksPanelMenu :model="homeMenuItems" class="w-full" />
         </div>
-        <div class="mb-5">
-            <p class="text-muted-color font-bold uppercase text-sm mb-2">
+        <div class="space-y-2">
+            <p class="text-muted-color font-bold uppercase text-sm">
                 Analytics
             </p>
             <LinksPanelMenu :model="analyticsMenuItems" class="w-full" />
         </div>
-        <div class="mb-5">
-            <p class="text-muted-color font-bold uppercase text-sm mb-2">
+        <div class="space-y-2">
+            <p class="text-muted-color font-bold uppercase text-sm">
                 Example Nested
             </p>
             <LinksPanelMenu :model="exampleNestedMenuItems" class="w-full" />

resources/js/Layouts/AuthenticatedLayout.vue

@@ -168,13 +168,17 @@ watchEffect(() => {
                 <!-- Mobile drawer menu -->
                 <Drawer v-model:visible="mobileMenuOpen" position="right">
                     <template #header>
-                        <ToggleDarkModeButton text severity="secondary" rounded />
+                        <ToggleDarkModeButton
+                            text
+                            severity="secondary"
+                            rounded
+                        />
                     </template>
                     <div>
-                        <div>
-                            <div class="mb-5">
+                        <div class="space-y-5">
+                            <div class="space-y-2">
                                 <p
-                                    class="text-muted-color font-bold uppercase text-sm mb-2"
+                                    class="text-muted-color font-bold uppercase text-sm"
                                 >
                                     Home
                                 </p>