<div class="navigation-progress" id="navigation-progress">
</div>
<div class="top-bar" id="top-bar">
  <nav>
    <div id="pwa-nav-buttons" class="pwa-nav-buttons">
      <button type="button" id="app-back-button"><img src="<%= asset_path("keyboard-left-arrow-button.svg") %>" alt="back icon" /></button>
      <button type="button" id="app-forward-button"><img src="<%= asset_path("keyboard-right-arrow-button.svg") %>" alt="forward icon" /></button>
      <button type="button" id="app-refresh-button"><img src="<%= asset_path("refresh-button.svg") %>" alt="refresh icon" /></button>
    </div>
    <a href="#articles-list" class="skip-content-link">Skip to content</a>
    <a href="/" class="logo-link" id="logo-link" aria-label="<%= ApplicationConfig["COMMUNITY_NAME"] %> Home"><%= logo_svg %></a>
    <div id="nav-search-form-root">
      <div class="nav-search-form">
        <form acceptCharset="UTF-8" method="get">
          <input class="nav-search-form__input" type="text" name="q" id="nav-search" placeholder="Search" autoComplete="off" />
        </form>
      </div>
    </div>
    <a href="/new" id="write-link" class="cta nav-link write">WRITE A POST</a>
    <a href="/connect" id="connect-link" class="nav-link connect-icon" aria-label="Connect">
      <%= inline_svg_tag("connect.svg", size: "100% * 100%", aria: true, title: "Connect") %>
      <div class="connect-number" id="connect-number"></div>
    </a>
    <a href="/notifications" id="notifications-link" class="nav-link notifications-icon" aria-label="Notifications">
      <%= inline_svg_tag("bell.svg", size: "100% * 100%", aria: true, title: "Notifications") %>
      <div class="notifications-number" id="notifications-number"></div>
    </a>
    <div class="navbar-menu-wrapper" id="navbar-menu-wrapper">
      <button type="button" class="navigation-butt" id="navigation-butt" aria-label="Navigation menu">
        <% if user_signed_in? %>
          <div class="nav-profile-image-wrapper"><img alt="" class="nav-profile-image" id="nav-profile-image" /></div>
        <% else %>
          <%= inline_svg_tag("menu.svg", class: "bars", size: "20% * 20%", aria: true, title: "Navigation menu") %>
        <% end %>
      </button>
      <div class="menubg" id="menubg"></div>
      <%= render "layouts/nav_menu" %>
    </div>
  </nav>
</div>
