  }

    nav {
      position: fixed;
      transform: translateX(-100%);
      width: 85%;
      max-width: 300px;
      height: calc(100vh - 57px);
      top: 57px;
    }

    nav.active {
      transform: translateX(0);
    }
  }
</style>


    <div class="content">
        <div class="header">
  <div class="header-content">
    <button
      id="mobile-nav-toggle"
      aria-label="Toggle navigation"
      class="mobile-only"
    >
      <i class="bx bx-menu"></i>
    </button>
    <script>
  document.a