feat: implement language selector component with responsive design for improved user experience across devices
This commit is contained in:
Ümit Tunç
@@ -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
|
||||
|
||||
@@ -85,9 +85,44 @@ $favicon_path = setting('site_favicon');
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
header .container,
|
||||
.wrapper > .container {
|
||||
max-width: 100%;
|
||||
|
||||
|
||||
header .header-language-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
header .header-language-desktop {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
header nav .container > .navbar-other:has(> .navbar-nav > .language-select) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.offcanvas .language-select-offcanvas__toggle {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.offcanvas .language-select-offcanvas__panel {
|
||||
position: static !important;
|
||||
inset: auto !important;
|
||||
transform: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.offcanvas .language-select-offcanvas__panel .nav-link {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.offcanvas .language-select-offcanvas__toggle[aria-expanded="true"] .language-select-offcanvas__icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
<?php echo setting('custom_css') ?>
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user