Set width: full 320 480 640 768 1024 1920 custom
<!-- Responsive Sidebar Layout Template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f7f7f7;
}
.sidebar-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 240px;
background: #222;
color: #fff;
padding: 2rem 1rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
transition: transform 0.3s;
}
.sidebar h2 {
margin: 0 0 1.5rem 0;
font-size: 1.3rem;
letter-spacing: 1px;
}
.sidebar nav a {
color: #fff;
text-decoration: none;
padding: 0.7rem 1rem;
border-radius: 4px;
transition: background 0.2s;
display: block;
}
.sidebar nav a:hover {
background: #0078d7;
}
.sidebar-toggle {
display: none;
position: absolute;
top: 1rem;
left: 1rem;
background: #0078d7;
color: #fff;
border: none;
font-size: 2rem;
border-radius: 4px;
padding: 0.2rem 0.7rem;
cursor: pointer;
z-index: 1001;
}
.main-content {
flex: 1;
padding: 2rem;
background: #fff;
min-width: 0;
}
@media (max-width: 800px) {
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
transform: translateX(-100%);
z-index: 1000;
box-shadow: 2px 0 16px rgba(0,0,0,0.08);
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-toggle {
display: block;
}
.main-content {
padding: 2rem 1rem;
}
body.sidebar-open {
overflow: hidden;
}
}
@media (min-width: 801px) {
.sidebar-toggle {
display: none !important;
}
}
</style>
</head>
<body>
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Open sidebar">☰</button>
<div class="sidebar-layout">
<aside class="sidebar" id="sidebar">
<h2>Menu</h2>
<nav>
<a href="#">Dashboard</a>
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Help</a>
<a href="#">Logout</a>
</nav>
</aside>
<main class="main-content">
<h1>Responsive Sidebar Layout</h1>
<p>This layout features a collapsible sidebar. On mobile, use the hamburger icon to open and close the sidebar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.</p>
</main>
</div>
<script>
const sidebar = document.getElementById('sidebar');
const sidebarToggle = document.getElementById('sidebarToggle');
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('open');
document.body.classList.toggle('sidebar-open');
});
// Close sidebar when clicking outside on mobile
document.addEventListener('click', (e) => {
if (window.innerWidth <= 800 && sidebar.classList.contains('open')) {
if (!sidebar.contains(e.target) && e.target !== sidebarToggle) {
sidebar.classList.remove('open');
document.body.classList.remove('sidebar-open');
}
}
});
// Close sidebar on resize
window.addEventListener('resize', () => {
if (window.innerWidth > 800) {
sidebar.classList.remove('open');
document.body.classList.remove('sidebar-open');
}
});
</script>
</body>
</html>