Drawer component full screen vertical

[gran0123]

Amazing lib for a backend developer trying to make something frontend wise 🎉

Right now the the drawer component and specific example 'navbar menu for desktop + drawer for mobile' is only expanded in navigation area. Is there anyway to configure it to make it expand fully vertical in mobile?

Edit: I found an example on how I wanted the drawer to act and look like: https://tailwindcomponents.com/component/navbar-hamburger-menu/landing

[saadeghi]

Use h-screen class to fill the page height.
Here's an example: https://play.tailwindcss.com/Git3JSot0T?size=800x550

[gran0123]

Yea somewhat what I've been looking for but in this case when I want to have:
-- header
-- main content
-- footer

Example of my problem. Drawer is hitting the top of the footer but should be over footer as well: https://play.tailwindcss.com/9QmHTtKfpo?size=800x550

The drawer is only expanding in the header area and not above main content and footer as well. Is there any way to fix that? Do I have to put everything inside the footer code?

this is the __layout.svelte file:

<script lang="ts">
	import Header from '$lib/header/Header.svelte';
	import Footer from '$lib/footer/Footer.svelte';
</script>
<div class="flex flex-col">
	<Header />
	<div class="flex-grow">
		<main class=""><slot /></main>
	</div>
	<Footer />
</div>

Header component:

<script>
</script>

<header>
	<div class="rounded-lg shadow bg-base-200 drawer h-screen">
		<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
		<div class="flex flex-col drawer-content">
			<div class="w-full navbar bg-base-200">
				<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">
					<span class="text-indigo-600 font-bold text-xl"> test </span>
				</div>
				<div class="flex-1 px-2 mx-2">
					<div class="items-stretch hidden lg:flex">
						<ul class="items-stretch hidden lg:flex">
							<li>
								<a class="btn btn-ghost btn-sm rounded-btn" href="/">Home</a>
							</li>
							<li>
								<a class="btn btn-ghost btn-sm rounded-btn" href="/about"
									>About</a
								>
							</li>
							<li>
								<a class="btn btn-ghost btn-sm rounded-btn" href="/todos"
									>Todos</a
								>
							</li>
							<li>
								<a class="btn btn-ghost btn-sm rounded-btn" href="/contact"
									>Contact</a
								>
							</li>
						</ul>
					</div>
				</div>
				<div class="flex-none">
					<button 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
							/>
						</svg>
					</button>
				</div>
			</div>
		</div>
		<div class="drawer-side">
			<label for="my-drawer-3" class="drawer-overlay" />
			<ul class="p-4 overflow-y-auto menu w-80 bg-base-100">
				<li>
					<a class="btn btn-ghost btn-sm rounded-btn" href="/">Home</a>
				</li>
				<li>
					<a class="btn btn-ghost btn-sm rounded-btn" href="/about">About</a>
				</li>
				<li>
					<a class="btn btn-ghost btn-sm rounded-btn" href="/todos">Todos</a>
				</li>
				<li>
					<a class="btn btn-ghost btn-sm rounded-btn" href="/contact">Contact</a>
				</li>
			</ul>
		</div>
	</div>
</header>

Footer component:

<script>
</script>

<footer class="p-10 footer bg-base-300 text-base-content text-white bg-indigo-600">
	<div>
		<span class="footer-title">Services</span>
		<a class="link link-hover">Branding</a>
		<a class="link link-hover">API</a>
		<a class="link link-hover">Marketing</a>
		<a class="link link-hover">Advertisement</a>
	</div>
	<div>
		<span class="footer-title">Company</span>
		<a class="link link-hover" href="/about"
			>About us</a
		>
		<a class="link link-hover">Contact</a>
		<a class="link link-hover">Press kit</a>
	</div>
	<div>
		<span class="footer-title">Social</span>
		<div class="grid grid-flow-col gap-4">
			<a href="">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 512 512"
					class="inline-block w-6 h-6 fill-current"
					><path
						d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"
					/></svg
				>
			</a>
			<a href="">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="24"
					height="24"
					viewBox="0 0 24 24"
					class="fill-current"
				>
					<path
						d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
					/>
				</svg>
			</a>
			<!-- <a href="">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="24"
					height="24"
					viewBox="0 0 24 24"
					class="fill-current"
				>
					<path
						d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"
					/>
				</svg>
			</a> -->
		</div>
	</div>
</footer>

[saadeghi]

You can put everything (navbar, main content, footer) inside drawer-content.
Example: https://play.tailwindcss.com/9XU7q8gR0o?size=800x565
Drawer is a grid layout with drawer-side and drawer-content next to each other. everything inside drawer-content is the content of this layout and overlay will cover it.

[gran0123]

Yes, this what I was looking for. Thanks! 🙌