Merge pull request #5305 from aignatov-bio/ai-sci-8288-fix-navigation-sidebar

Fix navigation sidebar [SCI-8288]

app/assets/javascripts/sidebar_toggle.js

@@ -0,0 +1,49 @@
+var SideBarToggle = (function() {
+  var LAYOUT = ".sci--layout";
+  var WRAPPER = '#wrapper'
+  var SIDEBAR_CONTAINER = ".sidebar-container"
+
+
+  function show() {
+    $(LAYOUT).attr("data-navigator-collapsed", false);
+    $(SIDEBAR_CONTAINER).removeClass('collapsed');
+    $(WRAPPER).css('paddingLeft', 'var(--wrapper-width)');
+    $('.navbar-secondary').removeClass("navbar-without-sidebar");
+    $.post($(LAYOUT).data('navitgator-state-url'), {state: 'open'});
+    $(WRAPPER).trigger('sideBar::show');
+    $(WRAPPER).one("transitionend", function() {
+      $(WRAPPER).trigger('sideBar::shown');
+    })
+  }
+
+  function hide() {
+    $(LAYOUT).attr("data-navigator-collapsed", true);
+    $(SIDEBAR_CONTAINER).addClass('collapsed');
+    $(WRAPPER).css('paddingLeft', '0');
+    $('.navbar-secondary').addClass("navbar-without-sidebar");
+    $.post($(LAYOUT).data('navitgator-state-url'), {state: 'collapsed'});
+    $(WRAPPER).trigger('sideBar::hide');
+    $(WRAPPER).one("transitionend", function() {
+      $(WRAPPER).trigger('sideBar::hidden');
+    })
+  }
+
+  $(document).on('click', `.sidebar-container .close-sidebar`, function() {
+    hide();
+  }).on('click', `.sidebar-container .show-sidebar`, function() {
+    show();
+  }).on('turbolinks:load', function() {
+    if ($(LAYOUT).attr("data-navigator-collapsed") === "true") {
+      hide();
+    } else {
+      show();
+    }
+    $(WRAPPER).show();
+  })
+
+  return Object.freeze({
+    show: show,
+    hide: hide
+  })
+}());
+

app/assets/javascripts/sidebar_toggle.js.erb

@@ -1,76 +0,0 @@
-var SideBarToggle = (function() {
-  var STORAGE_TOGGLE_KEY = "scinote-sidebar-toggled";
-  var WRAPPER = '#wrapper'
-  var SIDEBAR_CONTAINER = ".sidebar-container"
-
-  if (!$("#sidebar-wrapper").length) {
-    var layout = document.querySelector(".sci--layout");
-    layout.setAttribute("data-navigator-collapsed", true);
-  }
-
-  function show() {
-    var layout = document.querySelector(".sci--layout");
-    if ($("#sidebar-wrapper").length) {
-      layout.setAttribute("data-navigator-collapsed", false);
-    } else {
-      layout.setAttribute("data-navigator-collapsed", true);
-    }
-    $(SIDEBAR_CONTAINER).removeClass('collapsed');
-    $(WRAPPER).css('paddingLeft', 'var(--wrapper-width)');
-    $('.navbar-secondary').removeClass("navbar-without-sidebar");
-    sessionStorage.setItem(STORAGE_TOGGLE_KEY, "un-toggled");
-    $(WRAPPER).trigger('sideBar::show');
-    $(WRAPPER).one("transitionend", function() {
-      $(WRAPPER).trigger('sideBar::shown');
-    })
-  }
-
-  function hide() {
-    var layout = document.querySelector(".sci--layout");
-    if ($("#sidebar-wrapper").length) {
-      layout.setAttribute("data-navigator-collapsed", true);
-    } else {
-      layout.setAttribute("data-navigator-collapsed", false);
-    }
-    $(SIDEBAR_CONTAINER).addClass('collapsed');
-    $(WRAPPER).css('paddingLeft', '0');
-    $('.navbar-secondary').addClass("navbar-without-sidebar");
-    sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
-    $(WRAPPER).trigger('sideBar::hide');
-    $(WRAPPER).one("transitionend", function() {
-      $(WRAPPER).trigger('sideBar::hidden');
-    })
-  }
-
-  function isToggledStorage() {
-    var val = sessionStorage.getItem(STORAGE_TOGGLE_KEY);
-    if (val === null) {
-      return null;
-    }
-    return val === "toggled";
-  }
-
-  function init() {
-    $(document).on('click', `${SIDEBAR_CONTAINER} .close-sidebar`, function() {
-      hide();
-    }).on('click', `${SIDEBAR_CONTAINER} .show-sidebar`, function() {
-      show();
-    }).on('turbolinks:load', function() {
-      if (isToggledStorage()) {
-        hide();
-      } else {
-        show();
-      }
-      $(WRAPPER).show();
-    })
-  }
-
-  return Object.freeze({
-    init: init,
-    show: show,
-    hide: hide,
-    isToggledStorage: isToggledStorage
-  })
-}());
-
-SideBarToggle.init();

