citrus/resources/views/partials/header-demo31.blade.php

{{-- demo31.html: üst bilgi bandı + center-nav transparent navbar-light --}}
<header class="relative wrapper !bg-[#ffffff]">
  <div class="bg-[rgba(63,120,224)] !text-white font-bold text-[.75rem] !mb-2">
    <div class="container py-2 flex flex-col gap-2 sm:!flex-row sm:flex-wrap sm:items-center sm:gap-4 md:py-1 xl:!flex lg:!flex md:!flex xl:!flex-row lg:!flex-row md:!flex-row">
      @if(setting('contact_address'))
      <div class="flex flex-row items-center">
        <div class="icon !text-white !text-[1.1rem] !mt-[.25rem] !mr-[.5rem]">
          <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i>
        </div>
        <address class="!mb-0 not-italic !leading-[inherit] block">{{ setting('contact_address') }}</address>
      </div>
      @endif
      @if(setting('contact_phone'))
      <div class="flex flex-row items-center sm:ms-auto {{ setting('contact_address') ? 'md:me-6' : '' }}">
        <div class="icon !text-white !text-[1.1rem] !mt-[.25rem] !mr-[.5rem]">
          <i class="uil uil-phone-volume before:content-['\ec50']"></i>
        </div>
        <p class="!mb-0">
          <a href="tel:{{ preg_replace('/\s+/', '', setting('contact_phone')) }}" class="hover !text-white hover:!text-white">{{ setting('contact_phone') }}</a>
        </p>
      </div>
      @endif
      @if(setting('contact_email'))
      <div class="flex flex-row items-center">
        <div class="icon !text-white !text-[1.1rem] !mt-[.25rem] !mr-[.5rem]">
          <i class="uil uil-message before:content-['\ebfe']"></i>
        </div>
        <p class="!mb-0">
          <a href="mailto:{{ setting('contact_email') }}" class="hover !text-white hover:!text-white">{{ setting('contact_email') }}</a>
        </p>
      </div>
      @endif
    </div>
  </div>

  <nav class="navbar navbar-expand-lg center-nav transparent 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" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
        </div>
        <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
          <div class="xl:!hidden lg:!hidden w-full pb-4 mb-2 border-b border-[#e2e8f0]">
            @include('components.custom.language-selector', ['variant' => 'offcanvas'])
          </div>
          @include('components.custom.menu')
          <div class="offcanvas-footer xl:!hidden lg:!hidden !mt-auto">
            <div>
              @if(setting('contact_email'))
              <a href="mailto:{{ setting('contact_email') }}" class="link-inverse">{{ setting('contact_email') }}</a>
              <br>
              @endif
              @if(setting('contact_phone'))
              <a href="tel:{{ preg_replace('/\s+/', '', setting('contact_phone')) }}">{{ setting('contact_phone') }}</a>
              <br>
              @endif
              @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 header-language-desktop">
        <ul class="navbar-nav !flex-row !items-center !ml-auto">
          <li class="nav-item hidden xl:block lg:block md:block">
            @include('components.custom.language-selector')
          </li>
          <li class="nav-item hidden xl:block lg:block md:block">
            <a
              href="{{ route('page.show', ['slug' => 'iletisim']) }}"
              class="btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
            >{{ t('İletişim') }}</a>
          </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>