Как на мобильный свалить навбар из Materialise CSS в Svelte?

Question

Я пытаюсь использовать функции javascript в Materialise CSS в моем проекте Svelte. У меня есть Navbar, который вызывается в app.svelte. Я позвонил M.AutoInit (); в теги сценария app.svelte, например, так:

<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}

Я добавляю необходимые javascript в мой файл Navbar.svelte, как в материализации css документации здесь.

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

Однако нажатие кнопки мобильного гамбургера не вызывает боковое меню. Кроме того, консоль браузера говорит, что «параметры» не определены.

Answer 1

Здравствуйте, stackoverflow и сообщество svelte. Я исправил вышеупомянутую проблему и запишу свои шаги здесь:

В моем файле Navbar.svelte я переписал javascript в функцию:

  function mobileNav() {
    var elems = document.querySelectorAll(".sidenav");
    var instances = M.Sidenav.init(elems);
  }

Затем, Я привязал функцию к кнопке мобильного гамбургера, добавив «on: click = {mobileNav}» к кнопке гамбургера, как это возможно в svelte! Здесь он использует Navbar, как в документации:

 <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger" on:click={mobileNav}><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>

В документации navbar функция принимает аргументы (elems, options), однако удаление опций решило проблему полностью.