<div class="app-layout">
<div class="sidebar">
<div class="brand">
<div class="brand-icon">W</div>
<span class="brand-text">Workspace</span>
</div>
<div class="nav-group">
<div class="nav-header">
<svg class="chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
<span>Favorites</span>
</div>
<div class="nav-items">
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Weekly Goals
</a>
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Marketing Plan
</a>
</div>
</div>
<div class="nav-group">
<div class="nav-header">
<svg class="chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
<span>Projects</span>
</div>
<div class="nav-items">
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Website Redesign
</a>
<a href="#" class="nav-link">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Mobile App
</a>
</div>
</div>
</div>
<div class="main-view">
<h1>Select a document</h1>
<p>Click on the sidebar headers to expand or collapse sections.</p>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #ffffff;
margin: 0;
min-height: 100vh;
}
.app-layout {
display: flex;
height: 100vh;
}
.sidebar {
width: 260px;
background: #f9fafb;
border-right: 1px solid #e5e7eb;
padding: 20px 10px;
display: flex;
flex-direction: column;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
padding: 0 10px 20px 10px;
margin-bottom: 10px;
}
.brand-icon {
background: #111827;
color: #ffffff;
width: 24px;
height: 24px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
font-weight: 800;
}
.brand-text {
font-weight: 600;
color: #111827;
}
.nav-group {
margin-bottom: 8px;
}
.nav-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
cursor: pointer;
color: #6b7280;
font-size: 0.875rem;
font-weight: 600;
border-radius: 6px;
transition: background 0.2s;
}
.nav-header:hover {
background: #f3f4f6;
}
.chevron {
transition: transform 0.2s;
}
.nav-items {
display: none;
flex-direction: column;
padding-left: 12px;
margin-top: 4px;
}
/* Open State */
.nav-group.open .nav-items {
display: flex;
}
.nav-group.open .chevron {
transform: rotate(90deg);
}
.nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
color: #4b5563;
text-decoration: none;
font-size: 0.95rem;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
}
.nav-link:hover {
background: #e5e7eb;
color: #111827;
}
.main-view {
flex-grow: 1;
padding: 60px;
color: #374151;
}
const headers = document.querySelectorAll(".nav-header");
headers.forEach(function(header) {
header.addEventListener("click", function() {
// Find the parent group and toggle the open class
const group = header.parentElement;
group.classList.toggle("open");
});
});
