openaustralia/planningalerts

<header>
  <div class="hidden bg-header-orange sm:block">
    <%= render Tailwind::ContainerComponent.new do %>
      <div class="flex flex-row-reverse items-center h-8">
        <%# Using this (out of palette) colour for the text to pass contrast accessibility tests %>
        <%= link_to "https://www.oaf.org.au", class: "focus:outline-none focus:bg-sun-yellow p-1" do %>
          <div class="text-base font-medium tracking-wide text-dark-brown hover:text-dark-navy">
              An <span class="underline">OpenAustralia Foundation</span> service
          </div>
        <% end %>
      </div>
    <% end %>
  </div>
  <div class="flex flex-col">
    <div class="hidden py-8 sm:block bg-yellow bg-header-pattern xl:bg-center">
      <%= render Tailwind::ContainerComponent.new do %>
        <%# TODO: With focus do we want to swap colors around instead? %>
        <%= link_to root_path, class: "inline-block focus:outline-none focus:ring-4 focus:ring-sun-yellow" do %>
          <%= image_tag "tailwind/logo.svg", size: "408x96", alt: "Planning Alerts. Email alerts of planning applications near you" %>
        <% end %>
      <% end %>
    </div>
    <div class="pt-10 pb-2 sm:bg-light-grey sm:py-0">
      <%= render Tailwind::ContainerComponent.new do %>
        <nav aria-label="Main">
          <%= render "menu_mobile" %>
          <%= render "menu_desktop" %>
        </nav>
      <% end %>
    </div>
    <div class="sm:hidden xl:bg-center">
      <%= render Tailwind::ContainerComponent.new do %>
        <%= link_to root_path, class: "inline-block focus:outline-none focus:bg-sun-yellow" do %>
          <%= image_tag "tailwind/logo-navy.svg", size: "350x46", alt: "Planning Alerts" %>
        <% end %>
      <% end %>
    </div>
  </div>
</header>