Split Layout, menu define

app/Http/Controllers/Superuser/UserMenuController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Controllers\Superuser;
+
+use App\Http\Controllers\Controller;
+use App\Menus\Menu as MenusMenu;
+use App\Models\Menu;
+use App\Models\Permission;
+use Illuminate\Http\Request;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Str;
+use Inertia\Inertia;
+use RecursiveDirectoryIterator;
+use RecursiveIteratorIterator;
+use SplFileInfo;
+use Throwable;
+
+class UserMenuController extends MenuController
+{
+    public function get()
+    {
+        return Menu::with(['childs', 'permissions'])
+                    ->where('id',10)
+                    ->orderBy('position')
+                    ->get();
+    }
+}

lang/id.json

@@ -99,5 +99,11 @@
     "referenceerror: _code is not defined": "ReferenceError: _code is not defined",
     "referenceerror: acntry is not defined": "ReferenceError: aCntry is not defined",
     "error: request failed with status code 500": "Error: Request failed with status code 500",
-    "error: ziggy error: 'item' parameter is required for route 'products.search'.": "Error: Ziggy error: 'item' parameter is required for route 'products.search'."
+    "error: ziggy error: 'item' parameter is required for route 'products.search'.": "Error: Ziggy error: 'item' parameter is required for route 'products.search'.",
+    "firefox 122": "Firefox 122",
+    "ikea": "Ikea",
+    "about": "About",
+    "exachange": "Exachange",
+    "exchange": "Exchange",
+    "referenceerror: rates is not defined": "ReferenceError: rates is not defined"
 }

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';

routes/web.php

@@ -21,8 +21,9 @@ use App\Http\Controllers\ProductsCompareController;
 */
 
 Route::get('/', function () {
-    return Inertia::render('IkeaRoot');
+    return Inertia::render('IkeaRoot')->with('menu', (new App\Http\Controllers\Superuser\UserMenuController)->get() );
 })->name('root'); 
+Route::get('/menu/get', [App\Http\Controllers\Superuser\UserMenuController::class, 'get'])->name('menu.user');
 
 Route::get('/ccountry/', [CountryCodeController::class, 'index'])->name('ccountry.index');
 Route::get('/ccountry/codes/', [CountryCodeController::class, 'codes'])->name('ccountry.codes');