Started implementing Navbar v2

- Removed old navbar from pages
+ Added navbar_v2 in pages
+ Added pork navbar v2
+ Added beef navbar v2

TODO: Implement navbar_v2 for poultry
TODO: Implement navbar_v2 for lamb
TODO: Completely delete old navbar and replace with new navbar
This commit is contained in:
Daniel Legt 2024-02-19 17:40:50 +02:00
parent e598281ec9
commit 4ac0eaa27a
7 changed files with 107 additions and 169 deletions

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "my-website", "name": "my-website-2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {

View File

@ -1,8 +1,4 @@
@extends('layout') @extends('layout')
@section('sidebar')
@include('partials.sidebar',['type' => 'beef'])
@endsection
@section('content') @section('content')
@endsection @endsection

View File

@ -15,13 +15,14 @@
<div class="flex-grow"> <div class="flex-grow">
<div class="grid grid-cols-6 min-h-screen"> <div class="grid grid-cols-6 min-h-screen">
<!-- Sidebar --> <!-- Sidebar -->
<aside class="col-span-1"> @include('partials.sidebar_v2')
{{--@include('partials.sidebar')--}}
@yield('sidebar')
</aside>
<!-- Main content area --> <!-- Main content area -->
@if ( empty($sidebarContent) )
<div class="col-span-6">
@else
<div class="col-span-5"> <div class="col-span-5">
@endif
@yield('content') @yield('content')
</div> </div>
</div> </div>

View File

@ -5,95 +5,7 @@
<aside> <aside>
{{--Check type of content to display correct sidebar--}} {{--Check type of content to display correct sidebar--}}
@if($type === 'beef') <!-- Type 'Beef' sidebar --> @if($type === 'poultry') <!-- Type 'Poultry' sidebar -->
<div class="flex h-full flex-col justify-between border-e bg-white">
<div class="px-4 py-6">
<ul class="mt-6 space-y-1">
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Ribeye
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Sirloin
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
T-Bone
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Filet Mignon
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Brisket
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Chuck
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Round
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Flank
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Skirt
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Short Ribs
</a>
</li>
</ul>
</div>
</div>
@elseif($type === 'poultry') <!-- Type 'Poultry' sidebar -->
<div class="flex h-full flex-col justify-between border-e bg-white"> <div class="flex h-full flex-col justify-between border-e bg-white">
<div class="px-4 py-6"> <div class="px-4 py-6">
@ -173,70 +85,6 @@
</ul> </ul>
</div> </div>
</div> </div>
@elseif($type === 'pork') <!-- Type 'Pork' sidebar -->
<div class="flex h-full flex-col justify-between border-e bg-white">
<div class="px-4 py-6">
<ul class="mt-6 space-y-1">
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Pork Shoulder (Boston Butt)
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Pork Belly
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Pork Chops
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Pork Loin
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Pork Ribs (Spareribs and Baby Back Ribs)
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Ham
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
Pork Tenderloin
</a>
</li>
</ul>
</div>
</div>
@elseif($type === 'lamb') <!-- Type 'Lamb' sidebar --> @elseif($type === 'lamb') <!-- Type 'Lamb' sidebar -->
<div class="flex h-full flex-col justify-between border-e bg-white"> <div class="flex h-full flex-col justify-between border-e bg-white">
<div class="px-4 py-6"> <div class="px-4 py-6">

View File

@ -0,0 +1,18 @@
@if ( !empty($sidebarContent) )
<aside class="col-span-1">
<div class="flex h-full flex-col justify-between border-e bg-white">
<div class="px-4 py-6">
<ul class="mt-6 space-y-1">
@foreach ($sidebarContent as $item)
<li>
<a href="/{{ $item['href'] }}" class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
{{ $item['name'] }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</aside>
@endif

View File

@ -1,8 +1,5 @@
@extends('layout') @extends('layout')
@section('sidebar')
@include('partials.sidebar',['type' => 'pork'])
@endsection
@section('content') @section('content')
@endsection @endsection

View File

@ -22,7 +22,52 @@ Route::get('/about', function () {
}); });
Route::get('/beef', function() { Route::get('/beef', function() {
return view('beef');
return view('beef', [
"sidebarContent" => [
[
"name" => "Ribeye",
"href" => "ribeye",
],
[
"name" => "Sirloin",
"href" => "sirloin",
],
[
"name" => "T-Bone",
"href" => "tbone",
],
[
"name" => "Filet Mignon",
"href" => "filetmignon",
],
[
"name" => "Brisket",
"href" => "brisket",
],
[
"name" => "Chuck",
"href" => "chuck",
],
[
"name" => "Round",
"href" => "round",
],
[
"name" => "Flank",
"href" => "flank",
],
[
"name" => "Skirt",
"href" => "skirt",
],
[
"name" => "Short Ribs",
"href" => "short-ribs",
],
],
]);
}); });
Route::get('/poultry', function() { Route::get('/poultry', function() {
@ -30,7 +75,40 @@ Route::get('/poultry', function() {
}); });
Route::get('/pork', function() { Route::get('/pork', function() {
return view('pork');
return view('pork', [
"sidebarContent" => [
[
"name" => "Pork Shoulder (Boston Butt)",
"href" => "pork-shoulder",
],
[
"name" => "Pork Belly",
"href" => "pork-belly",
],
[
"name" => "Pork Chops",
"href" => "pork-chops",
],
[
"name" => "Pork Loin",
"href" => "pork-loin",
],
[
"name" => "Pork Ribs (Spareribs and Bay Back Ribs)",
"href" => "pork-ribs",
],
[
"name" => "Ham",
"href" => "ham",
],
[
"name" => "Pork Tenderloin",
"href" => "pork-tenderloin",
],
]
]);
}); });
Route::get('/lamb', function() { Route::get('/lamb', function() {