Merge pull request #5175 from aignatov-bio/ai-sci-8055-update-left-top-navigation

Refactor left/top navigation [SCI-8055]

app/assets/stylesheets/navigation/general.scss

@@ -27,7 +27,7 @@
     height: var(--top-navigation);
     position: fixed;
     width: 100vw;
-    z-index: 600;
+    z-index: 610;
   }
 
   .sci--layout-navigation-left {
@@ -65,5 +65,6 @@
   .sci--layout-content {
     grid-area: content;
     padding: 0 1em;
+    width: calc(100vw - var(--left-navigation) - var(--navigator-navigation));
   }
 }

app/assets/stylesheets/navigation/left_menu.scss

@@ -0,0 +1,37 @@
+// scss-lint:disable SelectorDepth unknownProperties
+// scss-lint:disable NestingDepth SelectorFormat
+
+.sci--layout--left-menu-container {
+  background-color: $color-white;
+  box-shadow: $flyout-shadow;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1em 0;
+  width: 100%;
+
+  .sci--layout--menu-item {
+    align-items: center;
+    color: $color-black;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: 60px;
+    justify-content: center;
+    text-decoration: none;
+    width: 100%;
+
+    &[data-active='true'] {
+      background-color: $color-gainsboro;
+      box-shadow: inset 4px 0 0 $brand-primary;
+    }
+
+    &[data-disabled='true'] {
+      background-color: initial;
+      box-shadow: none;
+      cursor: not-allowed;
+      opacity: .65;
+      pointer-events: none;
+    }
+  }
+}

app/assets/stylesheets/navigation/top_menu.scss

@@ -0,0 +1,64 @@
+// scss-lint:disable SelectorDepth unknownProperties IdSelector
+// scss-lint:disable NestingDepth SelectorFormat
+
+#sciNavigationTopMenuContainer {
+  display: contents;
+}
+
+.sci--navigation--top-menu-container {
+  align-items: center;
+  background-color: $color-white;
+  box-shadow: $flyout-shadow;
+  display: flex;
+  gap: .5em;
+  height: 100%;
+  padding: 0 2em;
+
+  .sci--navigation--top-menu-logo {
+    a {
+      display: inline-block;
+    }
+
+    .logo {
+      max-height: 22px;
+
+      &.small {
+        display: none;
+      }
+    }
+  }
+
+  .sci--navigation--top-menu-teams {
+    height: 36px;
+    margin-left: 2em;
+    width: 220px;
+  }
+
+  .sci--navigation--top-menu-search {
+    margin-left: auto;
+    margin-right: 1em;
+    width: 240px;
+  }
+
+  .sci--navigation--top-menu-user {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: 1em;
+    margin-left: .75em;
+  }
+
+  @media(max-width: 1200px) {
+    .sci--navigation--top-menu-logo {
+      .logo {
+        &.large {
+          display: none;
+        }
+
+        &.small {
+          display: initial;
+        }
+      }
+    }
+  }
+}

app/controllers/navigations_controller.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+class NavigationsController < ApplicationController
+  include ApplicationHelper
+
+  HELP_MENU_LINKS = [
+    { name: I18n.t('left_menu_bar.support_links.support'), url: Constants::SUPPORT_URL },
+    { name: I18n.t('left_menu_bar.support_links.tutorials'), url: Constants::TUTORIALS_URL },
+    { name: I18n.t('left_menu_bar.academy'), url: Constants::ACADEMY_BL_LINK }
+  ]
+
+  SETTINGS_MENU_LINKS = [
+    {
+      name: I18n.t('users.settings.sidebar.teams'),
+      url: Rails.application.routes.url_helpers.teams_path
+    }, {
+      name: I18n.t('users.settings.sidebar.account_nav.addons'),
+      url: Rails.application.routes.url_helpers.addons_path
+    }, {
+      name: I18n.t('users.settings.sidebar.webhooks'),
+      url: Rails.application.routes.url_helpers.users_settings_webhooks_path
+    }
+  ]
+
+  USER_MENU_LINKS = [
+    {
+      name: I18n.t('users.settings.sidebar.account_nav.profile'),
+      url: Rails.application.routes.url_helpers.edit_user_registration_path
+    }, {
+      name: I18n.t('users.settings.sidebar.account_nav.preferences'),
+      url: Rails.application.routes.url_helpers.preferences_path
+    }, {
+      name: I18n.t('users.settings.sidebar.account_nav.connected_accounts'),
+      url: Rails.application.routes.url_helpers.connected_accounts_path
+    }
+  ]
+
+  def top_menu
+    render json:  {
+      root_url: root_path,
+      logo: logo,
+      current_team: current_team&.id,
+      search_url: search_path,
+      teams: teams,
+      settings: [],
+      help_menu: NavigationsController::HELP_MENU_LINKS,
+      settings_menu: NavigationsController::SETTINGS_MENU_LINKS,
+      user_menu: NavigationsController::USER_MENU_LINKS,
+      user: user
+    }
+  end
+
+  private
+
+  def logo
+    {
+      large_url: image_path('/images/scinote_icon.svg'),
+      small_url: image_path('/images/sn-icon.svg')
+    }
+  end
+
+  def teams
+    current_user.teams.order(:name).map do |t|
+      {
+        label: escape_input(t.name),
+        value: t.id,
+        params: { switch_url: switch_users_settings_team_path(t) }
+      }
+    end
+  end
+
+  def user
+    {
+      name: escape_input(current_user.full_name),
+      avatar_url: avatar_path(current_user, :icon_small),
+      sign_out_url: destroy_user_session_path
+    }
+  end
+end

