<div class="navigation-progress" id="navigation-progress">
</div>
<div class="top-bar" id="top-bar">
  <nav>
    <a href="/" class="logo-link" id="logo-link" aria-label="DEV Home"><%= inline_svg("devplain.svg", class: "logo", size: '20% * 20%') %></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("connect.svg", size: '100% * 100%')%>
        <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("bell.svg", size: '100% * 100%')%>
        <div class="notifications-number" id="notifications-number"></div>
      </a>
      <div class="navbar-menu-wrapper" id="navbar-menu-wrapper">
        <button class="navigation-butt" id="navigation-butt" aria-label="Navigation">
          <% if user_signed_in? %>
            <div class="nav-profile-image-wrapper"><img alt="" class="nav-profile-image" id="nav-profile-image"/>
          <% else %>
            <%= inline_svg("menu.svg", class: "bars", size: '20% * 20%') %>
          <% end %>
        </button>
        <div class="menubg" id="menubg"></div>
        <%= render "layouts/nav_menu" %>
      </div>
    </a>
  </nav>
</div>
