Split Layout, menu define

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>

resources/js/Pages/IkeaRoot.vue

@@ -1,19 +1,13 @@
 <script setup>
 import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
 import Swal from 'sweetalert2';
-import LogoIkea from '@/assets/Ikea_logo.svg';
+
 import Multiselect from 'vue-multiselect';
 import { GChart } from 'vue-google-charts';
-import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+
 import EasyTable from "vue3-easy-data-table";
-import SearchInput from '@/Components/SearchInput.vue';
-//import autocomplete from '@trevoreyre/autocomplete-vue';
-import {
-  FwbNavbar,
-  FwbNavbarCollapse,
-  FwbNavbarLink,
-  FwbNavbarLogo,
-} from 'flowbite-vue';
+import GuestLayout from '../Layouts/GuestLayout.vue';
+
 import { useForm } from '@inertiajs/inertia-vue3'
 import axios from 'axios';
 import IkeaLogo from './Ikea/IkeaLogo.vue';
@@ -27,6 +21,10 @@ const props = defineProps({
     type: Object,
     default: []
   },
+  menu: {
+    type: Object,
+    default: []
+  }
  })
 
  console.log(props.countryHash);
@@ -177,30 +175,7 @@ const submit = () => {
 </script>
 
 <template>
-  <fwb-navbar>
-    <template #logo>
-      <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
-        IKEA Price Crawler
-      </fwb-navbar-logo>
-    </template>
-    <template #default="{ isShowMenu }">
-      <fwb-navbar-collapse :is-show-menu="isShowMenu">
-        <fwb-navbar-link is-active link="#">
-          Home
-        </fwb-navbar-link>
-        <fwb-navbar-link link="#">
-          Services
-        </fwb-navbar-link>
-        <fwb-navbar-link link="#">
-          Pricing
-        </fwb-navbar-link>
-        <fwb-navbar-link link="#">
-          Contact
-        </fwb-navbar-link>
-      </fwb-navbar-collapse>
-    </template>
-  </fwb-navbar>
-  <div class="m-3">
+    <GuestLayout>
     <div class="flex flex-wrap gap-2 justify-center align-middle ">
       <div class="justify-center rounded-md border-black border-8 max-h-[518px]">
         <GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
@@ -247,7 +222,7 @@ const submit = () => {
         </div>
       </div>
     </div>
-  </div>
+  </GuestLayout>
 </template>
 <style>
 @import 'vue3-easy-data-table/dist/style.css';