So I'm trying to make a dashboard-like Angular app for a school project. I've been making Angular components to modularize the site. So far I have the nav bar and sidenav done, but the side nav is being a bit problematic. I want the side nav to be present on the screen when full size, and collapse when on a smaller screen. When I collapse the screen, the burger menu bars don't open the side nav back up. I don't really understand why this is happening. From what I gather with the docs, I have to initialize the plugin.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
which I have in a script tag at the bottom of the page. I mocked up my code in a Codepen here. It's not "componentized" like it would be in Angular, but it gets the point across. If anyone could help with this I'd appreciate it. Thanks