Nav Link Episode Complete

JeffreyWay · JeffreyWay · commit db7d11dd5cc2 · 2020-06-15T13:49:38.000-04:00
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
@@ -13,7 +13,7 @@
     </div>
 
     <div
-        class="absolute {{ $alignmentClasses[$alignment] }} z-20 bg-white rounded shadow-md py-2 mt-1 w-40"
+        class="absolute {{ $alignmentClasses[$alignment] }} z-20 bg-white text-black rounded shadow-md py-2 mt-1 w-40"
         x-show="open"
         x-transition:enter="transition transform duration-300"
         x-transition:enter-start="opacity-0 scale-95"
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -7,7 +7,7 @@
           content="width=device-width, initial-scale=1"
     >
 
-    <title>Laravel</title>
+    <title>Blade Component Examples</title>
 
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
           rel="stylesheet"
@@ -17,6 +17,7 @@
 </head>
 
 <body>
+    @include('partials/header')
 
     {{ $slot }}
 
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
@@ -0,0 +1,9 @@
+@props(['route'])
+
+@php
+    $classes = Request::routeIs($route) ? 'text-blue-500 underline' : 'hover:text-blue-500';
+@endphp
+
+<a href="{{ route($route) }}" {{ $attributes->merge(['class' => "px-6 hover:underline {$classes}"]) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
@@ -0,0 +1,24 @@
+<header class="bg-gray-700 text-white px-6 py-4 flex justify-between items-center">
+    <h1 class="font-bold tracking-widest uppercase">Laracasts</h1>
+
+    <nav>
+        <x-nav-link route="home">Home</x-nav-link>
+        <x-nav-link route="about">About</x-nav-link>
+        <x-nav-link route="testimonials">Testimonials</x-nav-link>
+        <x-nav-link route="contact">Contact</x-nav-link>
+    </nav>
+
+    <x-dropdown alignment="right">
+        <x-slot name="trigger">
+            <button>
+                <img src="https://www.placecage.com/30/30"
+                     class="rounded-full border border-white"
+                     alt=""
+                >
+            </button>
+        </x-slot>
+
+        <x-dropdown-link href="#">Account</x-dropdown-link>
+        <x-dropdown-link href="#">Support</x-dropdown-link>
+    </x-dropdown>
+</header>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -1,15 +1,7 @@
 <x-layout>
     <x-section>
-        <div>
-            <x-dropdown>
-                <x-slot name="trigger">
-                    <button>Click Me</button>
-                </x-slot>
-
-                <x-dropdown-link href="/">One</x-dropdown-link>
-                <x-dropdown-link href="/">Two</x-dropdown-link>
-                <x-dropdown-link href="/">Three</x-dropdown-link>
-            </x-dropdown>
-        </div>
+        <p>
+            Hello World
+        </p>
     </x-section>
 </x-layout>
diff --git a/routes/web.php b/routes/web.php
@@ -4,10 +4,29 @@
 use App\Comment;
 
 
+// Select Nav Link Setup
+
 Route::get('/', function () {
     return view('welcome');
+})->name('home');
+
+Route::get('/about', function () {
+    return view('welcome');
+})->name('about');
+
+Route::get('/testimonials', function () {
+    return view('welcome');
+})->name('testimonials');
+
+Route::get('/contact', function () {
+    return view('welcome');
+})->name('contact');
+
+Route::get('/contact-team', function () {
+    return view('welcome');
 });
 
+
 Route::get('/comments/{comment}/edit', function (Comment $comment) {
     return view('comments.edit', ['comment' => $comment]);
 });
