diff --git a/src/_h5ai/client/js/inc/main.js b/src/_h5ai/client/js/inc/main.js
index 4546bd42..db04e9a6 100644
--- a/src/_h5ai/client/js/inc/main.js
+++ b/src/_h5ai/client/js/inc/main.js
@@ -2,6 +2,7 @@ modulejs.define('main', ['_', 'core/event'], function (_, event) {
 
     modulejs.require('view/ensure');
     modulejs.require('view/items');
+    modulejs.require('view/sidebar');
     modulejs.require('view/spacing');
     modulejs.require('view/viewmode');
 
diff --git a/src/_h5ai/client/js/inc/view/sidebar.js b/src/_h5ai/client/js/inc/view/sidebar.js
new file mode 100644
index 00000000..be9bf19f
--- /dev/null
+++ b/src/_h5ai/client/js/inc/view/sidebar.js
@@ -0,0 +1,55 @@
+modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function ($, resource, store) {
+
+    var storekey = 'sidebarIsVisible';
+    var toggleTemplate =
+            '<li id="sidebar-toggle" class="view">' +
+                '<a href="#">' +
+                    '<img src="' + resource.image('settings') + '" alt="settings"/>' +
+                '</a>' +
+            '</li>';
+
+
+    function update(toggle, animate) {
+
+        var $toggle = $('#sidebar-toggle');
+        var $sidebar = $('#sidebar');
+        var isVisible = store.get(storekey);
+
+        if (toggle) {
+            isVisible = !isVisible;
+            store.put(storekey, isVisible);
+        }
+
+        if (isVisible) {
+            $toggle.addClass('current');
+        } else {
+            $toggle.removeClass('current');
+        }
+
+        if (animate) {
+            $sidebar.stop().animate({
+                right: isVisible ? 0 : -$sidebar.outerWidth()-1
+            });
+        } else {
+            $sidebar.css({
+                right: store.get(storekey) ? 0 : -$sidebar.outerWidth()-1
+            });
+        }
+    }
+
+    function init() {
+
+        $(toggleTemplate)
+            .on('click', 'a', function (ev) {
+
+                update(true, true);
+                ev.preventDefault();
+            })
+            .appendTo('#navbar');
+
+        update(false, false);
+    }
+
+
+    init();
+});
diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js
index ffac0545..b33f6533 100644
--- a/src/_h5ai/client/js/inc/view/viewmode.js
+++ b/src/_h5ai/client/js/inc/view/viewmode.js
@@ -7,14 +7,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
             sizes: sizes
         }, allsettings.view);
     var storekey = 'viewmode';
-    var storekeyMenu = 'menuIsVisible';
-    var menuIsVisible = false;
-    var sidebarToggleTemplate =
-            '<li id="menu-toggle" class="view">' +
-                '<a href="#">' +
-                    '<img src="' + resource.image('settings') + '" alt="settings"/>' +
-                '</a>' +
-            '</li>';
     var modeTemplate =
             '<div id="view-[MODE]" class="view">' +
                 '<a href="#">' +
@@ -70,24 +62,10 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 
     function init() {
 
-        var $sidebar = $('#sidebar');
         var $settings = $('#settings');
         var $viewBlock = $('<div class="block"><h1 class="l10n-view">View</h1></div>');
         var max;
 
-        $(sidebarToggleTemplate)
-            .on('click', 'a', function (event) {
-
-                var menuIsVisible = store.get(storekeyMenu);
-                menuIsVisible = !menuIsVisible;
-                store.put(storekeyMenu, menuIsVisible);
-                $sidebar.stop().animate({
-                    right: menuIsVisible ? 0 : -$sidebar.outerWidth()-1
-                });
-                event.preventDefault();
-            })
-            .appendTo('#navbar');
-
         settings.modes = _.intersection(settings.modes, modes);
 
         if (settings.modes.length > 1) {
@@ -95,10 +73,10 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
                 if (_.contains(settings.modes, mode)) {
                     $(modeTemplate.replace(/\[MODE\]/g, mode))
                         .appendTo($viewBlock)
-                        .on('click', 'a', function (event) {
+                        .on('click', 'a', function (ev) {
 
                             update(mode);
-                            event.preventDefault();
+                            ev.preventDefault();
                         });
                 }
             });
@@ -108,9 +86,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
             max = settings.sizes.length-1;
             $(sizeTemplate)
                 .prop('max', max).attr('max', max)
-                .on('input change', function (event) {
+                .on('input change', function (ev) {
 
-                    update(null, settings.sizes[parseInt(event.target.value, 10)]);
+                    update(null, settings.sizes[parseInt(ev.target.value, 10)]);
                 })
                 .appendTo($viewBlock);
         }
@@ -119,10 +97,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
 
         update();
 
-        $sidebar.css({
-            right: store.get(storekeyMenu) ? 0 : -$sidebar.outerWidth()-1
-        });
-
         event.sub('location.changed', adjustSpacing);
         $(window).on('resize', adjustSpacing);
     }