Push Menu w/ localStorage

[Elli]

Push Menu w/ localStorage

Preview

This is a standard push menu (or sidebar) with the addition of HTML5 localStorage, which will store the state of the menu. When the user refreshes the page, closes the browser window or tab, or starts a new session, the menu will maintain its open or closed position.

Edit the HTML/CSS however you please, but make sure you preserve the positioning properties on .pm-menu-container, the properties on .pm-push-pixel and .pm-content-container, as well as the class names and IDs! It is not advisable that you edit the script unless you're sure of what you're doing.

NOTE: The menu will appear to "push" the content aside, but if your forum's wrapper width is a percentage, it will resize rather than being cut off. If the wrapper is a pixel width, and that value is larger than the remaining viewport space, it will be cut off one way or the other.
NOTE: Requires jQuery! If you're using ProBoards, jQuery is already installed for you.
NOTE: Fully commented script can be found on the CodePen link above.
NOTE: If the user's browser is set to delete cookies when a session is closed, the menu state will not be maintained -- localStorage items are deleted along with cookies.

1. Go to Admin > Themes > Layout Templates > Forum Wrapper
2. Find this line:
   
   <div id="wrapper">
   ...
   
3. Create a new line directly above it
4. Paste this HTML:
   
   <div class="pm-menu-container" id="js-pm-push-menu">
   <h2>Menu</h2>
   <p>This is the content within the menu.</p>
   <p><a href="#">Add some links!</a></p>
   <button class="pm-toggle-button" id="js-pm-toggle-button">Show/Hide Push Menu</button>
</div>
<div class="pm-push-pixel" id="js-pm-push-pixel"></div>
<div class="pm-content-container">
   
5. Scroll to the very bottom of the code area
6. Find the closing </body> tag
7. Create a new line directly above it
8. Add a closing </div> to close .pm-content-container
9. Click "Save Theme" or "Save Changes" to save your changes
10. Now go to Admin > Structure > Headers & Footers and click "Global Header & Footer"
11. Paste the following script in your global footer:
    
    <script>
$(function() {
   // Push Menu with localStorage
   (function pushMenu() {
       var $toggleButton  = $("#js-pm-toggle-button");
       var $pushSelectors = $("#js-pm-push-menu, #js-pm-push-pixel");

       var isMenuOpen;

       // -----------------------------------------------------------------------------

       /**
        * Default state for the menu.
        * ---
        * NOTE: Use "true" to set the menu to be open by default, and "false" to set
        *       it to be closed by default.
        */

       var openMenuOnLoad = false;

       // -----------------------------------------------------------------------------

       function toggleMenu() {
           isMenuOpen = !isMenuOpen;

           if ($pushSelectors.hasClass("open-on-load")) {
               $pushSelectors.removeClass("open-on-load");
           }

           if (isMenuOpen) {
               $pushSelectors.addClass("open");
               localStorage.setItem("pushSelectors", "opened");
           } else {
               $pushSelectors.removeClass("open");
               localStorage.setItem("pushSelectors", "closed");
           }
       }

       if (localStorage.getItem("pushSelectors") === null) {
           isMenuOpen = openMenuOnLoad;
       } else {

           if (localStorage.getItem("pushSelectors") === "opened") {
               isMenuOpen = true;
           } else {
               isMenuOpen = false;
           }

       }

       if (isMenuOpen) {
           $pushSelectors.addClass("open-on-load");
       }

       $toggleButton.on("click", toggleMenu);
   })();
});
</script>
    
12. Click "Save Changes" to save your changes
13. Now go to Admin > Themes > Advanced Styles & CSS and click on the "Style Sheet" tab
14. Scroll to the very bottom of the code area and paste the following CSS:
    
    /* ==========================================================================
  Push Menu w/ localStorage
  ========================================================================== */

/* Push Menu
  ========================================================================== */

@pm-menu-background-color: @banner_background_color;
@pm-menu-width: 240px;
@pm-menu-text-color: @banner_text_color;
@pm-toggle-button-width: 200px;
@pm-toggle-button-height: 50px;

.pm-menu-container {
   background: @pm-menu-background-color;
   bottom: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   color: @pm-menu-text-color;
   height: 100%;
   left: -@pm-menu-width;
   padding: 50px 30px;
   position: fixed;
   top: 0;
   -webkit-transition: left 0.3s ease-in-out;
   transition: left 0.3s ease-in-out;
   width: @pm-menu-width;
   z-index: 1001;
   
   &.open,
   &.open-on-load {
       left: 0;
   }
   
   &.open-on-load {
       -webkit-transition: none;
       transition: none;
   }
 
   .pm-toggle-button {
       background: @pm-menu-background-color;
       border: 0;
       border-radius: 0;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       color: @pm-menu-text-color;
       left: (@pm-menu-width - @pm-toggle-button-width / 2);
       min-height: @pm-toggle-button-height;
       min-width: @pm-toggle-button-width;
       padding-top: (@pm-toggle-button-height / 2);
       position: absolute;
       top: 50%;
       -webkit-transform: translateY(-50%) rotate(270deg);
       -ms-transform: translateY(-50%) rotate(270deg);
       transform: translateY(-50%) rotate(270deg);
   }
}


/* Push Pixel
  ========================================================================== */

.pm-push-pixel {
   float: left;
   height: 1px;
   -webkit-transition: width 0.3s ease-in-out;
   transition: width 0.3s ease-in-out;
   width: 0;
   
   &.open,
   &.open-on-load {
       width: @pm-menu-width;
   }
   
   &.open-on-load {
       -webkit-transition: none;
       transition: none;
   }
}


/* Content Container
  ========================================================================== */

.pm-content-container {
   overflow: auto;
}
    
15. Click "Save Theme" or "Save Changes" to save your changes