Nav Titlebar

{{!-- Set to fixed for GSAP --}}
<div class="header fixed right-0 left-0">
    <div class="relative text-white mx-auto" style="max-width: 2000px;">

        <div class="bg-gradient-to-b from-black to-transparent opacity-70 absolute inset-0"></div>

        <div class="flex relative">

{{!--            {# Booking widget, button and dropbown #}--}}
            <div class="w-1/6 flex flex-col sm:flex-row sm:justify-start sm:items-start" x-data="{ open: false }">
                <div class="m-2 sm:m-4 md:m-6 lg:m-8">

{{!--                    {# {% if (entry.showBookingWidget ??? null) and (entry.type != 'homepage') %} #}--}}
{{!--                    {# #}{# Can't have two booking widgets on page, conflict with ids and scripts. If booking widget added to page content, make the button link directly to booking system instead #}--}}
{{!--                    {# <a class="flex flex-col items-center opacity-75 hover:opacity-100" href="{{ contactInfo.reservationsUrl }}" rel="nofollow noopener" #}--}}
{{!--                    {# onclick="ga('send','event','Outgoing','Booking System')" target="_blank"><svg class="w-12 h-12 fill-current" #}--}}
{{!--                    {# xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> #}--}}
{{!--                    {# <path d="M9 4v1H5v22h22V5h-4V4h-2v1H11V4zM7 7h2v1h2V7h10v1h2V7h2v2H7zm0 4h18v14H7zm6 2v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 17v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 21v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z"></path> #}--}}
{{!--                    {# </svg> #}--}}
{{!--                    {# <p class="uppercase text-xs pt-1">Book</p> #}--}}
{{!--                    {# </a> #}--}}
{{!--                    {# {% else %} #}--}}

                    <button class="flex flex-col items-center opacity-75 hover:opacity-100" @click="open = true">

                        <svg class="w-12 h-12 fill-current"
                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M9 4v1H5v22h22V5h-4V4h-2v1H11V4zM7 7h2v1h2V7h10v1h2V7h2v2H7zm0 4h18v14H7zm6 2v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 17v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 21v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z"></path>
                        </svg>
                        <p class="uppercase text-xs pt-1">Book</p>
                    </button>

                    <div class="absolute top-0 left-0 z-20 bg-gray-800 p-2 sm:w-72 sm:ml-6 sm:mt-6"
                         style="background: hsl(284, 51%, 22%)"
                         x-cloak
                         x-show="open" @click.away="open = false"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 transform scale-90 -translate-y-6 -translate-x-6"
                         x-transition:enter-end="opacity-100 transform scale-100"
                         x-transition:leave="transition ease-in duration-200"
                         x-transition:leave-start="opacity-100 transform scale-100"
                         x-transition:leave-end="opacity-0 transform scale-90 -translate-y-6 -translate-x-6"
                    >
                        <button @click="open = false" class="absolute group top-0 right-0" aria-label="Close">
                            <svg class="h-6 w-6 m-2 fill-current text-gray-500 group-hover:text-gray-100"
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
                                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                            </svg>
                        </button>

{{!--                        {# {% include '_includes/content/booking-widget.twig' %} #}--}}

                    </div>

{{!--                    {# {% endif %} #}--}}

                </div>
            </div>

{{!--            {# Site logo #}--}}
            <div class="w-2/3 text-center">

                <a href="{{ siteUrl }}"
                   class="relative inline-block mx-auto bg-gradient-to-b from-gray-100 via-gray-100 hover:from-white hover:via-white">
                  {{!--{#                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-100 opacity-50"></div>#}--}}
                    <img class="relative pb-6" src="/dist/images/mountaineerlodge_logo.png"
                         srcset="/dist/images/mountaineerlodge_logo.png 1x, /dist/images/[email protected] 2x"
                         width="300" height="130"
                         alt="{{ siteName }} logo"
                    >

                </a>

            </div>

{{!--            {# Navigation button #}--}}
            <div class="w-1/6 flex flex-col sm:flex-row sm:justify-end sm:items-start">

                <button class="toggle-button flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">

                    <svg class="w-12 h-12 fill-current"
                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                        <path d="M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z"></path>
                    </svg>
                    <p class="uppercase text-xs pt-1">Menu</p>

                </button>

            </div>

        </div>

    </div>
</div>


{{!-- Reveal navigation on scroll up using GSAP --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>

<script>

  const showAnim = gsap.from('.header', {
    yPercent: -100,
    paused: true,
    duration: 0.2
  }).progress(1);

  ScrollTrigger.create({
    start: "top top",
    end: 99999,
    onUpdate: (self) => {
      console.log(self.direction);
      self.direction === -1 ? showAnim.play() : showAnim.reverse()
    }
  });

</script>