I'm trying to create dynamic links within the navigation component that comes with Breeze. Here is what I am trying to do in views/layouts/navigation.blade.php:
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
<x-nav-link :href="route('decks.index', [$user->id])" :active="request()->routeIs(['decks.index', 'decks.store'])">
{{ __('Decks') }}
</x-nav-link>
<x-nav-link :href="route('decks.create', [$user->id])" :active="request()->routeIs('decks.create')">
{{ __('Add Decks') }}
</x-nav-link>
</div>
The key part is that I am struggling with is this : :href="route('decks.index', [$user->id])"
I'm getting an error that says undefined variable user. I am aware that I could change [$user->id] to [Auth::user()->id], but I am trying to add nav-link components for Flashcards that belong to a specific Deck, and so I will run into the same issue then.
How can I get something similar to Route Model binding with View Components? I start at views/flashcards/index.blade.php:
<x-app-layout
{{-- :user="$user" --}}
>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ ucwords($deck->topic) . ' Flashcard Deck' }}
</h2>
</x-slot>
<div class="py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="grid grid-cols-5 gap-4">
@forelse($deck->flashcards as $flashcard)
<a href="#">
<div class="rounded border-2 bg-white border-gray-600 h-64 flex items-end">
<p class="mx-auto font-sans pb-2">{{ $flashcard->term }}</p>
</div>
</a>
@empty
<p>No flashcards created for this deck yet.</p>
@endforelse
</div>
</div>
</x-app-layout>
Which has the <x-app-layout/> component. This then calls app/View/Components/AppLayout.php:
<?php
namespace App\View\Components;
use App\Models\User;
use Illuminate\View\Component;
class AppLayout extends Component
{
public function __construct(User $user)
{
$this->user = $user;
}
/**
* Get the view / contents that represents the component.
*
* @return \Illuminate\View\View
*/
public function render()
{
// dd($this->user);
return view('layouts.app');
}
}
Which is where I try to pass the user, and I think is where I am making an error. This renders the views/layouts/app.blade.php component:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
{{-- @include('layouts.navigation') --}}
{{-- {{ dd($user) }} --}}
@include('layouts.navigation', ['user' => Auth::user()])
<!-- Page Heading -->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
</body>
</html>
Which loops back to the navigation layout view at the top of the post and is where I add the user with Auth::user(). To reiterate, this works fine but I have another resource that isn't going to be accessible with this method. In my app, a user has many decks but I want the specific one, so that I can take its id and use it to make the nav bar routes dynamic i.e. /users/{user}/decks/{deck}/flashcards.
I've reread over the view and blade template sections of the docs, but I can't quite figure out what direction to go from here. Any help or corrections appreciated.
