version 0.97.8 breaks mobile side-nav (0.97.6 works)

[jpwynn]

For my Rails 5 app, the layout below (in HAML) works fine with 0.97.6 of the materialize-sass gem, specifically the mobile side-nav that is displayed when you click the hamburger ison when you make the browser window narrow.

However the exact same code displays a broken mobile side-nav when I upgraded the gem to 0.97.8. Downgrading the gam back to 0.97.6 made it work again.

Symptoms: side nav slides from the left as expected, but the side-nav background is gray (not white) and all of the links on the sidenav seem disabled... no highlighting on hover, nothing happens when click the link.

I went back and forth between gem versions a couple of time with zero other changes, it is definitely the gem version 0.97.8 that breaks it.

%body
    %header

      %div.navbar-fixed

        %nav
          %div.container.city_bg
            %div.nav-wrapper

              %div.brand-logo
                // Replace this with an image
                = image_tag "jlogo1b.png", style: "height: 60px;"

              %a{href: "#", class: "button-collapse", data: {activates: "mobile_side_menu"}}
                %i.material-icons menu

              // Normal NavBar that goes across the top
              %ul#nav-mobile.right.hide-on-med-and-down

                %li
                  =link_to "Link 1"
                %li
                  = link_to "Link 2"
                %li
                  = link_to "Link 3"

                // Drop Down Menu
                %li
                  %a{href: "#", class: "dropdown-button", data: {activates: "myDropdown"}}
                    = "Drop Down Menu"
                    %i.material-icons.right 
                      arrow_drop_down
                  %ul{id: "myDropdown", class: "dropdown-content"}
                    %li
                      = link_to "Drop Down Link 1"
                    %li
                      = link_to "Drop Down Link 2"
                    %li
                      = link_to "Drop Down Link 3"

              // Mobile Sidebar
              %ul#mobile_side_menu.side-nav

                %li
                  = link_to "Link 1b"
                %li
                  = link_to "Link 2b"
                %li
                  = link_to "Link 3b"

                // Drow Down Menu on the mobile sidebar
                %li
                  %a{href: "#", class: "dropdown-button", data: {activates: "myDropDownSide"}}
                    = "Admin Menu"
                    %i.material-icons.right.fix-line-height
                      arrow_drop_down

                  %ul{id: "myDropDownSide", class: "dropdown-content dropdown-content-sidebar-fix"}
                    %li
                      = link_to "Drop Down Link 1b"
                    %li
                      = link_to "Drop Down Link 2b"
                    %li
                      = link_to "Drop Down Link 3b"

[jpwynn]

After discovering the issue seems to be related to using a fixed top navbar with %div.navbar-fixed, I then found that the mobile side-nav will work correctly if you move the %ul#mobile_side_menu.side-nav outside of the %div.navbar-fixed, so it is no longer a sister node of the top nav %ul#nav-mobile.right.hide-on-med-and-down

In other words, if using HAML, move the side-nav block to be at the same indent level as the %div.navbar-fixed