How to mobile collapse navbar from Materialize CSS in Svelte? - mobile

Question

I am trying to use the javascript functions in Materialize CSS in my Svelte Project. I have a navbar which is called in app.svelte. I have called M.AutoInit(); in the script tags of app.svelte as so:
<script>
import "../node_modules/materialize-css/dist/css/materialize.min.css";
import "../node_modules/materialize-css/dist/js/materialize.min.js";
import { Router, Route } from "svelte-routing";
import { setupI18n, isLocaleLoaded, locale } from "./services/i18n";
import { derived } from "svelte/store";
import Home from "./pages/Home.svelte";
import About from "./pages/About.svelte";
import Navbar from "./layout/Navbar.svelte";
$: if (!$isLocaleLoaded) {
setupI18n({ withLocale: "jp" });
}
M.AutoInit();
</script>
{#if $isLocaleLoaded}
<Router>
<Navbar />
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
{:else}
<p>Loading...</p>
{/if}
I add the required javascript in my Navbar.svelte file as in the materialize css documentation here.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
However click the mobile hamburger button does not bring out the side menu.
In addition, browser console says that "options" is not defined.

Answer 1

Hello stackoverflow and svelte community. I have fixed the above issue, and will document my steps here:
In my Navbar.svelte file, I re-wrote the javascript into a function:
function mobileNav() {
var elems = document.querySelectorAll(".sidenav");
var instances = M.Sidenav.init(elems);
}
Then, I bound the function to the mobile hamburger button by adding "on:click={mobileNav}" to the hamburger button, as is possible in svelte! Here it is using the Navbar as in documentation:
<nav>
<div class="nav-wrapper">
Logo
menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
In the navbar documentation, the function takes the arguments (elems, options) however removing options fixed the problem entirely.