{{ $mobileMenuStyle := .Site.Params.header.mobileMenuStyle | default "fullscreen" }}
<div class="mobile-header-row relative flex items-center h-14 gap-4">
  {{ if hugo.IsMultilingual }}
    {{ partial "header/components/translations.html" . }}
  {{ end }}

  {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
    <button
      id="appearance-switcher-mobile"
      type="button"
      aria-label="{{ i18n "footer.dark_appearance" }}"
      title="{{ i18n "footer.dark_appearance" }}"
      class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
      <div class="dark:hidden">
        {{ partial "icon.html" "moon" }}
      </div>
      <div class="hidden dark:block">
        {{ partial "icon.html" "sun" }}
      </div>
    </button>
  {{ end }}

  {{ if .Site.Params.enableSearch | default false }}
    <button
      id="search-button-mobile"
      aria-label="{{ i18n "search.open_button_title" }}"
      class="flex items-center justify-center bf-icon-color-hover"
      title="{{ i18n "search.open_button_title" }}">
      {{ partial "icon.html" "search" }}
    </button>
  {{ end }}

  {{ if or
    .Site.Menus.main
    .Site.Menus.subnavigation
    .Site.Params.enableA11y
  }}
    <input type="checkbox" id="mobile-menu-toggle" autocomplete="off" class="hidden peer">
    <label
      for="mobile-menu-toggle"
      tabindex="0"
      role="button"
      aria-expanded="false"
      aria-controls="mobile-menu-dialog"
      aria-label="{{ i18n "nav.main_menu" }}"
      class="flex items-center justify-center cursor-pointer bf-icon-color-hover">
      {{ partial "icon.html" "bars" }}
    </label>

    <div
      id="mobile-menu-dialog"
      role="dialog"
      aria-modal="true"
      aria-label="{{ i18n "nav.main_menu" }}"
      style="scrollbar-gutter: stable;"
      class="z-50 invisible overflow-y-auto opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100
      {{ if eq $mobileMenuStyle "dropdown" }}
        mobile-menu-style-dropdown absolute end-0 top-[calc(100%+0.75rem)] z-10 w-[min(22rem,calc(100vw-1.5rem))] rounded-2xl border border-neutral-200/80 bg-neutral/95 p-5 shadow-2xl shadow-neutral-900/20 dark:border-neutral-700/80 dark:bg-neutral-800/95
      {{ else }}
        fixed inset-0 px-6 py-20 bg-neutral-50/97 dark:bg-neutral-900/99
      {{ end }}
      {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
      <label
        for="mobile-menu-toggle"
        tabindex="0"
        role="button"
        aria-expanded="false"
        aria-controls="mobile-menu-dialog"
        class="{{ if eq $mobileMenuStyle "dropdown" }}absolute end-3 top-3 h-10 w-10 rounded-xl{{ else }}fixed end-8 top-5 z-50 h-12 w-12 rounded-full{{ end }} flex items-center justify-center cursor-pointer select-none bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
        <span class="sr-only">{{ i18n "nav.close_menu" }}</span>
        {{ partial "icon.html" "xmark" }}
      </label>
      <nav
        aria-label="{{ i18n "nav.mobile_menu" }}"
        class="{{ if eq $mobileMenuStyle "dropdown" }}mt-10 space-y-3{{ else }}mx-auto max-w-md space-y-6{{ end }}">
        {{ template "mobile-main-menu" . }}
        {{ template "mobile-subnavigation" . }}
        {{ template "mobile-footer-components" . }}
      </nav>
    </div>
  {{ end }}
</div>

{{ define "mobile-main-menu" }}
  {{ range .Site.Menus.main }}
    {{ $submenuId := printf "fullscreen-submenu-%s" (.Identifier | default .Name | anchorize) }}
    <div class="px-2">
      <div class="flex items-center gap-4">
        <a
          href="{{ .URL }}"
          {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
          {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
            target="_blank"
          {{ end }}
          class="flex grow items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
          {{ if .Pre }}
            <span class="flex items-center justify-center h-8 w-8 text-2xl">
              {{ partial "icon.html" .Pre }}
            </span>
          {{ end }}
          <span title="{{ .Title }}" class="text-2xl font-bold tracking-tight">
            {{ .Name | markdownify }}
          </span>
        </a>
        {{ if .HasChildren }}
          <label
            for="{{ $submenuId }}"
            tabindex="0"
            role="button"
            aria-expanded="true"
            aria-label="{{ i18n "nav.toggle_submenu" }}"
            class="ms-auto flex items-center justify-center h-10 w-10 cursor-pointer rounded-lg bf-icon-color-hover border bf-border-color bf-border-color-hover">
            {{ partial "icon.html" "chevron-down" }}
          </label>
        {{ end }}
      </div>

      {{ if .HasChildren }}
        <input checked type="checkbox" id="{{ $submenuId }}" autocomplete="off" class="hidden peer/full">

        <div
          class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked/full:grid-rows-[1fr]">
          <div class="overflow-hidden">
            <div class="ms-7 mt-4">
              {{ range .Children }}
                <a
                  href="{{ .URL }}"
                  {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
                  {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
                    target="_blank"
                  {{ end }}
                  class="flex items-center gap-3 p-2 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
                  {{ if .Pre }}
                    <span class="flex items-center justify-center h-5 w-5">
                      {{ partial "icon.html" .Pre }}
                    </span>
                  {{ end }}
                  <span title="{{ .Title }}" class="text-lg">
                    {{ .Name | markdownify }}
                  </span>
                </a>
              {{ end }}
            </div>
          </div>
        </div>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "mobile-subnavigation" }}
  {{ if .Site.Menus.subnavigation }}
    <div class="flex flex-wrap gap-4 mt-8 pt-8 border-t bf-border-color">
      {{ range .Site.Menus.subnavigation }}
        <a
          href="{{ .URL }}"
          {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
          class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
          {{ if .Pre }}
            <span class="flex items-center justify-center h-4 w-4">
              {{ partial "icon.html" .Pre }}
            </span>
          {{ end }}
          <span title="{{ .Title }}">{{ .Name | markdownify }}</span>
        </a>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "mobile-footer-components" }}
  {{ if .Site.Params.enableA11y | default false }}
    <div
      class="flex flex-wrap items-center [&_span]:text-2xl gap-x-6 ps-2 mt-8 pt-8 border-t bf-border-color">
      {{ partial "header/components/a11y.html" (dict "prefix" "mobile-menu-") }}
    </div>
  {{ end }}
{{ end }}