如何在Svelte中从物化CSS中移动折叠导航栏？

npm install materialize-css svelte

<script>
  let isNavOpen = false;

  function toggleNav() {
    isNavOpen = !isNavOpen;
  }
</script>

<header>
  <nav>
    <div class="nav-wrapper">
      <a class="brand-logo">Logo</a>
      <a href="#" class="sidenav-trigger" on:click={toggleNav}>
        <i class="material-icons">menu</i>
      </a>
    </div>
  </nav>
  <ul class={isNavOpen ? 'sidenav sidenav-open' : 'sidenav'}>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</header>

<style>
  .sidenav-open {
    transform: translateX(0);
  }
</style>

<script>
  import 'materialize-css/dist/css/materialize.min.css';
</script>

<script>
  import Nav from './Nav.svelte';
</script>

<main>
  <Nav />
  <!-- 其他内容 -->
</main>