Added Laravel breadcrumbs

app/Http/Middleware/Admin/HandleInertiaAdminRequests.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Middleware\Admin;
+
+use BalajiDharma\LaravelMenu\Models\Menu;
+use Diglactic\Breadcrumbs\Breadcrumbs;
+use Illuminate\Http\Request;
+use Inertia\Middleware;
+
+class HandleInertiaAdminRequests extends Middleware
+{
+    /**
+     * The root template that is loaded on the first page visit.
+     *
+     * @var string
+     */
+    protected $rootView = 'app';
+
+    /**
+     * Determine the current asset version.
+     */
+    public function version(Request $request): string|null
+    {
+        return parent::version($request);
+    }
+
+    /**
+     * Define the props that are shared by default.
+     *
+     * @return array<string, mixed>
+     */
+    public function share(Request $request): array
+    {
+        return [
+            ...parent::share($request),
+            'navigation' => [
+                'menu' => Menu::getMenuTree('admin', false, true),
+                'breadcrumbs' => Breadcrumbs::generate(),
+            ],
+        ];
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -3,6 +3,7 @@
 namespace App\Http\Middleware;
 
 use BalajiDharma\LaravelMenu\Models\Menu;
+use Diglactic\Breadcrumbs\Breadcrumbs;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -37,10 +38,7 @@ public function share(Request $request): array
             ],
             'flash' => [
                 'message' => fn () => $request->session()->get('message'),
-            ],
-            'navigation' => [
-                'menu' => Menu::getMenuTree('admin', false, true),
-            ],
+            ]
         ];
     }
 }

resources/js/Components/Admin/Breadcrumb.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+import { computed, reactive } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+
+let breadcrumbs = reactive({})
+breadcrumbs = computed(() => usePage().props.navigation.breadcrumbs)
+
+</script>
+
+<template>
+   <nav aria-label="Breadcrumb" class="flex px-6 xl:max-w-6xl xl:mx-auto">
+    <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+      <li
+        v-for="(item, index) in breadcrumbs"
+        :key="index"
+        class="inline-flex items-center"
+      >
+        <Link v-if="index !== breadcrumbs.length - 1 && item.url" :href="item.url" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
+            <svg v-if="index === 0" class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
+            </svg>
+            <svg v-else class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+            </svg>
+            {{ item.title }}
+        </Link>
+        <template v-else>
+            <div class="flex items-center">
+                <svg v-if="index === 0" class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
+                </svg>
+                <svg v-else class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                </svg>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                {{ item.title }}
+                </span>
+            </div>
+        </template>
+      </li>
+    </ol>
+  </nav>
+</template>

resources/js/Layouts/LayoutAuthenticated.vue

@@ -5,6 +5,7 @@ import { usePage, router } from '@inertiajs/vue3'
 import menuNavBar from '@/menuNavBar.js'
 import { useDarkModeStore } from '@/Stores/darkMode.js'
 import BaseIcon from '@/Components/BaseIcon.vue'
+import Breadcrumb from '@/Components/Admin/Breadcrumb.vue'
 import FormControl from '@/Components/FormControl.vue'
 import NavBar from '@/Components/NavBar.vue'
 import NavBarItemPlain from '@/Components/NavBarItemPlain.vue'
