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

feat: update header component with new layout and responsive design for improved user experience and localization support

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-21 10:16:43 +03:00
parent 55efbc6614
commit cda0bb49bc
1 changed files with 52 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/header.blade.php
+52 -4
View File
@@ -46,13 +46,13 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<!-- Homepage Layout (Center Logo) -->
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div id="offcanvas-nav" class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
<a class="transition-none hidden lg:!flex xl:!flex" href="/" onclick="trackEvent('logo_click', {location: 'header_center'})">
<div class="offcanvas-header homepage-header-brand order-0 lg:!order-1 xl:!order-1 p-[1.5rem] !flex items-center justify-center flex-row gap-2">
<a class="transition-none hidden lg:!flex xl:!flex shrink-0" href="/" onclick="trackEvent('logo_click', {location: 'header_center'})">
<img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="Truncgil" fetchpriority="high" decoding="async">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="Truncgil" fetchpriority="high" decoding="async">
</a>
<div class="hidden lg:!flex xl:!flex" style="position: relative; left:5px">
@include("components.custom.language-selector")
<div class="hidden lg:!flex xl:!flex shrink-0 homepage-header-brand__language">
<x-custom.language-selector class="!ml-0" />
</div>
</div>
<div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
@@ -197,6 +197,54 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
.offcanvas .logo-dark { display: none !important; }
.offcanvas .logo-light { display: block !important; }
/* Anasayfa: logo + dil seçici viewport merkezinde (menü genişliğinden bağımsız) */
@media (min-width: 992px) {
.navbar.center-logo .navbar-collapse-wrapper {
position: relative;
}
.navbar.center-logo .offcanvas-nav > .homepage-header-brand {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
z-index: 5;
width: auto !important;
max-width: none;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
transform: translateX(-50%);
pointer-events: none;
justify-content: center !important;
gap: 0.5rem;
}
.navbar.center-logo .offcanvas-nav > .homepage-header-brand > * {
pointer-events: auto;
}
.navbar.center-logo .homepage-header-brand__language .navbar-other {
margin-left: 0 !important;
}
.navbar.center-logo .offcanvas-nav > .offcanvas-body:not(.order-4) {
flex: 1 1 0;
min-width: 0;
width: auto !important;
}
.navbar.center-logo .offcanvas-nav > .offcanvas-body.order-1 .navbar-nav,
.navbar.center-logo .offcanvas-nav > .offcanvas-body.order-1 {
justify-content: flex-end;
}
.navbar.center-logo .offcanvas-nav > .offcanvas-body.order-3 .navbar-nav,
.navbar.center-logo .offcanvas-nav > .offcanvas-body.order-3 {
justify-content: flex-start;
}
}
/* Smoother Offcanvas Menu Transition */
.offcanvas {
transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0) !important;