From 0f925e09fd7d5bb573486047891d0005b6f80819 Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Sat, 23 Jul 2022 16:18:10 +0700
Subject: [PATCH] now menu is rendered one time only

---
 resources/js/Components/DashboardLayout/Sidebar.vue   | 11 ++++-------
 .../js/Components/DashboardLayout/Sidebar/Builder.vue |  2 +-
 .../js/Components/DashboardLayout/Sidebar/Link.vue    |  2 +-
 .../js/Components/DashboardLayout/Sidebar/Links.vue   |  2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/resources/js/Components/DashboardLayout/Sidebar.vue b/resources/js/Components/DashboardLayout/Sidebar.vue
index c7cec56..c22cba0 100644
--- a/resources/js/Components/DashboardLayout/Sidebar.vue
+++ b/resources/js/Components/DashboardLayout/Sidebar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
 import axios from 'axios'
 import { usePage } from '@inertiajs/inertia-vue3'
 import Builder from './Sidebar/Builder.vue'
@@ -11,10 +11,11 @@ const self = getCurrentInstance()
 const menus = ref(usePage().props.value.$menus || [])
 const { user } = usePage().props.value
 
-const fetch = async () => {
+const f = async () => {
   try {
     const response = await axios.get(route('api.v1.user.menu', user.id))
-    return menus.value = response.data
+
+    menus.value = response.data
   } catch (e) {
     const response = await Swal.fire({
       title: 'Do you want to try again?',
@@ -27,10 +28,6 @@ const fetch = async () => {
     response.isConfirmed && fetch()
   }
 }
-
-Inertia.on('finish', () => fetch())
-
-onMounted(fetch)
 </script>
 
 <style scoped>
diff --git a/resources/js/Components/DashboardLayout/Sidebar/Builder.vue b/resources/js/Components/DashboardLayout/Sidebar/Builder.vue
index ee0abc8..ce7af2f 100644
--- a/resources/js/Components/DashboardLayout/Sidebar/Builder.vue
+++ b/resources/js/Components/DashboardLayout/Sidebar/Builder.vue
@@ -35,5 +35,5 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="hidden pl-8 pl-16 pl-24 pl-32 pl-40 pl-48 pl-56 pl-64 pl-72 pl-80 pl-96"></div>
+  <div class="hidden pl-0 pl-8 pl-16 pl-24 pl-32 pl-40 pl-48 pl-56 pl-64 pl-72 pl-80 pl-96"></div>
 </template>
\ No newline at end of file
diff --git a/resources/js/Components/DashboardLayout/Sidebar/Link.vue b/resources/js/Components/DashboardLayout/Sidebar/Link.vue
index bad1ba7..34c1aa0 100644
--- a/resources/js/Components/DashboardLayout/Sidebar/Link.vue
+++ b/resources/js/Components/DashboardLayout/Sidebar/Link.vue
@@ -13,7 +13,7 @@ const link = route().has(menu.route_or_url) ? route(menu.route_or_url) : menu.ro
 </script>
 
 <template>
-  <Link :href="link" class="w-full px-4 py-3" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${active && 'bg-slate-800'} pl-${padding}`">
+  <Link :href="link" class="w-full px-4 py-3" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${active && 'bg-slate-800'} pl-${padding !== 0 && padding}`">
     <div class="flex items-center space-x-2">
       <Icon :name="menu.icon" />
       <p class="uppercase font-semibold">{{ menu.name }}</p>
diff --git a/resources/js/Components/DashboardLayout/Sidebar/Links.vue b/resources/js/Components/DashboardLayout/Sidebar/Links.vue
index 7d0ea74..5ebf61d 100644
--- a/resources/js/Components/DashboardLayout/Sidebar/Links.vue
+++ b/resources/js/Components/DashboardLayout/Sidebar/Links.vue
@@ -27,7 +27,7 @@ const open = ref(active ? true : false)
 
 <template>
   <div class="w-full flex flex-col">
-    <button @click.prevent="open = ! open" class="w-full p-4" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${open && 'dark:bg-gray-800'} pl-${padding}`">
+    <button @click.prevent="open = ! open" class="w-full p-4" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${open && 'dark:bg-gray-800'} pl-${padding !== 0 && padding}`">
       <div class="flex items-center space-x-2">
         <Icon :name="menu.icon" />
         <p class="uppercase font-semibold w-full text-left">{{ menu.name }}</p>