fix styling

resources/js/Components/DashboardLayout/Sidebar/Builder.vue

@@ -11,16 +11,21 @@ export default defineComponent({
   setup(props, { attrs }) {
     return props => {
       const { menus } = props
+      const padding = (menu, initial = 0) => menu && menu.parent_id !== null ? padding(menu.parent, initial + 8) : initial
+
       const generate = (menu, attrs = {}) => {
         if (menu.childs?.length > 0) {
           return h(Links, {
             ...attrs,
+            padding: padding(menu),
             menu,
             childs: menu.childs,
-          }, menu.childs.map(child => generate(child, { class: 'pl-8' })))
+          }, menu.childs.map(child => generate(child, {
+            padding: padding(child)
+          })))
         }
         
-        return h(Link, { ...attrs, menu })
+        return h(Link, { ...attrs, padding: padding(menu), menu })
       }
 
       return h('div', { class: 'flex flex-col' }, menus.map(menu => generate(menu)))
@@ -28,3 +33,7 @@ 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>
+</template>

resources/js/Components/DashboardLayout/Sidebar/Link.vue

@@ -5,6 +5,7 @@ import Icon from '@/Components/Icon.vue'
 
 const { menu } = defineProps({
   menu: Object,
+  padding: Number,
 })
 
 const active = route().current(menu.route_or_url)
@@ -12,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'}`">
+  <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}`">
     <div class="flex items-center space-x-2">
       <Icon :name="menu.icon" />
       <p class="uppercase font-semibold">{{ menu.name }}</p>

resources/js/Components/DashboardLayout/Sidebar/Links.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { getCurrentInstance, ref } from 'vue'
+import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
 import Icon from '@/Components/Icon.vue'
 
 const { menu, childs } = defineProps({
   menu: Object,
   childs: Array,
+  padding: Number,
 })
 
 const trace = menu => {
@@ -26,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'}`">
+    <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}`">
       <div class="flex items-center space-x-2">
         <Icon :name="menu.icon" />
         <p class="uppercase font-semibold w-full text-left">{{ menu.name }}</p>
@@ -34,7 +35,7 @@ const open = ref(active ? true : false)
       </div>
     </button>
 
-    <div v-if="open" class="flex flex-col">
+    <div v-if="open" class="flex flex-col" ref="container">
       <slot />
     </div>
   </div>