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/components/custom/language-selector.blade.php
+69 -23
View File
@@ -1,31 +1,77 @@
@props([
'variant' => 'default',
])
@php
$languages = available_languages();
$currentLang = current_language_code();
$currentLanguage = $languages->firstWhere('code', $currentLang);
$languageCollapseId = 'offcanvas-language-collapse';
$wrapperClass = $variant === 'offcanvas'
? 'language-select-offcanvas w-full'
: 'navbar-other !ml-5 header-language-desktop !hidden lg:!flex xl:!flex shrink-0';
$linkClass = 'nav-link dropdown-item dropdown-toggle xl:!text-[.85rem] lg:!text-[.85rem] max-lg:!text-[1.05rem]';
@endphp
<div class="navbar-other !flex !ml-5">
<ul class="navbar-nav !flex-row !items-center">
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle xl:!text-[.85rem] lg:!text-[.85rem] max-lg:!text-[1.05rem]" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@if($currentLanguage)
{{ strtoupper($currentLanguage->code) }}
@else
{{ strtoupper($currentLang) }}
@endif
</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
@foreach($languages as $language)
<li class="nav-item">
<a class="dropdown-item hover:!text-[#747ed1] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '' }}"
href="{{ route('language.switch', $language->code) }}">
{{ strtoupper($language->code) }}
</a>
@if($variant === 'offcanvas')
<div {{ $attributes->merge(['class' => $wrapperClass]) }}>
<button
type="button"
class="language-select-offcanvas__toggle w-full flex items-center justify-between uppercase !text-[1.05rem] !text-white hover:!text-white focus:!text-white bg-transparent border-0 p-0"
data-bs-toggle="collapse"
data-bs-target="#{{ $languageCollapseId }}"
aria-expanded="false"
aria-controls="{{ $languageCollapseId }}"
>
<span>
@if($currentLanguage)
{{ strtoupper($currentLanguage->code) }}
@else
{{ strtoupper($currentLang) }}
@endif
</span>
<i class="uil uil-angle-down language-select-offcanvas__icon text-[1.1rem] !text-[#e31e24] transition-transform duration-200"></i>
</button>
<div id="{{ $languageCollapseId }}" class="collapse language-select-offcanvas__panel">
<ul class="navbar-nav flex-col !ps-0 !mt-2 !mb-0 uppercase">
@foreach($languages as $language)
<li class="nav-item">
<a
class="nav-link !py-[0.35rem] !px-0 !text-[0.95rem] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '!text-white/85 hover:!text-white' }}"
href="{{ route('language.switch', $language->code) }}"
>
{{ strtoupper($language->code) }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
@else
<div {{ $attributes->merge(['class' => $wrapperClass]) }}>
<ul class="navbar-nav !flex-row !items-center">
<li class="nav-item dropdown language-select uppercase group">
<a class="{{ $linkClass }}" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@if($currentLanguage)
{{ strtoupper($currentLanguage->code) }}
@else
{{ strtoupper($currentLang) }}
@endif
</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
@foreach($languages as $language)
<li class="nav-item">
<a class="dropdown-item hover:!text-[#747ed1] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '' }}"
href="{{ route('language.switch', $language->code) }}">
{{ strtoupper($language->code) }}
</a>
</li>
@endforeach
</ul>
</li>
@endforeach
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
</div>
@endif