drawer.svelte.md

title	desc	published
Drawer	Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.	true

<script> import Component from "@components/Component.svelte" import ClassTable from "@components/ClassTable.svelte" import { prefix } from '$lib/stores'; import { replace } from '$lib/actions'; </script>

Drawer sidebar can be visible by default on large screens or it can be toggleable on both large and small screens.

Drawer tags structure:

.drawer // The root container
  ├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
  ├── .drawer-content // All your page content goes here
  │    ├── // navbar
  │    ├── // content
  │    └── // footer
  └── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
       └── // Sidebar content (menu or anything)

You can check/uncheck the checkbox using JavaScript or using <label> tag.

Open drawer

• Sidebar Item 1
• Sidebar Item 2

{
`
  
  
    
    Open drawer
   
  
    
    
      
      Sidebar Item 1
      Sidebar Item 2
</ul>

  
`
}

{
`
  
  
    
    Open drawer
   
  
    
    
      
      Sidebar Item 1
      Sidebar Item 2
</ul>

  
`
}

Open drawer

• Sidebar Item 1
• Sidebar Item 2

{
`
  
  
    
    Open drawer
   
  
     
    
      
      Sidebar Item 1
      Sidebar Item 2
    
  
`
}

{
`
  
  
    
    Open drawer
   
  
     
    
      
      Sidebar Item 1
      Sidebar Item 2
    
  
`
}

Navbar Title

• Navbar Item 1
• Navbar Item 2

Content

• Sidebar Item 1
• Sidebar Item 2

{
`
   
  
    
    
      
        
          
        
       
      Navbar Title
      
        
          
          Navbar Item 1
          Navbar Item 2
        
      
    
    
    Content
   
  
     
    
      
      Sidebar Item 1
      Sidebar Item 2
</ul>

  
`
}

{
`
   
  
    
    
      
        
          
        
       
      Navbar Title
      
        
          
          Navbar Item 1
          Navbar Item 2
        
      
    
    
    Content
   
  
     
    
      
      Sidebar Item 1
      Sidebar Item 2
</ul>

  
`
}

Open drawer

• Sidebar Item 1
• Sidebar Item 2

{
`
  
  
    
    Open drawer
   
  
    
    
      
      Sidebar Item 1
      Sidebar Item 2
</ul>

  
`
}

{
`
  
  
    
    Open drawer
   
  
    
    
      
      Sidebar Item 1
      Sidebar Item 2
</ul>

  
`
}