app/assets/stylesheets/navigation/general.scss

@@ -10,8 +10,10 @@
   grid-template-columns: var(--left-navigation)
                          var(--navigator-navigation)
                          calc(100% - var(--left-navigation) - var(--navigator-navigation));
-  grid-template-rows: var(--top-navigation) var(--breadcrumbs-navigation) auto;
+  grid-template-rows: var(--top-navigation)
-  height: 100vh;
+                      var(--breadcrumbs-navigation)
+                      calc(100% - var(--top-navigation) - var(--breadcrumbs-navigation));
+  height: 100%;
   position: relative;
   transition: .4s $timing-function-sharp;
   width: 100%;
@@ -28,13 +30,13 @@
     grid-area: top;
     height: var(--top-navigation);
     position: fixed;
-    width: 100vw;
+    width: 100%;
     z-index: 610;
   }
 
   .sci--layout-navigation-left {
     grid-area: left;
-    height: calc(100vh - var(--top-navigation));
+    height: calc(100% - var(--top-navigation));
     left: 0;
     position: fixed;
     top: var(--top-navigation);
@@ -44,7 +46,7 @@
 
   .sci--layout-navigation-navigator {
     grid-area: navigator;
-    height: calc(100vh - var(--top-navigation) - var(--breadcrumbs-navigation));
+    height: calc(100% - var(--top-navigation) - var(--breadcrumbs-navigation));
     left: var(--left-navigation);
     position: fixed;
     top: calc(var(--top-navigation) + var(--breadcrumbs-navigation));
@@ -60,7 +62,7 @@
     position: fixed;
     top: var(--top-navigation);
     transition: .4s $timing-function-standard;
-    width: calc(100vw - var(--left-navigation));
+    width: calc(100% - var(--left-navigation));
     z-index: 600;
   }
 

app/assets/stylesheets/navigation/top_menu.scss

@@ -53,6 +53,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .avatar {
+      border-radius: 50%;
+    }
   }
 
   .dropdown-menu li a {

app/controllers/navigations_controller.rb

@@ -18,6 +18,10 @@ class NavigationsController < ApplicationController
     }
   end
 
+  def navigator_state
+    session[:navigator_collapsed] = params[:state] == 'collapsed'
+  end
+
   private
 
   def logo

app/controllers/user_notifications_controller.rb

@@ -8,7 +8,7 @@ class UserNotificationsController < ApplicationController
     respond_to do |format|
       format.json do
         render json: {
-          notifications: notifications,
+          notifications: notification_serializer(notifications),
           next_page: notifications.next_page
         }
       end
@@ -56,4 +56,17 @@ class UserNotificationsController < ApplicationController
       end
     notifications.order(created_at: :desc)
   end
+
+  def notification_serializer(notifications)
+    notifications.map do |notification|
+      {
+        id: notification.id,
+        type_of: notification.type_of,
+        title: notification.title,
+        message: notification.message,
+        created_at: I18n.l(notification.created_at, format: :full),
+        checked: notification.checked
+      }
+    end
+  end
 end

app/views/layouts/application.html.erb

@@ -16,6 +16,7 @@
     <%= javascript_include_tag 'application' %>
     <%= javascript_include_tag 'application_pack' %>
     <%= javascript_include_tag 'session_end' %>
+    <%= javascript_include_tag 'sidebar_toggle' %>
 
 
     <% if MarvinJsService.enabled? && ENV['MARVINJS_API_KEY'] %>
@@ -57,8 +58,11 @@
     <span style="display: none;" data-hook="body-js"></span>
     <span style="display: none;" data-hook="application-body-html"></span>
 
-
+    <div class="sci--layout"
-    <div class="sci--layout" data-breadcrumbs-collapsed="true" data-navigator-collapsed="<%= !content_for?(:sidebar_title) %>">
+         data-breadcrumbs-collapsed="true"
+         data-navigator-collapsed="<%= !content_for?(:sidebar_title) || session[:navigator_collapsed] %>"
+         data-navitgator-state-url="<%= navigator_state_navigations_path %>"
+    >
       <div class="sci--layout-navigation-top" >
         <%= render "shared/navigation/top" %>
       </div>

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

@@ -7,4 +7,4 @@
   <% end %>
 </div>
 
-<%= javascript_include_tag("sidebar_toggle") %>
+

config/routes.rb

@@ -24,6 +24,7 @@ Rails.application.routes.draw do
     resources :navigations, only: [] do
       collection do
         get :top_menu
+        post :navigator_state
       end
     end