Add Dynamic Menu Item Component: Introduced a new Blade component for front-end menu items, enhancing the navigation structure with support for mega menus and nested children. Updated the header template to utilize this component, improving modularity and localization for menu titles.
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,102 @@
|
||||
@props(['item'])
|
||||
|
||||
@php
|
||||
$hasChildren = $item->children->isNotEmpty();
|
||||
$isMegaMenu = $item->slug === 'urunlerimiz';
|
||||
@endphp
|
||||
|
||||
@if($isMegaMenu)
|
||||
<li class="nav-item dropdown dropdown-mega">
|
||||
<a class="nav-link dropdown-toggle font-bold !tracking-[normal]" href="{{ route('page.show', $item->slug) }}" data-bs-toggle="dropdown">{{ $item->translate('title') }}</a>
|
||||
<ul class="dropdown-menu mega-menu">
|
||||
<li class="mega-menu-content">
|
||||
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
||||
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
||||
<h6 class="dropdown-header !text-[#e31e24]">Kategoriler</h6>
|
||||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Yazılım Çözümleri</a></li>
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Donanım</a></li>
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Danışmanlık</a></li>
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Entegrasyon</a></li>
|
||||
</ul>
|
||||
<h6 class="dropdown-header !text-[#e31e24] xl:!mt-6 lg:!mt-6">Sektörler</h6>
|
||||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2">
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Finans</a></li>
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Sağlık</a></li>
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Eğitim</a></li>
|
||||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Perakende</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
|
||||
<h6 class="dropdown-header !text-[#e31e24]">Öne Çıkan Ürünler</h6>
|
||||
<ul class="pl-0 list-none xl:columns-3 lg:columns-3">
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>ERP Sistemi</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>CRM Modülü</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Mobil App</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Web Sitesi</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>E-Ticaret</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>SEO Paketi</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Hosting</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Bulut Yedekleme</a></li>
|
||||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Siber Güvenlik</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</li>
|
||||
<!--/.mega-menu-content-->
|
||||
</ul>
|
||||
<!--/.dropdown-menu -->
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item {{ $hasChildren ? 'dropdown' : '' }}">
|
||||
@if($hasChildren)
|
||||
<a class="nav-link dropdown-toggle font-bold !tracking-[normal]"
|
||||
href="{{ route('page.show', $item->slug) }}"
|
||||
data-bs-toggle="dropdown">
|
||||
{{ $item->translate('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="nav-link dropdown-toggle font-bold !tracking-[normal]"
|
||||
href="{{ route('page.show', $child->slug) }}"
|
||||
data-bs-toggle="dropdown">
|
||||
{{ $child->translate('title') }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
@foreach($child->children as $grandChild)
|
||||
<li class="nav-item">
|
||||
<a class="nav-link dropdown-toggle font-bold !tracking-[normal]"
|
||||
href="{{ route('page.show', $grandChild->slug) }}">
|
||||
{{ $grandChild->translate('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->translate('title') }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
@else
|
||||
<a class="nav-link font-bold !tracking-[normal]"
|
||||
href="{{ route('page.show', $item->slug) }}">
|
||||
{{ $item->translate('title') }}
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user