<div class="side-layout">
<div class="side-nav" id="sidebar">
<div class="nav-header">
<span class="logo-text">Admin</span>
<button id="toggleBtn" class="toggle-icon">☰</button>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="icon">🏠</span>
<span class="link-text">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">📈</span>
<span class="link-text">Analytics</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">📦</span>
<span class="link-text">Products</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">⚙</span>
<span class="link-text">Settings</span>
</a>
</li>
</ul>
</div>
<div class="content-area">
<h1>Main Content</h1>
<p>Click the hamburger icon to collapse the sidebar.</p>
</div>
</div>
.side-layout {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
min-height: 400px;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.side-nav {
width: 250px;
background: #111827;
color: white;
transition: width 0.3s ease;
display: flex;
flex-direction: column;
}
.side-nav.collapsed {
width: 70px;
}
.nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
height: 60px;
box-sizing: border-box;
}
.logo-text {
font-weight: 700;
font-size: 1.2rem;
white-space: nowrap;
overflow: hidden;
}
.side-nav.collapsed .logo-text {
display: none;
}
.toggle-icon {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 1.2rem;
}
.nav-links {
list-style: none;
padding: 0;
margin: 0;
}
.nav-links li a {
display: flex;
align-items: center;
padding: 15px 20px;
color: #9ca3af;
text-decoration: none;
gap: 15px;
transition: background 0.2s;
white-space: nowrap;
}
.nav-links li a:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.icon {
font-size: 1.2rem;
min-width: 30px;
}
.side-nav.collapsed .link-text {
opacity: 0;
pointer-events: none;
}
.content-area {
flex: 1;
padding: 30px;
background: #f9fafb;
}