now menu is rendered one time only
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { getCurrentInstance, onMounted, ref } from 'vue'
|
import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { usePage } from '@inertiajs/inertia-vue3'
|
import { usePage } from '@inertiajs/inertia-vue3'
|
||||||
import Builder from './Sidebar/Builder.vue'
|
import Builder from './Sidebar/Builder.vue'
|
||||||
@@ -11,10 +11,11 @@ const self = getCurrentInstance()
|
|||||||
const menus = ref(usePage().props.value.$menus || [])
|
const menus = ref(usePage().props.value.$menus || [])
|
||||||
const { user } = usePage().props.value
|
const { user } = usePage().props.value
|
||||||
|
|
||||||
const fetch = async () => {
|
const f = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(route('api.v1.user.menu', user.id))
|
const response = await axios.get(route('api.v1.user.menu', user.id))
|
||||||
return menus.value = response.data
|
|
||||||
|
menus.value = response.data
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
const response = await Swal.fire({
|
const response = await Swal.fire({
|
||||||
title: 'Do you want to try again?',
|
title: 'Do you want to try again?',
|
||||||
@@ -27,10 +28,6 @@ const fetch = async () => {
|
|||||||
response.isConfirmed && fetch()
|
response.isConfirmed && fetch()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Inertia.on('finish', () => fetch())
|
|
||||||
|
|
||||||
onMounted(fetch)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -35,5 +35,5 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</template>
|
||||||
@@ -13,7 +13,7 @@ const link = route().has(menu.route_or_url) ? route(menu.route_or_url) : menu.ro
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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">
|
<div class="flex items-center space-x-2">
|
||||||
<Icon :name="menu.icon" />
|
<Icon :name="menu.icon" />
|
||||||
<p class="uppercase font-semibold">{{ menu.name }}</p>
|
<p class="uppercase font-semibold">{{ menu.name }}</p>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ const open = ref(active ? true : false)
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full flex flex-col">
|
<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">
|
<div class="flex items-center space-x-2">
|
||||||
<Icon :name="menu.icon" />
|
<Icon :name="menu.icon" />
|
||||||
<p class="uppercase font-semibold w-full text-left">{{ menu.name }}</p>
|
<p class="uppercase font-semibold w-full text-left">{{ menu.name }}</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user