truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign mega menu component to display products, services, and project links in a multi-column layout

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-26 21:57:08 +03:00
parent 6fb2bfb265
commit 4ec2683317
2 changed files with 99 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/front/menu-item.blade.php
+98 -52
View File
@@ -2,79 +2,125 @@
@php @php
$hasChildren = $item->children->isNotEmpty(); $hasChildren = $item->children->isNotEmpty();
$isMegaMenu = $item->slug === 'urunlerimiz'; $isMegaMenu = $item->slug === 'cozumlerimiz' || $item->slug === 'urunlerimiz';
$isCareer = $item->slug === 'kariyer'; $isCareer = $item->slug === 'kariyer';
$categories = []; $products = [];
$services = []; $services = [];
$featuredProducts = []; $projectLinks = [];
if($isMegaMenu) { if($isMegaMenu) {
$categories = \App\Models\ProductCategory::where('is_active', true)->orderBy('sort_order')->get(); $products = \App\Models\Product::where('is_active', true)->where('type', 'product')->orderBy('sort_order')->limit(10)->get();
$services = \App\Models\Product::where('is_active', true)->where('type', 'service')->orderBy('sort_order')->limit(10)->get(); $services = \App\Models\Product::where('is_active', true)->where('type', 'service')->orderBy('sort_order')->limit(10)->get();
$featuredProducts = \App\Models\Product::where('is_active', true)->where('type', '!=', 'service')->inRandomOrder()->limit(6)->get();
$locale = app()->getLocale();
$projectLinks = [
[
'title' => $locale === 'tr' ? 'Müzik Yapımlarımız' : ($locale === 'se' ? 'Våra musikproduktioner' : 'Our Music Productions'),
'url' => route('music-productions.index'),
'badge' => $locale === 'tr' ? 'Sanat' : ($locale === 'se' ? 'Konst' : 'Art'),
'icon' => 'uil-music'
],
[
'title' => $locale === 'tr' ? 'Kitaplarımız' : ($locale === 'se' ? 'Våra böcker' : 'Our Books'),
'url' => route('page.show', 'kitaplarimiz'),
'badge' => null,
'icon' => 'uil-book-open'
],
[
'title' => $locale === 'tr' ? 'Ödüllerimiz' : ($locale === 'se' ? 'Våra utmärkelser' : 'Our Awards'),
'url' => route('page.show', 'odullerimiz'),
'badge' => $locale === 'tr' ? 'Başarı' : ($locale === 'se' ? 'Framgång' : 'Success'),
'icon' => 'uil-trophy'
],
[
'title' => $locale === 'tr' ? 'Müşteri Görüşleri' : ($locale === 'se' ? 'Kundrecensioner' : 'Client Testimonials'),
'url' => route('page.show', 'musteri-gorusleri'),
'badge' => null,
'icon' => 'uil-comments'
],
[
'title' => $locale === 'tr' ? 'Çözüm Ortakları' : ($locale === 'se' ? 'Lösningspartners' : 'Solution Partners'),
'url' => route('page.show', 'cozum-ortaklari'),
'badge' => null,
'icon' => 'uil-users-alt'
]
];
} }
@endphp @endphp
@if($isMegaMenu) @if($isMegaMenu)
<li class="nav-item dropdown dropdown-mega"> <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> <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"> <ul class="dropdown-menu mega-menu !p-6 xl:!p-8 !rounded-[0.8rem] !shadow-2xl !border-0">
<li class="mega-menu-content"> <li class="mega-menu-content">
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]"> <div class="flex flex-wrap mx-0 xl:mx-[-10px] lg:mx-[-10px]">
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] max-w-full px-6"> <!-- Sütun 1: Ürünlerimiz -->
<h6 class="dropdown-header !text-[#e31e24] mb-4 mt-4 !pl-0">{{ __('Kategoriler') }}</h6> <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full px-6 xl:border-r border-[#0000000a] dark:border-[#ffffff0a] mb-6 lg:mb-0">
<ul class="pl-0 list-none mb-8"> <h6 class="dropdown-header !text-[#e31e24] mb-4 mt-2 !pl-0 text-uppercase tracking-wider font-bold text-xs flex items-center">
@foreach($categories as $category) <i class="uil uil-cube text-lg mr-2"></i>
<li class="w-full"> {{ __('Ürünlerimiz') }}
<a class='dropdown-item hover:!text-[#e31e24] !pl-0 !bg-transparent' href='#'>{{ $category->translate('title') }}</a> </h6>
</li> <ul class="pl-0 list-none mb-0">
@endforeach @foreach($products as $prod)
</ul> <li class="w-full mb-2.5">
<a class='dropdown-item hover:!text-[#e31e24] !pl-0 !bg-transparent flex items-center transition-all duration-200 hover:translate-x-1'
<h6 class="dropdown-header !text-[#e31e24] mb-4 mt-4 !pl-0">{{ __('Hizmetler') }}</h6> href="{{ $prod->external_url ? $prod->external_url : route('products.show', $prod->slug) }}"
<ul class="pl-0 list-none"> @if($prod->external_url) target="_blank" @endif>
@foreach($services as $service) <i class="uil uil-angle-right text-[#e31e24] mr-1.5 text-md opacity-70"></i>
<li class="w-full"> <span class="font-medium text-[14px]">{{ $prod->translate('title') }}</span>
<a class='dropdown-item hover:!text-[#e31e24] !pl-0 !bg-transparent' href="{{ $service->external_url ? $service->external_url : route('products.show', $service->slug) }}" @if($service->external_url) target="_blank" @endif>{{ $service->translate('title') }}</a> </a>
</li> </li>
@endforeach @endforeach
</ul> </ul>
</div> </div>
<div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] max-w-full px-6 xl:!pl-8 lg:!pl-8"> <!-- Sütun 2: Hizmetlerimiz -->
<div class="h-full xl:p-[50px] lg:pl-[50px] px-6 pt-2 gradient-5 rounded-[.4rem]"> <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full px-6 xl:border-r border-[#0000000a] dark:border-[#ffffff0a] mb-6 lg:mb-0">
<h6 class="dropdown-header !text-white mb-6 mt-6 !p-0">{{ __('Öne Çıkan Ürünler') }}</h6> <h6 class="dropdown-header !text-[#e31e24] mb-4 mt-2 !pl-0 text-uppercase tracking-wider font-bold text-xs flex items-center">
<div class="flex flex-wrap gap-4 mx-5 pt-5"> <i class="uil uil-cog text-lg mr-2"></i>
@foreach($featuredProducts as $item) {{ __('Hizmetlerimiz') }}
<div class="flex-none " style="width: 183px;"> </h6>
<a class="group !bg-transparent !p-0 block transition-transform duration-300 hover:-translate-y-1" <ul class="pl-0 list-none mb-0">
href="{{ $item->external_url ? $item->external_url : route('products.show', $item->slug) }}" @foreach($services as $serv)
@if($item->external_url) target="_blank" @endif <li class="w-full mb-2.5">
data-bs-toggle="tooltip" <a class='dropdown-item hover:!text-[#e31e24] !pl-0 !bg-transparent flex items-center transition-all duration-200 hover:translate-x-1'
data-bs-placement="top" href="{{ $serv->external_url ? $serv->external_url : route('products.show', $serv->slug) }}"
title="{{ $item->translate('title') }}"> @if($serv->external_url) target="_blank" @endif>
<figure style="width: 183px; height: 103px;" <i class="uil uil-angle-right text-[#e31e24] mr-1.5 text-md opacity-70"></i>
class="!rounded-[.4rem] lift overflow-hidden shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.57)] mx-auto block transition-transform duration-300 group-hover:-translate-y-1 hidden xl:block lg:block "> <span class="font-medium text-[14px]">{{ $serv->translate('title') }}</span>
@if($item->hero_image) </a>
<img loading="lazy" style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="{{ \Storage::url($item->hero_image) }}" alt="{{ $item->translate('title') }}"> </li>
@else @endforeach
<img loading="lazy" style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="https://placehold.co/185x135?text={{ urlencode($item->translate('title')) }}" alt="{{ $item->translate('title') }}"> </ul>
@endif </div>
</figure>
<span class="xl:!hidden lg:!hidden">{{ $item->translate('title') }}</span> <!-- Sütun 3: Projelerimiz & Başarı Hikayeleri -->
</a> <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full px-6">
</div> <h6 class="dropdown-header !text-[#e31e24] mb-4 mt-2 !pl-0 text-uppercase tracking-wider font-bold text-xs flex items-center">
@endforeach <i class="uil uil-award text-lg mr-2"></i>
</div> {{ $locale === 'tr' ? 'Projelerimiz / Başarılar' : ($locale === 'se' ? 'Projekt & Framgångar' : 'Projects & Successes') }}
</div> </h6>
<ul class="pl-0 list-none mb-0">
@foreach($projectLinks as $proj)
<li class="w-full mb-2.5">
<a class='dropdown-item hover:!text-[#e31e24] !pl-0 !bg-transparent flex items-center justify-between transition-all duration-200 hover:translate-x-1'
href="{{ $proj['url'] }}">
<span class="flex items-center">
<i class="uil {{ $proj['icon'] }} text-[#e31e24] mr-2 text-md opacity-80"></i>
<span class="font-medium text-[14px]">{{ $proj['title'] }}</span>
</span>
@if($proj['badge'])
<span class="badge bg-[#e31e24]/10 text-[#e31e24] text-[10px] px-2 py-0.5 rounded-full font-semibold ml-2">{{ $proj['badge'] }}</span>
@endif
</a>
</li>
@endforeach
</ul>
</div> </div>
<!--/column -->
</div> </div>
<!--/.row -->
</li> </li>
<!--/.mega-menu-content-->
</ul> </ul>
<!--/.dropdown-menu -->
</li> </li>
@elseif($isCareer) @elseif($isCareer)
<li class="nav-item dropdown"> <li class="nav-item dropdown">
resources/views/templates/neler-yapariz/hero.blade.php
+1 -1
View File
@@ -11,7 +11,7 @@
<a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-lg btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">{{ t('neler-yapariz.hero.cta_primary') }}</a> <a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-lg btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">{{ t('neler-yapariz.hero.cta_primary') }}</a>
</div> </div>
<div class="inline-flex"> <div class="inline-flex">
<a href="{{ route('page.show', ['slug' => 'urunlerimiz']) }}" class="btn btn-lg btn-outline-grape !text-[#e31e24] bg-[#e31e24] !border-[#e31e24] !border-[2px] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] focus:shadow-[rgba(96,93,186,1)] active:!text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:!text-white disabled:bg-transparent disabled:border-[#e31e24] rounded">{{ t('neler-yapariz.hero.cta_secondary') }}</a> <a href="{{ route('page.show', ['slug' => 'cozumlerimiz']) }}" class="btn btn-lg btn-outline-grape !text-[#e31e24] bg-[#e31e24] !border-[#e31e24] !border-[2px] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] focus:shadow-[rgba(96,93,186,1)] active:!text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:!text-white disabled:bg-transparent disabled:border-[#e31e24] rounded">{{ t('neler-yapariz.hero.cta_secondary') }}</a>
</div> </div>
</div> </div>
<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]"> <div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]">