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 :)

---