<div
  class="navbar hg:relative hg:z-[500] hg:flex hg:justify-between hg:p-2 hg:md:px-0 hg:md:py-4 {{
  storybook is not empty
    ? 'hg:container hg:mx-auto'
    : ''
  }}"
>
  <div class="navbar--logo hg:self-center">
    {% block logo %}
      {{ include('@mercury/components/branding/branding.twig') }}
    {% endblock %}
  </div>

  {% set class_from_menu_align = {
    left: 'hg:md:justify-start',
    center: 'hg:md:justify-center',
    right: 'hg:md:justify-end'
  } %}
  <div
    class="navbar--menu hg:fixed hg:inset-0 hg:top-[calc(var(--drupal-displace-offset-top,0px)+var(--gin-toolbar-height,0px)-var(--navbar-scroll-top,0px))] hg:shrink-1 hg:grow-1 hg:grid-cols-[1fr] hg:grid-rows-[auto_1fr_auto] hg:flex-col hg:items-stretch hg:justify-start hg:pb-8 hg:md:static hg:md:h-auto hg:md:flex-row hg:md:items-center hg:md:pb-0"
  >
    <div
      class="navbar--modal-top hg:relative hg:z-[500] hg:col-span-1 hg:col-start-1 hg:row-span-1 hg:row-start-1 hg:container hg:mx-auto hg:flex hg:w-full hg:justify-between hg:p-2 hg:md:hidden"
    >
      <div class="navbar--modal-logo hg:flex hg:min-h-[44px] hg:flex-1 hg:flex-col hg:items-start hg:justify-center hg:md:hidden">
        {{ block('logo') }}
      </div>

      <button
        class="navbar--hide-menu hg:flex hg:h-[44px] hg:w-[44px] hg:flex-0 hg:cursor-pointer hg:items-center hg:justify-center hg:p-2 hg:md:hidden"
        aria-label="{{ 'Hide menu'|t }}"
      >
        {{
          include(
            '@mercury/components/icon/icon.twig',
            {
              icon: 'x',
              icon_size: 'hg:text-3xl'
            }
          )
        }}
      </button>
    </div>

    <div
      class="navbar--dropdown-menu-wrapper hg:relative hg:col-span-1 hg:col-start-1 hg:row-span-1 hg:row-start-2 hg:min-h-0 hg:w-full hg:flex-1 hg:after:pointer-events-none hg:after:absolute hg:after:bottom-0 hg:after:z-3 hg:after:h-24 hg:after:w-full hg:after:bg-linear-to-b hg:after:from-transparent hg:after:to-body-bg hg:after:content-[''] hg:md:after:content-none"
    >
      <div
        class="navbar--dropdown-menu hg:flex hg:max-h-full hg:flex-col hg:items-stretch hg:justify-start hg:gap-2 hg:overflow-auto hg:pr-[calc((var(--hg-spacing)_*_8)_-_var(--element-scrollbar-width,_0px))] hg:pl-8 hg:md:flex-row hg:md:overflow-visible {{
        class_from_menu_align[menu_align]
        }}"
      >
        {% block navigation %}

        {% endblock %}
      </div>
    </div>

    <div
      class="navbar--links hg:col-span-1 hg:col-start-1 hg:row-span-1 hg:row-start-3 hg:ml-auto hg:flex hg:w-full hg:flex-initial hg:shrink-0 hg:grow-0 hg:flex-col hg:justify-end hg:gap-2 hg:md:w-auto hg:md:flex-row"
    >
      {% block links %}
        {{
          include(
            'mercury:button',
            {
              variant: 'primary',
              label: 'Button'|t,
              icon: 'arrow-right',
              href: 'https://example.com'
            }
          )
        }}

        {{
          include(
            'mercury:button',
            {
              variant: 'secondary',
              label: 'Another'|t,
              icon: 'arrow-right',
              href: 'https://example.com'
            }
          )
        }}
      {% endblock %}
    </div>
  </div>

  <div
    class="navbar--hamburger-container hg:flex hg:min-h-[44px] hg:min-w-[44px] hg:shrink-0 hg:grow-0 hg:items-center hg:justify-center hg:md:hidden"
  >
    <button class="navbar--hamburger hg:flex hg:items-center hg:justify-center" aria-label="{{ 'Show menu'|t }}">
      {{
        include(
          '@mercury/components/icon/icon.twig',
          {
            icon: 'list',
            icon_size: 'hg:text-3xl'
          }
        )
      }}
    </button>
  </div>
</div>
