Sidebar

Svelte

<!-- @/__layout ? -->
<script>
  import { closeMenu } from '@/AppSideBarToggle.svelte'
</script>

<AppSideBar>
  <!-- content -->
  <div class="when-bar-open">
    <Btn iconOnly accent="danger" on:click="{closeMenu}">
      <Icon name="close" />
    </Btn>
  </div>
  <!-- content -->
</AppSideBar>

<!-- @/AppHeader? -->
<AppSideBarToggle />

HTML

<aside id="app-sidebar" class="{right} {open}">
  <div id="app-sidebar-panel">
    <!-- app-sidebar-panel -->
  </div>
</aside>

<div id="app-sidebar-toggle">
  <button class="btn {icon-only}">
    <!--  -->
  </button>
</div>

Then, choose a breakpoint, and add.

/* @/my-sidebar.css */
@media only screen and (max-width: 900px) {
  #app-sidebar {
    display: none;
  }

  #app-sidebar.open {
    z-index: 5000;
    position: fixed;
    inset: 0;

    display: flex;
    background-color: hsla(0, 0%, 0%, 0.5);

    backdrop-filter: blur(10px);
  }

  #app-sidebar.open .when-bar-open,
  #app-sidebar-toggle {
    display: block;
  }
}

util

/* SvelteKit */
import { browser } from '$app/env'
export function closeSidebar() {
  if (browser) {
    document.querySelector('#app-sidebar')?.classList.remove('open')
  }
}
/* || */
export function closeSidebar() {
  document.querySelector('#app-sidebar')?.classList.remove('open')
}