<input type="checkbox" id="drawer-toggle" hidden>
<label for="drawer-toggle" class="open-btn">Open Drawer</label>
<label for="drawer-toggle" class="backdrop"></label>
<div class="drawer">
<div class="handle"></div>
<h3>Settings</h3>
<ul class="options">
<li>
<span>Dark Mode</span>
<div class="fake-toggle"></div>
</li>
<li>Notifications</li>
<li>Privacy</li>
<li class="danger">Log Out</li>
</ul>
</div>
* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f0f2f5;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.open-btn {
padding: 12px 24px;
background: #2563eb;
color: white;
border-radius: 99px;
cursor: pointer;
font-weight: 500;
}
.backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
z-index: 10;
}
.drawer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
border-radius: 24px 24px 0 0;
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 20;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.handle {
width: 40px;
height: 5px;
background: #e2e8f0;
border-radius: 10px;
margin: 0 auto 20px;
}
#drawer-toggle:checked ~ .backdrop {
opacity: 1;
visibility: visible;
}
#drawer-toggle:checked ~ .drawer {
transform: translateY(0);
}
.options {
list-style: none;
padding: 0;
}
.options li {
padding: 15px 0;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.fake-toggle {
width: 36px;
height: 20px;
background: #e2e8f0;
border-radius: 99px;
}
.danger { color: #ef4444; }
