feat: set menu items product to header

app/Http/Controllers/Components/ProductController.php

@@ -4,6 +4,7 @@
 
 use App\Http\Resources\ProductResource;
 use App\Models\Product;
+use Illuminate\Http\Request;
 
 class ProductController
 {
@@ -24,4 +25,16 @@ public function show($id)
 
 		return response()->json($product, 200);
 	}
+
+  public function random(Request $request)
+  {
+  	$limit = $request->limit ?? 3;
+
+  	$query = Product::query()
+  	  ->inRandomOrder()
+  	  ->limit($limit)
+  	  ->get();
+
+  	return response()->json($query, 200);
+  }
 }

app/Http/Controllers/Customer/ProductController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers\Customer;
+
+use App\Http\Resources\ProductResource;
+use App\Models\Product;
+
+class ProductController
+{
+	public function show(string $slug)
+	{
+		$category = Product::where('slug', $slug)->firstOrFail();
+
+		return new ProductResource($category);
+	}
+}

resources/js/Components/App/AppHeader.vue

@@ -5,75 +5,11 @@ const navigation = {
   categories: [
     {
       name: 'Category',
-      featured: [
-        {
-          name: 'New Arrivals',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-category-01.jpg',
-          imageAlt: 'Models sitting back to back, wearing Basic Tee in black and bone.',
-        },
-        {
-          name: 'Basic Tees',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-category-02.jpg',
-          imageAlt:
-            'Close up of Basic Tee fall bundle with off-white, ochre, olive, and black tees.',
-        },
-        {
-          name: 'Accessories',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-category-03.jpg',
-          imageAlt:
-            'Model wearing minimalist watch with black wristband and white watch face.',
-        },
-        {
-          name: 'Carry',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-category-04.jpg',
-          imageAlt:
-            'Model opening tan leather long wallet with credit card pockets and cash pouch.',
-        },
-      ],
+      featured: [],
     },
     {
       name: 'Products',
-      featured: [
-        {
-          name: 'New Arrivals',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-01.jpg',
-          imageAlt:
-            'Hats and sweaters on wood shelves next to various colors of t-shirts on hangers.',
-        },
-        {
-          name: 'Basic Tees',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-02.jpg',
-          imageAlt: 'Model wearing light heather gray t-shirt.',
-        },
-        {
-          name: 'Accessories',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-03.jpg',
-          imageAlt:
-            'Grey 6-panel baseball hat with black brim, black mountain graphic on front, and light heather gray body.',
-        },
-        {
-          name: 'Carry',
-          href: '#',
-          imageSrc:
-            'https://tailwindui.com/img/ecommerce-images/mega-menu-01-men-category-04.jpg',
-          imageAlt:
-            'Model putting folded cash into slim card holder olive leather wallet with hand stitching.',
-        },
-      ],
+      featured: [],
     },
   ],
   pages: [
@@ -96,6 +32,20 @@ onMounted(async () => {
       }
     })
   })
+
+  await useFetch(route('components.products.random')).get().json().then(({ data }) => {
+    // map data
+    navigation.categories[1].featured = _.map(data.value, (product) => {
+      return {
+        name: product.name,
+        href: route('products.show', {
+          slug: product.slug,
+        }),
+        imageSrc: product.image,
+        imageAlt: product.name,
+      }
+    })
+  })
 })
 </script>
 

routes/components/index.php

@@ -7,9 +7,9 @@
 use App\Http\Controllers\Components\TemporaryFileController;
 use App\Http\Controllers\Components\UserController;
 
-
 // unauthorized
 Route::get('components/categories/random', [CategoryController::class, 'random'])->name('components.categories.random');
+Route::get('components/products/random', [ProductController::class, 'random'])->name('components.products.random');
 
 // authorized
 Route::prefix('components')->middleware('auth')->group(function () {

routes/public/product.php

@@ -0,0 +1,11 @@
+<?php
+
+use App\Http\Controllers\Customer\ProductController;
+use Illuminate\Support\Facades\Route;
+
+Route::prefix('products')->group(function () {
+	Route::controller(ProductController::class)->group(function () {
+    // show
+    Route::get('/{slug}', 'show')->name('products.show');
+	});
+});

routes/web.php

@@ -12,6 +12,7 @@
 Route::middleware(['auth', 'customer'])->group(function () {
 	require __DIR__.'/customer/index.php';
   require __DIR__.'/public/category.php';
+  require __DIR__.'/public/product.php';
 });
 
 // admin routes