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

feat: implement language selector component with responsive design for improved user experience across devices

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-21 08:53:44 +03:00
parent 1eab2c856b
commit da0ee2477b
4 changed files with 184 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/header.blade.php
+23 -7
View File
@@ -51,11 +51,14 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<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="" style="position: relative; left:5px">
<div class="hidden lg:!flex xl:!flex" style="position: relative; left:5px">
@include("components.custom.language-selector")
</div>
</div>
<div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
<div class="xl:!hidden lg:!hidden w-full pb-4 mb-2 border-b border-white/10">
@include('components.custom.language-selector', ['variant' => 'offcanvas'])
</div>
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
@foreach($menuItems->slice(0, ceil($menuItems->count() / 2)) as $item)
<x-front.menu-item :item="$item" />
@@ -138,7 +141,9 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
</a>
@endif
</nav>
@include("components.custom.language-selector")
<div class="hidden lg:!block xl:!block shrink-0">
@include("components.custom.language-selector")
</div>
</div>
</div>
@@ -149,12 +154,12 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
{{-- Mobile menu is dark, so we only need the light (white) logo here --}}
<img class="!h-[2.2rem]" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="Truncgil" fetchpriority="high" decoding="async">
</a>
<div class="flex items-center">
@include("components.custom.language-selector")
<button type="button" class="btn-close !text-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<button type="button" class="btn-close !text-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="offcanvas-body !pt-0">
<div class="pb-4 mb-2 border-b border-white/10">
@include('components.custom.language-selector', ['variant' => 'offcanvas'])
</div>
<ul class="navbar-nav">
@foreach($menuItems as $item)
<x-front.menu-item :item="$item" />
@@ -218,6 +223,17 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
.hamburger.is-active::after {
transform: translateY(-6px) rotate(-45deg) !important;
}
@media (max-width: 991.98px) {
header nav > .container > .flex.xl\:!hidden .language-select,
header .navbar-collapse-wrapper .language-select {
display: none !important;
}
.offcanvas .language-select-offcanvas__toggle[aria-expanded="true"] .language-select-offcanvas__icon {
transform: rotate(180deg);
}
}
</style>
@endpush