(svelte) how can I use Drawer a part from main slot in layout?

[magic-thomas]

I want to use drawer ( https://daisyui.com/components/drawer/#navbar-menu-for-desktop--sidebar-drawer-for-mobile )

But the Drawer component push down the main content slot below the screen.

I have __layout.svelte

<!-- src/routes/__layout.svelte  -->
<script lang="ts">
    import Drawer from '$lib/header/Drawer.svelte';
	import '../app.css';
</script>

<Drawer />
<div class="bg-green-200">
    <slot />
</div>

the slot part can not be seen without scrolling .

the Drawer.svelte is exact same with the link.

<!-- src/lib/header/Drawer.svelte  -->
<div class="drawer">
  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" /> 
  <div class="drawer-content flex flex-col">
    <!-- Navbar -->
    <div class="w-full navbar bg-base-300">
      <div class="flex-none lg:hidden">
        <label for="my-drawer-3" class="btn btn-square btn-ghost">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </label>
      </div> 
      <div class="flex-1 px-2 mx-2">Navbar Title</div>
      <div class="flex-none hidden lg:block">
        <ul class="menu menu-horizontal">
          <!-- Navbar menu content here -->
          <li><a>Navbar Item 1</a></li>
          <li><a>Navbar Item 2</a></li>
        </ul>
      </div>
    </div>
    <!-- Page content here -->
    Content --> here !!
    
  </div> 
  <div class="drawer-side">
    <label for="my-drawer-3" class="drawer-overlay"></label> 
    <ul class="menu p-4 overflow-y-auto w-80 bg-base-100">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
      
    </ul>
    
  </div>
</div>

I don't want to mix the drawer part with the content slot.

How can I use Drawer component separately ?

[rhscjohn-dev]

I think this is what you are looking for.

I created a new Sveltekit default project with all of the latest dependencies.

What did do? The short version. I moved the code from your Drawer.svelte file to the __lauout.svelte file and deleted the Drawer.svelte file. This left me with just the 2 files below.

__layout.svelte file

<script>
  import "../app.css";
</script>

<!-- set bg color for whole app -->
<main class="bg-green-200 ">
  <div class="drawer">
    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content flex flex-col">
      <!-- Navbar -->
      <div class="w-full navbar bg-base-300">
        <div class="flex-none lg:hidden">
          <label for="my-drawer-3" class="btn btn-square btn-ghost">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              class="inline-block w-6 h-6 stroke-current"
              ><path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              /></svg
            >
          </label>
        </div>
        <div class="flex-1 px-2 mx-2">Navbar Title</div>
        <div class="flex-none hidden lg:block">
          <ul class="menu menu-horizontal">
            <!-- Navbar menu content here -->
            <li><a href={"#"}>Navbar Item 1</a></li>
            <li><a href={"#"}>Navbar Item 2</a></li>
          </ul>
        </div>
      </div>
      <!-- Page content here.  This is where the slot goes-->
      <slot />
    </div>
    <div class="drawer-side">
      <label for="my-drawer-3" class="drawer-overlay" />
      <!-- I added w-fit and h-fit in the line below -->
      <ul class="menu p-4 overflow-y-auto w-fit h-fit bg-base-100">
        <!-- Sidebar content here -->
        <li><a href={"#"}>Sidebar Item 1</a></li>
        <li><a href={"#"}>Sidebar Item 2</a></li>
      </ul>
    </div>
  </div>
</main>

Take notice of lines 6, 38 and 43.

default.svelte file

<h1 class="bg-primary text-primary-content">Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

Desktop screenshot

Mobile screenshot

Mobile screenshot with drawer open