+<%= javascript_tag "$('#main.collapsiblesidebar').collapsibleSidebar();" if sidebar_content? %>
+ <% if sidebar_content? %>
+
Index: public/javascripts/application.js
===================================================================
--- public/javascripts/application.js (revision 18474)
+++ public/javascripts/application.js (working copy)
@@ -1051,6 +1051,76 @@
tribute.attach(element);
}
+// collapsible sidebar jQuery plugin
+(function($) {
+ // main container this is applied to
+ var main;
+ // triggers show/hide
+ var button;
+ // the key to use in local storage
+ // this will later be expanded using the current controller and action to
+ // allow for different sidebar states for different pages
+ var localStorageKey = 'redmine-sidebar-state';
+ // true if local storage is available
+ var canUseLocalStorage = function(){
+ try {
+ if('localStorage' in window){
+ localStorage.setItem('redmine.test.storage', 'ok');
+ var item = localStorage.getItem('redmine.test.storage');
+ localStorage.removeItem('redmine.test.storage');
+ if(item === 'ok') return true;
+ }
+ } catch (err) {}
+ return false;
+ }();
+ // function to set current sidebar state
+ var setState = function(state){
+ if(canUseLocalStorage){
+ localStorage.setItem(localStorageKey, state);
+ }
+ };
+ var applyState = function(){
+ if(main.hasClass('collapsedsidebar')){
+ button.html("«");
+ setState('hidden');
+ } else {
+ button.html("»");
+ setState('visible');
+ }
+ };
+ var setupToggleButton = function(){
+ button = $('#sidebar-switch-button');
+ button.click(function(e){
+ main.addClass("animate");
+ main.toggleClass('collapsedsidebar');
+ applyState();
+ e.preventDefault();
+ return false;
+ });
+ applyState();
+ };
+ $.fn.collapsibleSidebar = function() {
+ main = this;
+ // determine previously stored sidebar state for this page
+ if(canUseLocalStorage) {
+ // determine current controller/action pair and use them as storage key
+ var bodyClass = $('body').attr('class');
+ if(bodyClass){
+ try {
+ localStorageKey += '-' + bodyClass.split(/\s+/).filter(function(s){
+ return s.match(/(action|controller)-.*/);
+ }).sort().join('-');
+ } catch(e) {
+ // in case of error (probably IE8), continue with the unmodified key
+ }
+ }
+ var storedState = localStorage.getItem(localStorageKey);
+ main.toggleClass('collapsedsidebar', storedState === 'hidden');
+ }
+ // draw the toggle button once the DOM is complete
+ $(document).ready(setupToggleButton);
+ };
+}(jQuery));
$(document).ready(setupAjaxIndicator);
$(document).ready(hideOnLoad);
Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css Mon Apr 26 18:50:08 2021
+++ public/stylesheets/application.css Mon Mar 21 22:01:41 2022
@@ -93,0 +94 @@ div#wrapper, div#wrapper2, div#wrapper3 { min-heig
+#main.nosidebar #sidebar {display: none;}
@@ -95 +96 @@ div#wrapper, div#wrapper2, div#wrapper3 { min-heig
-#sidebar{ flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: #EEEEEE; border-left: 1px solid #ddd}
+#sidebar{ flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: #EEEEEE; border-left: 1px solid #ddd; z-index: 1;}
@@ -102 +103,2 @@ div#wrapper, div#wrapper2, div#wrapper3 { min-heig
-#sidebar h3{ font-size: 14px; margin-top:14px; color: #666; }
+#sidebar h3 { font-size: 14px; margin-top:14px; color: #666; }
+#sidebar h3:first-of-type { margin-top: 4px ; }
@@ -119 +121,3 @@ html>body #content { min-height: 600px; }
-#main.nosidebar #sidebar{ display: none; }
+#main.collapsedsidebar #sidebar { display: block; width: 0px !important; position: absolute; box-sizing: border-box; height: 100%; overflow: hidden; transition: 0.35s; }
+#main.collapsedsidebar #sidebar:hover { width: 22% !important; }
+#main:not(.collapsedsidebar) #content { margin-right: 0; }
@@ -120,0 +125,43 @@ html>body #content { min-height: 600px; }
+#main.collapsedsidebar #sidebar > :not(#sidebar-switch-panel) {
+ visibility: hidden;
+}
+
+#main.collapsedsidebar #sidebar:hover > :not(#sidebar-switch-panel) {
+ visibility: visible;
+}
+
+body div#content {
+ margin-right: 30px;
+}
+
+body #main {
+ position: relative;
+}
+
+#sidebar-switch-panel {
+ position: relative;
+ left: 6px;
+ font-size: 20px;
+ width: 100% !important;
+ color: #666;
+ display: block;
+ margin-left: -21px;
+ padding-right: 21px;
+ border-bottom: 1px solid #ddd;
+ padding-left: 4px;
+}
+
+#sidebar-switch-panel:hover {
+ background-color: #e6e6e6;
+}
+
+#sidebar-switch-button {
+ color: #666;
+ width: 100% !important;
+ display: block;
+}
+
+#sidebar-switch-button:hover {
+ text-decoration: none;
+}
+
+ »
+
+ <%= javascript_tag "$('#sidebar-switch-panel').css('visibility', 'visible');" %>
+ <% end %>
<%= yield :sidebar %>
<%= view_layouts_base_sidebar_hook_response %>