app/controllers/users/settings/teams_controller.rb

@@ -131,6 +131,18 @@ module Users
         redirect_to action: :index
       end
 
+      def switch
+        team = current_user.teams.find_by(id: params[:id])
+
+        if team && current_user.update(current_team_id: team.id)
+          flash[:success] = t('users.settings.changed_team_flash',
+                              team: current_user.current_team.name)
+          render json: { current_team: team.id }
+        else
+          render json: { message: t('users.settings.changed_team_error_flash') }, status: :unprocessable_entity
+        end
+      end
+
       private
 
       def check_create_team_permission

app/controllers/users/settings_controller.rb

@@ -1,29 +0,0 @@
-module Users
-  class SettingsController < ApplicationController
-    before_action :load_user, only: [
-      :user_current_team
-    ]
-
-    def user_current_team
-      team_id = params[:user][:current_team_id].to_i
-      if @user.teams_ids.include?(team_id)
-        @user.current_team_id = team_id
-        @changed_team = Team.find_by_id(@user.current_team_id)
-        if @user.save
-          flash[:success] = t('users.settings.changed_team_flash',
-                              team: @changed_team.name)
-          redirect_to root_path
-          return
-        end
-      end
-      flash[:alert] = t('users.settings.changed_team_error_flash')
-      redirect_back(fallback_location: root_path)
-    end
-
-    private
-
-    def load_user
-      @user = current_user
-    end
-  end
-end

app/helpers/left_menu_bar_helper.rb

@@ -1,4 +1,41 @@
+# frozen_string_literal: true
+
 module LeftMenuBarHelper
+  def left_menu_elements
+    [
+      {
+        url: dashboard_path,
+        name: t('left_menu_bar.dashboard'),
+        icon: 'fa-thumbtack',
+        active: dashboard_are_selected?
+      }, {
+        url: projects_path,
+        name: t('left_menu_bar.projects'),
+        icon: 'fa-folder',
+        active: projects_are_selected?
+      }, {
+        url: repositories_path,
+        name: t('left_menu_bar.repositories'),
+        icon: 'fa-list-alt',
+        active: repositories_are_selected?
+      }, {
+        url: protocols_path,
+        name: t('left_menu_bar.templates'),
+        icon: 'fa-edit',
+        active: templates_are_selected?
+      }, {
+        url: reports_path,
+        name: t('left_menu_bar.reports'),
+        icon: 'fa-clipboard-check',
+        active: reports_are_selected?
+      }, {
+        url: global_activities_path,
+        name: t('left_menu_bar.activities'),
+        icon: 'fa-list',
+        active: activities_are_selected?
+      }
+    ]
+  end
 
   def dashboard_are_selected?
     controller_name == 'dashboards'

app/javascript/packs/vue/navigation/top_menu.js

@@ -0,0 +1,14 @@
+
+import Vue from 'vue/dist/vue.esm';
+import TopMenuContainer from '../../../vue/navigation/top_menu.vue';
+
+Vue.prototype.i18n = window.I18n;
+
+window.addEventListener('DOMContentLoaded', () => {
+  new Vue({
+    el: '#sciNavigationTopMenuContainer',
+    components: {
+      'top-menu-container': TopMenuContainer
+    }
+  });
+});

