citrus/resources/views/partials/header-center-nav.blade.php

{{-- demo28.html: center-nav transparent position-absolute navbar-light --}}
<header class="relative wrapper">
  <nav class="navbar navbar-expand-lg center-nav transparent position-absolute navbar-light">
    <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
      <div class="navbar-brand w-full">
        <a href="{{ url('/') }}">
          <img src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" width="134" height="43" fetchpriority="high" decoding="async">
        </a>
      </div>
      <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
        <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
          <a href="{{ url('/') }}">
            <img class="!h-[2.2rem]" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" width="134" height="43" decoding="async">
          </a>
          <button type="button" class="btn-close !text-white" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
        </div>
        <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
          @include('components.custom.menu')
          <div class="offcanvas-footer xl:!hidden lg:!hidden !mt-auto">
            <div>
              <a href="mailto:{{ setting('contact_email') }}" class="link-inverse">{{ setting('contact_email') }}</a>
              <br>
              <a href="tel:{{ setting('contact_phone') }}">{{ setting('contact_phone') }}</a>
              <br>
              @php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
              <nav class="nav social social-white !mt-4">
                @if(!empty($social_media['Twitter']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Twitter') }}"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
                @if(!empty($social_media['Facebook']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Facebook'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Facebook') }}"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
                @if(!empty($social_media['Instagram']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Instagram') }}"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
                @if(!empty($social_media['Youtube']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('YouTube') }}"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
              </nav>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-other w-full !flex !ml-auto">
        <ul class="navbar-nav !flex-row !items-center !ml-auto">
          <li class="nav-item hidden xl:!flex lg:!flex">
            @include('components.custom.language-selector')
          </li>
          <li class="nav-item hidden xl:!block lg:!block">
            @php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
            <nav class="nav social social-muted justify-end text-right">
              @if(!empty($social_media['Twitter']))
                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Twitter') }}"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]" aria-hidden="true"></i></a>
              @endif
              @if(!empty($social_media['Facebook']))
                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Facebook'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Facebook') }}"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]" aria-hidden="true"></i></a>
              @endif
              @if(!empty($social_media['Instagram']))
                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Instagram') }}"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]" aria-hidden="true"></i></a>
              @endif
              @if(!empty($social_media['Youtube']))
                <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('YouTube') }}"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]" aria-hidden="true"></i></a>
              @endif
            </nav>
          </li>
          <li class="nav-item xl:!hidden lg:!hidden">
            <button class="hamburger offcanvas-nav-btn" type="button" data-bs-toggle="offcanvas" data-bs-target=".offcanvas-nav" aria-label="{{ t('Menüyü aç') }}"><span></span></button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var offcanvases = document.querySelectorAll('.offcanvas-nav');
  var hamburgers = document.querySelectorAll('.hamburger.offcanvas-nav-btn');
  if (offcanvases.length > 0 && hamburgers.length > 0) {
    offcanvases.forEach(function (oc) {
      oc.addEventListener('show.bs.offcanvas', function () {
        hamburgers.forEach(function (h) { h.classList.add('is-active'); });
      });
      oc.addEventListener('hide.bs.offcanvas', function () {
        hamburgers.forEach(function (h) { h.classList.remove('is-active'); });
      });
    });
  }
});
</script>