<div class="navbar hg:flex hg:justify-between hg:relative hg:z-[500] hg:p-2 hg:md:py-4 hg:md:px-0 {{ 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:grid-cols-[1fr] hg:grid-rows-[auto_1fr_auto] hg:pb-8 hg:md:pb-0 hg:md:h-auto 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:md:static hg:flex-col hg:md:flex-row hg:justify-start hg:items-stretch hg:md:items-center hg:grow-1 hg:shrink-1">
    <div class="navbar--modal-top hg:container hg:mx-auto hg:w-full hg:flex hg:md:hidden hg:justify-between hg:relative hg:z-[500] hg:p-2 hg:col-start-1 hg:col-span-1 hg:row-start-1 hg:row-span-1">
      <div class="navbar--modal-logo hg:flex-1 hg:min-h-[44px] hg:md:hidden hg:flex hg:flex-col hg:justify-center hg:items-start">
        {{ block('logo') }}
      </div>

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


    <div class="navbar--links hg:row-start-3 hg:row-span-1 hg:col-start-1 hg:col-span-1 hg:w-full hg:flex-initial hg:md:w-auto hg:ml-auto hg:flex hg:flex-col hg:md:flex-row hg:gap-2 hg:justify-end hg:grow-0 hg:shrink-0">
      {% 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:min-w-[44px] hg:min-h-[44px] hg:flex hg:justify-center hg:items-center hg:md:hidden hg:grow-0 hg:shrink-0">
    <button class="navbar--hamburger hg:flex hg:justify-center hg:items-center" aria-label="{{ 'Show menu'|t }}">
      {{ include('@mercury/components/icon/icon.twig', { icon: 'list', icon_size: 'hg:text-3xl' }) }}
    </button>
  </div>
</div>
