Split Layout, menu define

2023-12-31 22:08:22 +01:00
parent 0a9205ea8b
commit 9bbd65eaaf
5 changed files with 108 additions and 37 deletions
--- a/resources/js/Layouts/GuestLayout.vue
+++ b/resources/js/Layouts/GuestLayout.vue
@@ -0,0 +1,59 @@
+<script setup>
+import Swal from 'sweetalert2';
+import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+import LogoIkea from '@/assets/Ikea_logo.svg';
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue';
+
+const menu = ref([])
+const fetch_menu = async () => {
+    try {
+        const response = await axios.get(route('menu.user'))
+        menu.value = response.data;
+    } catch (e) {
+        const response = await Swal.fire({
+            title: __('are you want to try again') + '?',
+            text: __(`${e}`),
+            icon: 'question',
+            showCancelButton: true,
+            showCloseButton: true,
+        })
+
+        response.isConfirmed && fetch()
+    }
+}
+
+onMounted(fetch_menu);
+</script>
+
+
+<template>
+    <fwb-navbar>
+        <template #logo>
+            <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" :link="route('root')">
+                IKEA Price Crawler
+            </fwb-navbar-logo>
+        </template>
+        <template #default="{ isShowMenu }">
+            <fwb-navbar-collapse :is-show-menu="isShowMenu">
+                <template v-for="item in menu[0].childs" v-if="menu.length > 0">
+                    <fwb-navbar-link >
+                        {{ item.name }}
+                    </fwb-navbar-link>
+                </template>
+            </fwb-navbar-collapse>
+        </template>
+    </fwb-navbar>
+    <div class="m-3">
+        <slot />
+    </div>
+</template>
+<style>
+@import 'vue3-easy-data-table/dist/style.css';
+</style>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>