app/javascript/vue/navigation/top_menu.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="sci--navigation--top-menu-container">
+    <div class="sci--navigation--top-menu-logo">
+      <a v-if="rootUrl && logo" :title="i18n.t('nav.label.scinote')" :href="rootUrl">
+        <img class="logo small" :src="logo.small_url">
+        <img class="logo large" :src="logo.large_url">
+      </a>
+    </div>
+    <div v-if="teams" class="sci--navigation--top-menu-teams">
+      <DropdownSelector
+        :selectedValue="current_team"
+        :options="teams"
+        :disableSearch="true"
+        :selectorId="`sciNavigationTeamSelector`"
+        @dropdown:changed="switchTeam"
+      />
+    </div>
+    <div v-if="user" class="sci--navigation--top-menu-search left-icon sci-input-container">
+      <input type="text" class="sci-input-field" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
+      <i class="fas fa-search"></i>
+    </div>
+    <div v-if="user" class="dropdown">
+      <button class="btn btn-light icon-btn" data-toggle="dropdown">
+        <i class="fas fa-question-circle"></i>
+      </button>
+      <ul v-if="user" class="dropdown-menu dropdown-menu-right">
+        <li v-for="(item, i) in helpMenu">
+          <a :key="i" :href="item.url">
+            {{ item.name }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div v-if="user" class="dropdown">
+      <button class="btn btn-light icon-btn" data-toggle="dropdown">
+        <i class="fas fa-cog"></i>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li v-for="(item, i) in settingsMenu">
+          <a :key="i" :href="item.url">
+            {{ item.name }}
+          </a>
+        </li>
+        <li>
+          <a href="" data-toggle='modal' data-target='#aboutModal' >
+          {{ i18n.t('left_menu_bar.support_links.core_version') }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <button v-if="user" class="btn btn-light icon-btn" data-toggle="dropdown">
+      <i class="fas fa-bell"></i>
+    </button>
+    <div v-if="user" class="dropdown">
+      <div class="sci--navigation--top-menu-user" data-toggle="dropdown">
+        {{ i18n.t('nav.user_greeting', { full_name: user.name })}}
+        <img class="avatar" :src="user.avatar_url">
+      </div>
+      <div class="dropdown-menu dropdown-menu-right">
+        <li v-for="(item, i) in userMenu">
+          <a :key="i" :href="item.url">
+            {{ item.name }}
+          </a>
+        </li>
+        <li>
+          <a rel="nofollow" data-method="delete" :href="user.sign_out_url">
+            {{ i18n.t('nav.user.logout') }}
+          </a>
+        </li>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+
+  export default {
+    name: 'TopMenuContainer',
+    components: {
+      DropdownSelector
+    },
+    props: {
+      url: String
+    },
+    data() {
+      return {
+        rootUrl: null,
+        logo: null,
+        current_team: null,
+        teams: null,
+        searchUrl: null,
+        user: null,
+        helpMenu: null,
+        settingsMenu: null,
+        userMenu: null,
+        showAboutModal: false,
+      }
+    },
+    created() {
+      $.get(this.url, (result) => {
+        this.rootUrl = result.root_url;
+        this.logo = result.logo;
+        this.current_team = result.current_team;
+        this.teams = result.teams;
+        this.searchUrl = result.search_url;
+        this.helpMenu = result.help_menu;
+        this.settingsMenu = result.settings_menu;
+        this.userMenu = result.user_menu;
+        this.user = result.user;
+      })
+    },
+    methods: {
+      switchTeam(team) {
+        if (this.current_team == team) return;
+
+        $.post(this.teams.find(e => e.value == team).params.switch_url, (result) => {
+          this.current_team = result.current_team
+          dropdownSelector.selectValues('#sciNavigationTeamSelector', this.current_team);
+          window.open(this.rootUrl, '_self')
+        }).error((msg) => {
+          HelperModule.flashAlertMsg(msg.responseJSON.message, 'danger');
+        });
+      },
+       searchValue(e) {
+        window.open(`${this.searchUrl}?q=${e.target.value}`, '_self')
+      }
+    }
+  }
+</script>

app/views/layouts/application.html.erb

@@ -17,6 +17,7 @@
     <%= javascript_pack_tag 'application' %>
     <%= javascript_include_tag 'session_end' %>
 
+
     <% if MarvinJsService.enabled? && ENV['MARVINJS_API_KEY'] %>
       <script src="https://marvinjs.chemicalize.com/v1/<%= ENV['MARVINJS_API_KEY'] %>/client-settings.js"></script>
       <script src="https://marvinjs.chemicalize.com/v1/client.js"></script>
@@ -38,6 +39,7 @@
 
     <%= javascript_pack_tag 'tui_image_editor' %>
     <%= stylesheet_pack_tag 'tui_image_editor_styles' %>
+    <%= javascript_pack_tag 'vue/navigation/top_menu' %>
   </head>
   <body
     class="<%= yield :body_class %>"
@@ -57,7 +59,7 @@
 
 
     <div class="sci--layout" data-breadcrumbs-collapsed="true" data-navigator-collapsed="<%= !content_for?(:sidebar_title) %>">
-      <div class="sci--layout-navigation-top">
+      <div class="sci--layout-navigation-top" >
         <%= render "shared/navigation/top" %>
       </div>
       <div class="sci--layout-navigation-left">

app/views/shared/navigation/_left.html.erb

@@ -1,130 +1,10 @@
-<div id="left-menu-bar" class="menu-bar">
-  <div class="scroll-wrapper">
-    <ul class="nav">
-      <% if current_user.teams.blank? %>
-      <li class="disabled">
-          <span>
-            <span class="fas fa-thumbtack"></span>
-            <span><%= t('left_menu_bar.dashboard') %></span>
-          </span>
-        </li>
-        <li class="disabled">
-          <span>
-            <span class="fas fa-folder"></span>
-            <span><%= t('left_menu_bar.projects') %></span>
-          </span>
-        </li>
-        <li class="disabled">
-          <span>
-            <span class="fas fa-list-alt" aria-hidden="true"></span>
-            <span><%= t('left_menu_bar.repositories') %></span>
-          </span>
-        </li>
-        <li class="disabled">
-          <span>
-            <span class="fas fa-edit"></span>
-            <span><%= t('left_menu_bar.templates') %></span>
-          </span>
-        </li>
-        <li class="disabled">
-          <span>
-            <span class="fas fa-clipboard-check"></span>
-            <span><%= t('left_menu_bar.reports') %></span>
-          </span>
-        </li>
-      <% else %>
-        <li class="<%= "active" if dashboard_are_selected? %>">
-          <%= link_to dashboard_path, id: "dashboard-link", title: t('left_menu_bar.dashboard') do %>
-            <span class="fas fa-thumbtack"></span>
-            <span><%= t('left_menu_bar.dashboard') %></span>
-          <% end %>
-        </li>
-        <li class="<%= "active" if projects_are_selected? %>">
-          <%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %>
-            <span class="fas fa-folder"></span>
-            <span><%= t('left_menu_bar.projects') %></span>
-          <% end %>
-        </li>
-        <li class="<%= "active" if repositories_are_selected? %>">
-          <%= link_to repositories_path, id: "repositories-link", title: t('left_menu_bar.repositories') do %>
-            <span class="fas fa-list-alt" aria-hidden="true"></span>
-            <span><%= t('left_menu_bar.repositories') %></span>
-          <% end %>
-        </li>
-        <li class="<%= "active" if templates_are_selected? %>">
-          <%= link_to protocols_path, id: "templates-link", title: t('left_menu_bar.templates') do %>
-            <span class="fas fa-edit"></span>
-            <span><%= t('left_menu_bar.templates') %></span>
-          <% end %>
-        </li>
-        <li class="<%= "active" if reports_are_selected? %>">
-          <%= link_to reports_path, id: "reports-link", title: t('left_menu_bar.reports') do %>
-            <span class="fas fa-clipboard-check"></span>
-            <span><%= t('left_menu_bar.reports') %></span>
-          <% end %>
-        </li>
-      <% end %>
-    </ul>
-    <ul class="nav nav-bottom">
-      <li class="<%= "active" if activities_are_selected? %>">
-        <%= link_to global_activities_path, id: "activities-link", title: t('left_menu_bar.activities') do %>
-          <span class="fas fa-list"></span>
-          <span><%= t('left_menu_bar.activities') %></span>
-        <% end %>
-      </li>
-      <!-- settings -->
-      <li class="<%= "active" if settings_are_selected? %>">
-        <%= link_to edit_user_registration_path, id: "settings-link", title: t('left_menu_bar.settings') do %>
-          <span class="fas fa-cog"></span>
-          <span><%= t('left_menu_bar.settings') %></span>
-        <% end %>
-      </li>
-      <!-- support -->
-      <li class="dropup">
-        <a href="#"
-          id="support-link"
-          class="dropdown-toggle"
-          title="<%= t('left_menu_bar.support') %>"
-          data-toggle="dropdown"
-          role="button"
-          aria-haspopup="true"
-          aria-expanded="false">
-          <span class="fas fa-question-circle"></span>
-          <span><%= t('left_menu_bar.support') %></span>
-        </a>
-        <ul class="dropdown-menu" data-hook="support-dropdown">
-          <li>
-            <%= link_to  Constants::SUPPORT_URL, target: "_blank", id: "knowledge-center-link" do %>
-             <i class="fas fa-question-circle"></i>
-              <%= t('left_menu_bar.support_links.support') %>
-            <% end %>
-          </li>
-          <li><%= link_to t('left_menu_bar.support_links.tutorials'),
-                            Constants::TUTORIALS_URL,
-                            target: "_blank" %></li>
-          <li role="separator" class="divider" data-hook="support-dropdown-separator">
-          <li>
-            <%= link_to '#', class: "about-scinote", data: { toggle: 'modal', target: '#aboutModal' } do %>
-              <span class="core-version"><%= t('left_menu_bar.support_links.core_version', version: Scinote::Application::VERSION ) %></span>
-              <%= t('left_menu_bar.support_links.about') %>
-            <% end %>
-          </li>
-        </ul>
-      </li>
-      <!-- academy -->
-      <li>
-        <%= link_to Constants::ACADEMY_BL_LINK,
-          id: "academy-link",
-          class: "academy-color",
-          title: I18n.t('nav.academy_tooltip'),
-          target: :_blank do
-        %>
-          <span class="fas fa-graduation-cap"></span>
-          <span><%= t('left_menu_bar.academy') %></span>
-        <% end %>
-      </li>
-    </ul>
-  </div>
+<div class="sci--layout--left-menu-container">
+  <% left_menu_elements.each do |item| %>
+    <%= link_to item[:url], title: item[:name], class:"sci--layout--menu-item", data: { active: item[:active], disabled: current_user.teams.blank? } do %>
+      <i class="fas <%= item[:icon] %>"></i>
+      <%= item[:name] %>
+    <% end %>
+  <% end %>
 </div>
 
 <%= javascript_include_tag("sidebar_toggle") %>

app/views/shared/navigation/_top.html.erb

@@ -1,191 +1,3 @@
-    <!-- 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 id="loading-animation"></div>
-
-<%= javascript_include_tag("system_notifications/index") %>
-<%= javascript_include_tag("navigation") %>
+<div id="sciNavigationTopMenuContainer" data-turbolinks-permanent data-behaviour="vue">
+  <top-menu-container url="<%= top_menu_navigations_path %>"/>
+</div>

config/locales/en.yml

@@ -228,7 +228,7 @@ en:
     notice: "You need to enable JavaScript to run this app."
   nav:
     team_switch_title: "Switch team"
-    search: "Search for something..."
+    search: "Search"
     search_button: 'Go!'
     user_greeting: "Hi, %{full_name}"
     advanced_search: "Advanced search"
@@ -271,7 +271,7 @@ en:
     support_links:
       support: "Knowledge center"
       tutorials: "Video tutorials"
-      core_version: "SciNote Core ver. %{version} |"
+      core_version: "SciNote version"
       about: "about"
 
   sidebar:

config/routes.rb

@@ -19,6 +19,12 @@ Rails.application.routes.draw do
 
     root 'dashboards#show'
 
+    resources :navigations, only: [] do
+      collection do
+        get :top_menu
+      end
+    end
+
     resources :activities, only: [:index]
 
     get '/jobs/:id/status', to: 'active_jobs#status'
@@ -86,11 +92,6 @@ Rails.application.routes.draw do
          as: 'update_togglable_settings',
          defaults: { format: 'json' }
 
-    # Change user's current team
-    post 'users/settings/user_current_team',
-         to: 'users/settings#user_current_team',
-         as: 'user_current_team'
-
     get 'users/settings/teams',
         to: 'users/settings/teams#index',
         as: 'teams'
@@ -137,6 +138,11 @@ Rails.application.routes.draw do
 
     namespace :users do
       namespace :settings do
+        resources :teams, only: [] do
+          member do
+            post :switch
+          end
+        end
         resources :webhooks, only: %i(index create update destroy) do
           collection do
             post :destroy_filter