From 2fe55250b9a82bc36c19884e0324e85b279868a1 Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Tue, 5 Jan 2021 09:11:05 +0100
Subject: [PATCH] Update settings navigation [SCI-5316] (#3028)

---
 app/assets/stylesheets/partials/_sidebar.scss |   6 ++
 .../stylesheets/shared/content_pane.scss      |   2 +-
 app/views/users/settings/_sidebar.html.erb    | 101 ++++++------------
 config/locales/en.yml                         |   2 +
 4 files changed, 43 insertions(+), 68 deletions(-)

diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss
index 61f68e0de..27a428db6 100644
--- a/app/assets/stylesheets/partials/_sidebar.scss
+++ b/app/assets/stylesheets/partials/_sidebar.scss
@@ -101,6 +101,12 @@
     padding-left: 2.5em;
   }
 
+  .delimiter {
+    background: $color-alto;
+    height: 1px;
+    margin: .5em 2.5em .5em 0;
+  }
+
   .sidebar-leaf {
     align-items: center;
     display: flex;
diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss
index abc8d214e..c59bb0d79 100644
--- a/app/assets/stylesheets/shared/content_pane.scss
+++ b/app/assets/stylesheets/shared/content_pane.scss
@@ -5,7 +5,7 @@
 
   &.flexible {
     margin: 0;
-    padding: 0 .5em;
+    padding: 0 1em;
   }
 
   .content-header {
diff --git a/app/views/users/settings/_sidebar.html.erb b/app/views/users/settings/_sidebar.html.erb
index 0fff781f0..3f081d8e9 100644
--- a/app/views/users/settings/_sidebar.html.erb
+++ b/app/views/users/settings/_sidebar.html.erb
@@ -1,69 +1,36 @@
+<%= content_for :sidebar_title, t('sidebar.settings.sidebar_title') %>
 <%= content_for :sidebar do %>
- <div id="slide-panel" class="visible">
-   <div class="tree">
-     <ul id="settings" class="sidebar-root" data-hook="user-settings-navigation-html">
-       <!-- Account -->
-       <li class="parent_li branch" >
-         <span class="tree-link line-wrap no-indent">
-           <i title="<%= t('sidebar.branch_expand') %>"
-              class="fas fa-caret-right tree-toggle"
-              aria-hidden="true"
-           ></i>
-           <%= link_to t("users.settings.sidebar.account"),
-                       edit_user_registration_path,
-                       class: "line-wrap",
-                       style: (on_settings_account_page? ? 'font-weight: bold' : ''),
-                       data: { 'no-turbolink' => 'true' } %>
-         </span>
-
-         <ul class="tree-child hidden accountNavigation" data-active="<%= on_settings_account_page? %>" data-hook="user-settings-account-navigation-html">
-           <li class="leaf <%= 'active' if on_settings_account_profile_page? %>" >
-             <span class="tree-link first-indent">
-               <%= link_to t("users.settings.sidebar.account_nav.profile"),
-                             edit_user_registration_path,
-                             class: "line-wrap #{'disabled' if on_settings_account_profile_page?}",
-                             data: { 'no-turbolink' => 'true' } %>
-             </span>
-           </li>
-           <li class="leaf <%= 'active' if on_settings_account_preferences_page? %>" >
-             <span class="tree-link first-indent">
-               <%= link_to t("users.settings.sidebar.account_nav.preferences"),
-                             preferences_path,
-                             class: "line-wrap #{'disabled' if on_settings_account_preferences_page?}",
-                             data: { 'no-turbolink' => 'true' } %>
-             </span>
-           </li>
-           <li class="leaf <%= 'active' if on_settings_account_addons_page? %>" >
-             <span class="tree-link first-indent">
-               <%= link_to t("users.settings.sidebar.account_nav.addons"),
-                             addons_path,
-                             class: "line-wrap #{'disabled' if on_settings_account_addons_page?}",
-                             data: { 'no-turbolink' => 'true' } %>
-             </span>
-           </li>
-           <!-- Connected accounts -->
-           <li class="leaf <%= 'active' if on_settings_account_connected_accounts_page? %>" >
-             <span class="tree-link first-indent">
-               <%= link_to t("users.settings.sidebar.account_nav.connected_accounts"),
-                             connected_accounts_path,
-                             class: "line-wrap #{'disabled' if on_settings_account_connected_accounts_page?}",
-                             data: { 'no-turbolink' => 'true' } %>
-             </span>
-           </li>
-         </ul>
-       </li>
-
-       <!-- Teams -->
-       <li class="branch <%= 'active' if on_settings_team_page? %>" >
-         <span class="tree-link no-indent">
-             <%= link_to t("users.settings.sidebar.teams"),
-                         teams_path,
-                         class: "line-wrap #{'all-teams-navigation-link' if on_settings_team_page?}",
-                         data: { 'no-turbolink' => 'true' } %>
-         </span>
-       </li>
-
-     </ul>
-   </div>
- </div>
+<ul class="sidebar-branch" data-hook="user-settings-navigation-html">
+  <li class="sidebar-leaf" >
+    <%= link_to t("users.settings.sidebar.account_nav.profile"),
+                edit_user_registration_path,
+                class: "sidebar-link #{'selected' if on_settings_account_profile_page?}"
+    %>
+  </li>
+  <li class="sidebar-leaf" >
+    <%= link_to t("users.settings.sidebar.account_nav.preferences"),
+                preferences_path,
+                class: "sidebar-link #{'selected' if on_settings_account_preferences_page?}"
+    %>
+  </li>
+  <li class="sidebar-leaf" >
+    <%= link_to t("users.settings.sidebar.account_nav.addons"),
+                addons_path,
+                class: "sidebar-link #{'selected' if on_settings_account_addons_page?}"
+    %>
+  </li>
+  <li class="sidebar-leaf" >
+    <%= link_to t("users.settings.sidebar.account_nav.connected_accounts"),
+                connected_accounts_path,
+                class: "sidebar-link #{'selected' if on_settings_account_connected_accounts_page?}"
+    %>
+  </li>
+  <li class="delimiter"></li>
+  <li class="sidebar-leaf" >
+    <%= link_to t("users.settings.sidebar.teams"),
+                teams_path,
+                class: "sidebar-link #{'selected' if on_settings_team_page?}"
+    %>
+  </li>
+</ul>
 <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index cc1fdb151..709d920a5 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -208,6 +208,8 @@ en:
     branch_expand: "Expand this branch"
     branch_collapse: "Collapse this branch"
     no_module_group: "No workflow"
+    settings:
+      sidebar_title: "SETTINGS"
     experiments:
       sidebar_title: "EXPERIMENTS"
       back_button: "Back to projects"