My sidebar navigation is not working as intended. I want it to load collapsed and display a modal, similar to the example in this fiddle:
Here is the relevant code snippet: HTML:
<header class="text-center">
</header>
<div class="main_container">
<nav class="indigo darken-4">
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><h1>code.partners near you</h1></a>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="/auth/github" class="waves-effect waves-teal">Login with Github</a></li>
<li class="bold"><a href="/marker" class="waves-effect waves-teal">Create a New Marker</a></li>
<li class="bold"><a href="/logout" class="waves-effect waves-teal">Logout</a></li>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
</ul>
</div>
</nav>
<main>
{{!-- <div class="container text-center"> --}}
<div id="map_container">
<div id="map"></div>
<div id="message_box">
<ul id="messages"></ul>
<div id="messageInputBox">
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</div>
</div>
{{!-- </div> --}}
</main>Javascript section:
$(document).ready(function(){
console.log("interactive is linked and ready");
// Initialize collapse button
$(".button-collapse").sideNav({
menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
});//end document.readyLink to my Heroku page:
Fiddle link: https://jsfiddle.net/clwarnock/h7md1q3u/8/
I'm aiming to replicate the behavior of the sidebar navigation as shown in the provided fiddle:
- Start collapsed
- Display a modal when expanded
Requesting assistance from Danny Buonocore
Upon resizing the viewport to a smaller device size, there appears to be an issue where the hamburger menu does not toggle properly to reveal the sidebar. There might be a conflict that requires attention.