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
$hasChildren = $item->children->isNotEmpty();
$isMegaMenu = $item->slug === 'urunlerimiz';
$isMegaMenu = $item->slug === 'cozumlerimiz' || $item->slug === 'urunlerimiz';
$isCareer = $item->slug === 'kariyer';
$categories = [];
$products = [];
$services = [];
$featuredProducts = [];
$projectLinks = [];
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();
$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
@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">
<ul class="dropdown-menu mega-menu !p-6 xl:!p-8 !rounded-[0.8rem] !shadow-2xl !border-0">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] max-w-full px-6">
<h6 class="dropdown-header !text-[#e31e24] mb-4 mt-4 !pl-0">{{ __('Kategoriler') }}</h6>
<ul class="pl-0 list-none mb-8">
@foreach($categories as $category)
<li class="w-full">
<a class='dropdown-item hover:!text-[#e31e24] !pl-0 !bg-transparent' href='#'>{{ $category->translate('title') }}</a>
</li>
@endforeach
</ul>
<h6 class="dropdown-header !text-[#e31e24] mb-4 mt-4 !pl-0">{{ __('Hizmetler') }}</h6>
<ul class="pl-0 list-none">
@foreach($services as $service)
<li class="w-full">
<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>
<div class="flex flex-wrap mx-0 xl:mx-[-10px] lg:mx-[-10px]">
<!-- Sütun 1: Ürünlerimiz -->
<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-[#e31e24] mb-4 mt-2 !pl-0 text-uppercase tracking-wider font-bold text-xs flex items-center">
<i class="uil uil-cube text-lg mr-2"></i>
{{ __('Ürünlerimiz') }}
</h6>
<ul class="pl-0 list-none mb-0">
@foreach($products as $prod)
<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'
href="{{ $prod->external_url ? $prod->external_url : route('products.show', $prod->slug) }}"
@if($prod->external_url) target="_blank" @endif>
<i class="uil uil-angle-right text-[#e31e24] mr-1.5 text-md opacity-70"></i>
<span class="font-medium text-[14px]">{{ $prod->translate('title') }}</span>
</a>
</li>
@endforeach
</ul>
</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">
<div class="h-full xl:p-[50px] lg:pl-[50px] px-6 pt-2 gradient-5 rounded-[.4rem]">
<h6 class="dropdown-header !text-white mb-6 mt-6 !p-0">{{ __('Öne Çıkan Ürünler') }}</h6>
<div class="flex flex-wrap gap-4 mx-5 pt-5">
@foreach($featuredProducts as $item)
<div class="flex-none " style="width: 183px;">
<a class="group !bg-transparent !p-0 block transition-transform duration-300 hover:-translate-y-1"
href="{{ $item->external_url ? $item->external_url : route('products.show', $item->slug) }}"
@if($item->external_url) target="_blank" @endif
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{{ $item->translate('title') }}">
<figure style="width: 183px; height: 103px;"
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 ">
@if($item->hero_image)
<img loading="lazy" style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="{{ \Storage::url($item->hero_image) }}" alt="{{ $item->translate('title') }}">
@else
<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') }}">
@endif
</figure>
<span class="xl:!hidden lg:!hidden">{{ $item->translate('title') }}</span>
</a>
</div>
@endforeach
</div>
</div>
<!-- Sütun 2: Hizmetlerimiz -->
<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-[#e31e24] mb-4 mt-2 !pl-0 text-uppercase tracking-wider font-bold text-xs flex items-center">
<i class="uil uil-cog text-lg mr-2"></i>
{{ __('Hizmetlerimiz') }}
</h6>
<ul class="pl-0 list-none mb-0">
@foreach($services as $serv)
<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'
href="{{ $serv->external_url ? $serv->external_url : route('products.show', $serv->slug) }}"
@if($serv->external_url) target="_blank" @endif>
<i class="uil uil-angle-right text-[#e31e24] mr-1.5 text-md opacity-70"></i>
<span class="font-medium text-[14px]">{{ $serv->translate('title') }}</span>
</a>
</li>
@endforeach
</ul>
</div>
<!-- Sütun 3: Projelerimiz & Başarı Hikayeleri -->
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full px-6">
<h6 class="dropdown-header !text-[#e31e24] mb-4 mt-2 !pl-0 text-uppercase tracking-wider font-bold text-xs flex items-center">
<i class="uil uil-award text-lg mr-2"></i>
{{ $locale === 'tr' ? 'Projelerimiz / Başarılar' : ($locale === 'se' ? 'Projekt & Framgångar' : 'Projects & Successes') }}
</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>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
@elseif($isCareer)
<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>
</div>
<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 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]">