scinote-web/app/views/shared/_navigation.html.erb

<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
  <div class="container-fluid">

    <!-- header -->
    <div class="navbar-header">
      <% if user_signed_in? %>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <% end %>
      <%= link_to(root_path, class: 'navbar-brand', title: t('nav.label.scinote')) do %>
        <span class="hidden-lg"><%= image_tag('/images/sn-icon.svg', id: 'logo') %></span>
        <span class="visible-lg-block"><%= image_tag('/images/scinote_icon.svg', id: 'logo') %></span>
      <% end %>
      <%= yield :open_mobile_app_button %>

    </div>

    <% if user_signed_in? %>
    <div class="collapse navbar-collapse" id="main-menu">
      <ul class="nav navbar-nav navbar-left" id="nav-team-switch">
        <!-- System notification dropdown -->
         <li class="dropdown system-notifications">
          <a href="#"
             id="system-notifications-dropdown"
             class="dropdown-toggle"
             title="<%= t('system_notifications.navbar.tooltip') %>"
             data-toggle="dropdown"
             role="button"
             aria-haspopup="true"
             aria-expanded="false"
             data-href="<%= system_notifications_url(format: :json) %>">
            <i class="fas fa-gift"></i>
            <span class="visible-xs-inline visible-sm-inline"><%= t("system_notifications.index.whats_new_html") %></span>
            <span id="count-system-notifications"
                  data-href="<%= unseen_counter_system_notifications_url %>">
            </span>
          </a>
          <ul class="dropdown-menu dropdown-system-notifications">
            <li class="system-notifications-dropdown-header">
              <span class="pull-left"><%= t("system_notifications.index.whats_new_html") %></span>
              <span class="show-all">
                <%= link_to t('system_notifications.index.see_all'), system_notifications_path %>
              </span>
              <span class="pull-right">
                <%= link_to t('nav.user.settings'), preferences_path %>
              </span>
            </li>
            <li class="system-notifications-no-recent">
              <em><%= t("system_notifications.index.no_notifications") %></em>
            </li>
          </ul>
        </li>
        <!-- Global team switch -->
        <% if current_user.teams.length > 0 %>
          <li id="team-switch">
            <div class="btn-group">
              <button type="button" class="btn btn-default selected-team" data-toggle="dropdown">
                <%= current_team.name %>
              </button>
              <button type="button"
                      class="btn btn-default dropdown-toggle"
                      title="<%= t('nav.label.teams') %>"
                      data-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu">
                <%= form_for(current_user,
                             url: user_current_team_path,
                             method: :post) do |f| %>
                  <%= hidden_field(:user, :current_team_id) %>
                  <div class="dropdown-header"><%= t('nav.team_switch_title') %></div>
                  <div class="team-container">
                    <% current_user.teams.ordered.each do |team| %>
                      <li class="team-name-item">
                        <a href="#"
                          data-id="<%= team.id %>"
                          class="text-center change-team">
                          <% if current_team == team %>
                            <span class="fas fa-check-circle"></span> <strong><%= team.name %></strong>
                          <% else %>
                            <span class="team-name"><%= team.name %></span>
                          <% end %>
                        </a>
                      </li>
                    <% end %>
                  </div>
                <% end %>
                <% if can_create_teams? %>
                  <li class="new-team">
                    <%= link_to new_team_path do %>
                      <span class="fas fa-plus"></span>
                      <%= t('users.settings.teams.index.new_team') %>
                    <% end %>
                  </li>
                <% end %>
              </ul>
            </div>
          </li>
        <% end %>
      </ul>

      <!-- profile info -->
      <ul class="nav navbar-nav navbar-right">
        <!-- search form -->
        <li>
          <%= form_tag search_path,
                       method: :get,
                       id: 'search-bar',
                       class: 'navbar-form',
                       role: 'search' do %>
              <div class="input-group">
                <input class="form-control"
                       type="text"
                       name="q"
                       placeholder="<%= t('nav.search') %>" />
                <span class="input-group-btn">
                  <button class="btn btn-default" id="navigationGoBtn" type="submit"><%= t 'nav.search_button' %></button>
                </span>
              </div>
          <% end %>
        </li>

        <!-- notifications -->
        <li class="dropdown notifications-dropdown">
          <a href="#"
             id="notifications-dropdown"
             class="dropdown-toggle"
             title="<%= t('nav.label.notifications') %>"
             data-toggle="dropdown"
             role="button"
             aria-haspopup="true"
             aria-expanded="false"
             data-href="<%= recent_notifications_url(current_user) %>">
            <i class="fas fa-bell"></i>
            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.notifications') %></span>
            <span id="count-notifications"
                  data-href="<%= unseen_notification_url(current_user) %>">
            </span>
          </a>
          <ul class="dropdown-menu dropdown-notifications system-notifications">
            <li class="notifications-dropdown-header">
              <span><%= t('notifications.title') %></span>
              <span class="pull-right">
                <%= link_to t('nav.user.settings'), preferences_path %>
              </span>
            </li>
            <li class="notifications-no-recent">
              <em><%= t('notifications.no_recent') %></em>
            </li>
            <li class="notifications-dropdown-footer">
              <%= link_to t('notifications.show_all'), notifications_path %>
            </li>
          </ul>
        </li>

        <!-- greetings -->
        <li id="user-account-dropdown" class="dropdown">
          <a href="#"
             class="dropdown-toggle"
             title="<%= t('nav.label.account') %>"
             data-toggle="dropdown"
             role="button"
             aria-haspopup="true"
             aria-expanded="false">
            <span>
              <%= t('nav.user_greeting', full_name: current_user.full_name) %>
            </span>
            <span class='global-avatar-container'>
              <%= image_tag avatar_path(current_user, :icon_small),
                          class: "avatar" %>
            </span>
          </a>
          <ul class="dropdown-menu" data-hook="navigation-user-menu">
            <li data-hook="navigation-user-menu-logout">
              <%= link_to t('nav.user.logout'),
                          destroy_user_session_path,
                          method: :delete %>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <% end %>
  </div>
</nav>
<div id="loading-animation"></div>

<%= javascript_include_tag("system_notifications/index") %>
<%= javascript_include_tag("navigation") %>