[Guide] SideNav Menu - MDB Collapsible vs Bootstrap Collapse

Hi all, We are busy trying to integrate MDB with our Ruby on Rails project.  We have had some challenges with our side navigation menu so I thought I would share what we have discovered. The MDB example menu uses some .collapsible-x classes to control the behaviour of the menu.  We were not able to find any specific documentation but we had a look through the JS and found we needed to initialise this with  $('.collapsible').collapsible();.  We tried various methods to do this, without success, each time we got a very "jumpy" user experience.  The menu would collapse and expand with each page load or refresh. We decided to give the original bootstrap collapse component a try instead.   Here is our example code:

//Bootstrap Collapse Example
<ul class="collapsible">
  <li>
    <a class="waves-effect arrow-r" data-toggle="collapse" href="#submitBlogMenu" role="button" aria-expanded="false">
      <i class="fa fa-chevron-right"></i>
      Submit blog
      <i class="fa fa-angle-down rotate-icon"></i>
    </a>
    <div id="submitBlogMenu" class="collapse">
      <ul>
        <li><a href="#" class="waves-effect">Submit listing</a></li>
        <li><a href="#" class="waves-effect">Registration form</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a class="waves-effect arrow-r" data-toggle="collapse" href="#instructionMenu" role="button" aria-expanded="false">
      <i class="fa fa-hand-pointer-o"></i>
      Instruction
      <i class="fa fa-angle-down rotate-icon"></i>
    </a>
    <div id="instructionMenu" class="collapse">
      <ul>
        <li><a href="#" class="waves-effect">For bloggers</a></li>
        <li><a href="#" class="waves-effect">For authors</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a class="waves-effect arrow-r" data-toggle="collapse" href="#aboutMenu" role="button" aria-expanded="false">
      <i class="fa fa-eye"></i>
      About
      <i class="fa fa-angle-down rotate-icon"></i>
    </a>
    <div id="aboutMenu" class="collapse">
      <ul>
        <li><a href="#" class="waves-effect">Introduction</a></li>
        <li><a href="#" class="waves-effect">Monthly meetings</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a class="waves-effect arrow-r" data-toggle="collapse" href="#contactMenu" role="button" aria-expanded="false">
      <i class="fa fa-envelope-o"></i>
      Contact me
      <i class="fa fa-angle-down rotate-icon"></i>
    </a>
    <div id="contactMenu" class="collapse">
      <ul>
        <li><a href="#" class="waves-effect">FAQ</a></li>
        <li><a href="#" class="waves-effect">Write a message</a></li>
      </ul>
    </div>
  </li>
</ul>

This also broke the styling a little so we have added a bit of CSS to our custom-styles:

#sideNavMenu {
  [aria-expanded="true"] {
    background-color: rgba(0, 0, 0, 0.15);
    .rotate-icon {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  .active {
    //background-color: #64c3f0;
    color: #aadeff;
    //background-color: #2d486a;
  }
  .collapsing, .show {
    background-color: rgba(255, 255, 255, 0.15);
    a:hover {
      color: #aadeff;
    }
  }
}

To make sure the menu displays what we want, we used helpers to control the aria-expanded parameter based on where we are in the app e.g. aria-expanded="#{current_controller?(controller)}" and a similar one to apply the .active class to menu links e.g. class: "#{'active' if current_action?(action)}". We now have a nice smooth menu :)

---