volunteers/app/views/layouts/_header.haml

%header.bg-white{"aria-label" => "Site Header"}
  .mx-auto.max-w-screen-xl.px-8.mb-6.mt-6.sm:px-6.lg:px-10
    .flex.h-16.items-center.justify-between
      .flex-1.md:flex.md:items-center.md:gap-6
        %a.block.text-teal-600{:href => "/"}
          %span.sr-only Home
          = image_tag("feenix_lintu" , class: "h-20")
      .md:flex.md:items-center.md:gap-12
        %nav.hidden.md:block{"aria-label" => "Site Nav"}
          %ul.flex.items-center.gap-6
            %li
              %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => "/retreats"}
                Retreats
            %li
              %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => "/studios"}
                Studios
            %li
              %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => "/makerspace"}
                Makerspace
            %li
              %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => "/coworking"}
                Coworking
            %li
              %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => "/"}
                About
        .flex.items-center.gap-4
          .sm:flex.sm:gap-4
            = link_to "facebook.com" do
              = image_tag("fb" , class: "h-10 rounded-md")
          .sm:flex.sm:gap-4
            %a.rounded-md.bg-teal-600.px-5.text-sm.font-medium.text-white.shadow{:class => "py-2.5", :href => "/"}
              Login
          .block.md:hidden
            %button.rounded.bg-gray-100.p-2.text-gray-600.transition{:class => "hover:text-gray-600/75"}
              %svg.h-5.w-5{:fill => "none", :stroke => "currentColor", "stroke-width" => "2", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
                %path{:d => "M4 6h16M4 12h16M4 18h16", "stroke-linecap" => "round", "stroke-linejoin" => "round"}