@@ -67,6 +68,7 @@ const menuClick = (event, item) => {
         @menu-click="menuClick"
         @aside-lg-close-click="isAsideLgActive = false"
       />
+      <Breadcrumb />
       <slot />
       <FooterBar />
     </div>

routes/admin.php

@@ -1,12 +1,13 @@
 <?php
 
 use App\Http\Middleware\HasAccessAdmin;
+use App\Http\Middleware\Admin\HandleInertiaAdminRequests;
 use Inertia\Inertia;
 
 Route::group([
     'namespace' => 'App\Http\Controllers\Admin',
     'prefix' => config('admin.prefix'),
-    'middleware' => ['auth', HasAccessAdmin::class],
+    'middleware' => ['auth', HasAccessAdmin::class, HandleInertiaAdminRequests::class],
     'as' => 'admin.',
 ], function () {
     Route::get('/', function () {
@@ -18,7 +19,9 @@
     Route::resource('menu', 'MenuController')->except([
         'show',
     ]);
-    Route::resource('menu.item', 'MenuItemController');
+    Route::resource('menu.item', 'MenuItemController')->except([
+        'show',
+    ]);
     Route::group([
         'prefix' => 'category',
         'as' => 'category.',

routes/breadcrumbs.php

@@ -0,0 +1,79 @@
+<?php
+
+use Diglactic\Breadcrumbs\Breadcrumbs;
+use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;
+use Illuminate\Support\Facades\Route;
+
+// admin dashboard
+Breadcrumbs::for('admin.dashboard', function (BreadcrumbTrail $trail) {
+    $trail->push('Dashboard', route('admin.dashboard'));
+});
+
+Breadcrumbs::macro('resource', function (string $name, string $title, ?string $parentName = null) {
+    if ($parentName) {
+        Breadcrumbs::for("{$name}.index", function (BreadcrumbTrail $trail, $model) use ($name, $title, $parentName) {
+            $trail->parent("{$parentName}.show", $model);
+            $trail->push($title, route("{$name}.index", $model));
+        });
+
+        Breadcrumbs::for("{$name}.create", function (BreadcrumbTrail $trail, $model) use ($name) {
+            $trail->parent("{$name}.index", $model);
+            $trail->push('Create', route("{$name}.create", $model));
+        });
+
+        Breadcrumbs::for("{$name}.show", function (BreadcrumbTrail $trail, $model, $item) use ($name) {
+            $trail->parent("{$name}.index", $model, $item);
+            \Log::info("{$name}.show");
+            if (Route::has("{$name}.show")) {
+                $trail->push($item->name ?? $model, route("{$name}.show", [$model, $item]));
+            } else {
+                $trail->push($item->name ?? $model);
+            }
+        });
+
+        Breadcrumbs::for("{$name}.edit", function (BreadcrumbTrail $trail, $model, $item) use ($name) {
+            $trail->parent("{$name}.show", $model, $item);
+            $trail->push('Edit', route("{$name}.edit", [$model, $item]));
+        });
+
+    } else {
+        Breadcrumbs::for("{$name}.index", function (BreadcrumbTrail $trail) use ($name, $title) {
+            $trail->parent('admin.dashboard');
+            $trail->push($title, route("{$name}.index"));
+        });
+
+        Breadcrumbs::for("{$name}.create", function (BreadcrumbTrail $trail) use ($name) {
+            $trail->parent("{$name}.index");
+            $trail->push('Create', route("{$name}.create"));
+        });
+
+        Breadcrumbs::for("{$name}.show", function (BreadcrumbTrail $trail, $model) use ($name) {
+            $trail->parent("{$name}.index");
+            if (Route::has("$name.show")) {
+                $trail->push($model->name ?? $model, route("{$name}.show", $model));
+            } else {
+                $trail->push($model->name ?? $model);
+            }
+        });
+
+        Breadcrumbs::for("{$name}.edit", function (BreadcrumbTrail $trail, $model) use ($name) {
+            $trail->parent("{$name}.show", $model);
+            $trail->push('Edit', route("{$name}.edit", $model));
+        });
+    }
+});
+
+Breadcrumbs::resource('admin.permission', 'Permissions');
+Breadcrumbs::resource('admin.role', 'Roles');
+Breadcrumbs::resource('admin.user', 'Users');
+Breadcrumbs::resource('admin.media', 'Media');
+Breadcrumbs::resource('admin.menu', 'Menu');
+Breadcrumbs::resource('admin.menu.item', 'Menu Items', 'admin.menu');
+Breadcrumbs::resource('admin.category.type', 'Category Types');
+Breadcrumbs::resource('admin.category.type.item', 'Items', 'admin.category.type');
+
+// admin account Info
+Breadcrumbs::for('admin.account.info', function (BreadcrumbTrail $trail) {
+    $trail->parent('admin.dashboard');
+    $trail->push('Account Info', route('admin.account.info'));
+});