diff --git a/cypress/integration/sidebar.spec.js b/cypress/integration/sidebar.spec.js
--- a/cypress/integration/sidebar.spec.js
+++ b/cypress/integration/sidebar.spec.js
@@ -36,16 +36,14 @@
     let collapseWidth;
     cy.get('.swh-push-menu')
       .click()
-      .get('.swh-sidebar')
-      .wait(250)
+      .get('.swh-sidebar-collapsed')
       .invoke('width')
       .then((width) => {
         collapseWidth = width;
       })
       .get('.swh-push-menu')
       .click()
-      .get('.swh-sidebar')
-      .wait(250)
+      .get('.swh-sidebar-expanded')
       .invoke('width')
       .then(openWidth => {
         assert.isBelow(collapseWidth, openWidth);
diff --git a/swh/web/assets/src/bundles/webapp/webapp-utils.js b/swh/web/assets/src/bundles/webapp/webapp-utils.js
--- a/swh/web/assets/src/bundles/webapp/webapp-utils.js
+++ b/swh/web/assets/src/bundles/webapp/webapp-utils.js
@@ -10,9 +10,9 @@
 import {BREAKPOINT_MD} from 'utils/constants';
 
 let collapseSidebar = false;
-let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed');
+let previousSidebarState = localStorage.getItem('remember.lte.pushmenu');
 if (previousSidebarState !== undefined) {
-  collapseSidebar = JSON.parse(previousSidebarState);
+  collapseSidebar = previousSidebarState === 'sidebar-collapse';
 }
 
 $(document).on('DOMContentLoaded', () => {
@@ -64,6 +64,36 @@
     }
   });
 
+  const mainSideBar = $('.main-sidebar');
+
+  function updateSidebarState() {
+    const body = $('body');
+    if (body.hasClass('sidebar-collapse') &&
+        !mainSideBar.hasClass('swh-sidebar-collapsed')) {
+      mainSideBar.removeClass('swh-sidebar-expanded');
+      mainSideBar.addClass('swh-sidebar-collapsed');
+      $('.swh-words-logo-swh').css('visibility', 'visible');
+    } else if (!body.hasClass('sidebar-collapse') &&
+               !mainSideBar.hasClass('swh-sidebar-expanded')) {
+      mainSideBar.removeClass('swh-sidebar-collapsed');
+      mainSideBar.addClass('swh-sidebar-expanded');
+      $('.swh-words-logo-swh').css('visibility', 'hidden');
+    }
+    // ensure correct sidebar state when loading a page
+    if (body.hasClass('hold-transition')) {
+      setTimeout(() => {
+        updateSidebarState();
+      });
+    }
+  }
+
+  // set sidebar state after collapse / expand animation
+  mainSideBar.on('transitionend', evt => {
+    updateSidebarState();
+  });
+
+  updateSidebarState();
+
   // ensure footer do not overflow main content for mobile devices
   // or after resizing the browser window
   ensureNoFooterOverflow();
@@ -145,9 +175,6 @@
 
     // triggered when unloading the current page
     $(window).on('unload', () => {
-      // backup sidebar state (collapsed/expanded)
-      let sidebarCollapsed = $('body').hasClass('sidebar-collapse');
-      localStorage.setItem('swh-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
       // backup current browse page
       if (page === 'browse') {
         sessionStorage.setItem('last-browse-page', window.location);
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -108,7 +108,9 @@
       </div>
       <nav class="main-header navbar navbar-expand-lg navbar-light navbar-static-top" id="swh-navbar">
         <div class="navbar-header">
-          <a class="nav-link swh-push-menu" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
+          <a class="nav-link swh-push-menu" data-widget="pushmenu" data-enable-remember="true" href="#">
+            <i class="fa fa-bars"></i>
+          </a>
         </div>
         <div class="navbar" style="width: 94%;">
           <div class="swh-navbar-content">