docbrown/app/views/layouts/_top_bar.html.erb

<div class="navigation-progress" id="navigation-progress"></div>
<header class="crayons-header print-hidden">
  <span id="route-change-target" tabindex="-1"></span>
  <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
  <div class="crayons-header__container">
    <span class="inline-block m:hidden ">
      <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2">
        <%= crayons_icon_tag(:hamburger, title: t("views.hamburger.icon")) %>
      </button>
    </span>
    <%= render "layouts/logo" %>

    <div class="crayons-header--search js-search-form" id="header-search">
      <form accept-charset="UTF-8" method="get" action="<%= search_path %>" role="search">
        <div class="crayons-fields crayons-fields--horizontal">
          <div class="crayons-field flex-1 relative">
            <input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="<%= t("views.search.placeholder") %>" autocomplete="off" />
            <button type="submit" aria-label="<%= t("views.search.icon.aria_label") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
              <%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
            </button>
          </div>
        </div>
      </form>
    </div>

    <div class="flex items-center h-100 ml-auto">
      <a class="c-link c-link--icon-alone c-link--block m:hidden <% unless user_signed_in? %>mx-1<% end %>" id="search-link" aria-label="<%= t("views.search.icon.aria_label") %>" href="<%= search_path %>">
        <%= crayons_icon_tag(:search, title: t("views.search.icon.title")) %>
      </a>
      <% if user_signed_in? %>
        <span class="hidden m:flex ml-auto">
          <%= application_policy_content_tag("a", record: Article, query: :create?, href: new_path, class: "c-cta c-cta--branded mr-2 whitespace-nowrap") do %>
            <%= t("views.main.create_post") %>
          <% end %>

          <span class="mod-icon-visible-block">
            <a id="moderation-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.moderation.aria_label") %>" href="<%= mod_path %>">
              <%= crayons_icon_tag(:mod, title: t("views.main.header.moderation.icon")) %>
            </a>
          </span>
        </span>

        <a href="<%= notifications_path %>" id="notifications-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.notifications.aria_label") %>">
          <%= crayons_icon_tag(:bell, title: t("views.main.header.notifications.icon")) %>
          <span class="c-indicator c-indicator--danger hidden" id="notifications-number"></span>
        </a>

        <div class="crayons-header__menu mx-1" id="crayons-header__menu">
          <button type="button" class="c-btn c-btn--icon-alone radius-full p-1" id="member-menu-button" aria-label="<%= t("views.main.header.nav.aria_label") %>" aria-expanded="false">
            <span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
          </button>
          <%= render "layouts/nav_menu" %>
        </div>
      <% else %>
        <div class="flex" id="authentication-top-nav-actions">
          <span class="hidden m:block">
            <a href="<%= sign_up_path %>" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant>
              <%= t("views.main.header.login") %>
            </a>
          </span>

          <a href="<%= sign_up_path(state: "new-user") %>" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant>
            <%= t("views.main.header.create_account") %>
          </a>
        </div>
      <% end %>
    </div>
  </div>
  <% if user_signed_in? %>
    <script>
      // Here we have some scripts we want to get working on before
      // waiting for the page to stream in.

      // Load the current user's pic as quickly as it's available
      var currentUser = localStorage.getItem('current_user')
      var navProfilePic = document.getElementById('nav-profile-image')
      if (currentUser && navProfilePic) {
        navProfilePic.src = JSON.parse(currentUser).profile_image_90;
      }

      // Load notifications count as quickly as it's available.
      // Not if we're on the notifications page itself
      if (
        window.location.pathname !== '/notifications'
      ) {
        var xmlhttp;

        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            var count = xmlhttp.response;
            if (isNaN(count)) {
              document
                .getElementById('notifications-number')
                .classList.add('hidden');
            } else if (count != '0' && count != undefined && count != '') {
              document.getElementById('notifications-number').innerHTML =
                xmlhttp.response;
              document
                .getElementById('notifications-number')
                .classList.remove('hidden');
            } else {
              document
                .getElementById('notifications-number')
                .classList.add('hidden');
            }
          }
        };

        xmlhttp.open('GET', '/notifications/counts', true);
        xmlhttp.send();
      }
    </script>
  <% end %>
</header>

<%= render "shared/hamburger" %>