Add final version for left menu [SCI-8016]

app/assets/stylesheets/navigation/general.scss

@@ -1,6 +1,6 @@
 .sci--layout {
   --breadcrumbs-navigation: 56px;
-  --left-navigation: 83px;
+  --left-navigation: 180px;
   --navigator-navigation: 280px;
   --top-navigation: 52px;
   display: grid;

app/assets/stylesheets/navigation/left_menu.scss

@@ -15,12 +15,40 @@
     color: $color-black;
     cursor: pointer;
     display: flex;
-    flex-direction: column;
-    height: 60px;
-    justify-content: center;
+    gap: 1em;
+    height: 36px;
+    margin: .25em 0;
+    padding: 0 1em;
     text-decoration: none;
     width: 100%;
 
+    .fas {
+      display: inline-block;
+      width: 16px;
+    }
+
+    .show-submenu {
+      cursor: pointer;
+      display: none;
+      margin-left: auto;
+    }
+
+    .dot {
+      align-items: center;
+      display: flex;
+      height: 16px;
+      justify-content: center;
+      width: 16px;
+
+      &::after {
+        background-color: $color-black;
+        border-radius: 50%;
+        content: "";
+        height: 3px;
+        width: 3px;
+      }
+    }
+
     &[data-active='true'] {
       background-color: $color-gainsboro;
       box-shadow: inset 4px 0 0 $brand-primary;
@@ -33,5 +61,21 @@
       opacity: .65;
       pointer-events: none;
     }
+
+    &[data-submenu='true'] {
+      .show-submenu {
+        display: initial;
+      }
+    }
+  }
+
+  .sci--layout--menu-submenu {
+    height: 0;
+    overflow: hidden;
+    transition: .4s $timing-function-sharp;
+
+    &[data-collapsed=false] {
+      height: calc(var(--submenu-items) * (36px + .5em));
+    }
   }
 }

app/helpers/left_menu_bar_helper.rb

@@ -7,32 +7,46 @@ module LeftMenuBarHelper
         url: dashboard_path,
         name: t('left_menu_bar.dashboard'),
         icon: 'fa-thumbtack',
-        active: dashboard_are_selected?
+        active: dashboard_are_selected?,
+        submenu: []
       }, {
         url: projects_path,
         name: t('left_menu_bar.projects'),
         icon: 'fa-folder',
-        active: projects_are_selected?
+        active: projects_are_selected?,
+        submenu: []
       }, {
         url: repositories_path,
         name: t('left_menu_bar.repositories'),
         icon: 'fa-list-alt',
-        active: repositories_are_selected?
+        active: repositories_are_selected?,
+        submenu: []
       }, {
-        url: protocols_path,
+        url: nil,
         name: t('left_menu_bar.templates'),
         icon: 'fa-edit',
-        active: templates_are_selected?
+        active: protocols_are_selected? || label_templates_are_selected?,
+        submenu: [{
+          url: protocols_path,
+          name: t('left_menu_bar.protocol'),
+          active: protocols_are_selected?
+        }, {
+          url: label_templates_path,
+          name: t('left_menu_bar.label'),
+          active: label_templates_are_selected?
+        }]
       }, {
         url: reports_path,
         name: t('left_menu_bar.reports'),
         icon: 'fa-clipboard-check',
-        active: reports_are_selected?
+        active: reports_are_selected?,
+        submenu: []
       }, {
         url: global_activities_path,
         name: t('left_menu_bar.activities'),
         icon: 'fa-list',
-        active: activities_are_selected?
+        active: activities_are_selected?,
+        submenu: []
       }
     ]
   end
@@ -49,10 +63,12 @@ module LeftMenuBarHelper
     controller_name == 'repositories'
   end
 
-  def templates_are_selected?
-    # TODO
-    controller_name == 'protocols' ||
-      controller_name == 'label_templates'
+  def protocols_are_selected?
+    controller_name == 'protocols'
+  end
+
+  def label_templates_are_selected?
+    controller_name == 'label_templates'
   end
 
   def reports_are_selected?

app/javascript/packs/application.js

@@ -1,2 +1,16 @@
 window.bwipjs = require('bwip-js');
 window.Decimal = require('decimal.js');
+
+$(document).on('click', '.sci--layout--menu-item[data-submenu=true]', (e) => {
+  const item = $(e.currentTarget);
+  const caret = item.find('.show-submenu');
+  const submenu = item.next();
+  e.preventDefault();
+  if (submenu.attr('data-collapsed') === 'true') {
+    caret.removeClass('fa-caret-up').addClass('fa-caret-down');
+    submenu.attr('data-collapsed', false);
+  } else {
+    caret.removeClass('fa-caret-down').addClass('fa-caret-up');
+    submenu.attr('data-collapsed', true);
+  }
+});

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

@@ -1,8 +1,19 @@
 <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 %>
+  <% left_menu_elements.each_with_index do |item, index| %>
+    <%= link_to item[:url], title: item[:name], class:"sci--layout--menu-item", data: { active: item[:submenu].blank? && item[:active], disabled: current_user.teams.blank?, submenu: item[:submenu].any? } do %>
       <i class="fas <%= item[:icon] %>"></i>
       <%= item[:name] %>
+      <i class="fas <%= item[:active] ? 'fa-caret-down' : 'fa-caret-up' %> show-submenu"></i>
+    <% end %>
+    <% if item[:submenu].any? %>
+    <div class="sci--layout--menu-submenu" data-id="<%= index %>" data-collapsed="<%= !item[:active] %>" style="--submenu-items:<%= item[:submenu].length %>">
+      <% item[:submenu].each do |subitem| %>
+        <%= link_to subitem[:url], title: subitem[:name], class:"sci--layout--menu-item", data: { active: subitem[:active], disabled: current_user.teams.blank? } do %>
+          <i class="dot"></i>
+          <%= subitem[:name] %>
+        <% end %>
+      <% end %>
+    </div>
     <% end %>
   <% end %>
 </div>

config/locales/en.yml

@@ -274,10 +274,12 @@ en:
     addon_versions: "Addon versions"
 
   left_menu_bar:
-    dashboard: "Overview"
+    dashboard: "Dashboard"
     projects: "Projects"
     repositories: "Inventories"
     templates: "Templates"
+    protocol: "Protocol"
+    label: "Label"
     reports: "Reports"
     settings: "Settings"
     activities: "Activities"