now menu is rendered one time only

This commit is contained in:
Geriano
2022-07-23 16:18:10 +07:00
parent ad2fd8e8b3
commit 0f925e09fd
4 changed files with 7 additions and 10 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>