Add custom menu and navbar components: Introduced a new menu component to dynamically render menu items from the Pages model, including nested children. Added a social media navbar component for enhanced user engagement. Implemented an offcanvas footer for additional contact information and social links, improving overall site navigation and accessibility.
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,77 @@
|
||||
<?php
|
||||
// Get menu items from Pages with nested children
|
||||
$menuItems = \App\Models\Page::with(['children' => function ($query) {
|
||||
$query->where('status', 'published')
|
||||
->where('show_in_menu', true)
|
||||
->orderBy('sort_order', 'asc')
|
||||
->orderBy('title', 'asc');
|
||||
}, 'children.children' => function ($query) {
|
||||
$query->where('status', 'published')
|
||||
->where('show_in_menu', true)
|
||||
->orderBy('sort_order', 'asc')
|
||||
->orderBy('title', 'asc');
|
||||
}])
|
||||
->whereNull('parent_id')
|
||||
->where('status', 'published')
|
||||
->where('show_in_menu', true)
|
||||
->orderBy('sort_order', 'asc')
|
||||
->orderBy('title', 'asc')
|
||||
->get();
|
||||
?>
|
||||
|
||||
@if($menuItems->isNotEmpty())
|
||||
<ul class="navbar-nav">
|
||||
@foreach($menuItems as $item)
|
||||
@php
|
||||
$hasChildren = $item->children->isNotEmpty();
|
||||
@endphp
|
||||
<li class="nav-item {{ $hasChildren ? 'dropdown' : '' }}">
|
||||
@if($hasChildren)
|
||||
<a class="nav-link dropdown-toggle font-bold !tracking-[normal] hover:!text-[#e31e24] !text-[.85rem]"
|
||||
href="{{ route('page.show', $item->slug) }}"
|
||||
data-bs-toggle="dropdown">
|
||||
{{ $item->title }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
@foreach($item->children as $child)
|
||||
@php
|
||||
$childHasChildren = $child->children->isNotEmpty();
|
||||
@endphp
|
||||
@if($childHasChildren)
|
||||
<li class="dropdown dropdown-submenu dropend">
|
||||
<a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle"
|
||||
href="{{ route('page.show', $child->slug) }}"
|
||||
data-bs-toggle="dropdown">
|
||||
{{ $child->title }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
@foreach($child->children as $grandChild)
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item hover:!text-[#e31e24]"
|
||||
href="{{ route('page.show', $grandChild->slug) }}">
|
||||
{{ $grandChild->title }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item hover:!text-[#e31e24]"
|
||||
href="{{ route('page.show', $child->slug) }}">
|
||||
{{ $child->title }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
@else
|
||||
<a class="nav-link font-bold !tracking-[normal] hover:!text-[#e31e24] !text-[.85rem]"
|
||||
href="{{ route('page.show', $item->slug) }}">
|
||||
{{ $item->title }}
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="navbar-other w-full !flex !ml-auto">
|
||||
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
||||
<li class="nav-item">
|
||||
<nav class="nav social social-muted justify-end text-right">
|
||||
<a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
|
||||
<a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
|
||||
<a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
|
||||
<a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</li>
|
||||
<li class="nav-item xl:!hidden lg:!hidden">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>asdad
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="offcanvas-footer xl:!hidden lg:!hidden">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
|
||||
<br> 00 (123) 456 78 90 <br>
|
||||
<nav class="nav social social-white !mt-4">
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user