접이식 사이드바 레이아웃

토글 애니메이션과 아이콘 메뉴가 포함된 접이식 사이드바 레이아웃입니다.

sidebarnavigationlayoutanimation
Gist 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  :root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --bg-dark: #1e1e2d;
    --text-color: #a2a3b7;
    --active-color: #3699ff;
  }
  body {
    margin: 0;
    font-family: sans-serif;
    background: #f4f5f7;
    display: flex;
  }
  .sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-dark);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  .sidebar.collapsed { width: var(--sidebar-collapsed-width); }
  .logo { height: 60px; display: flex; align-items: center; padding: 0 25px; color: white; font-weight: bold; font-size: 20px; border-bottom: 1px solid #2d2d3f; }
  .nav-list { list-style: none; padding: 20px 0; margin: 0; }
  .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
  }
  .nav-item:hover { background: #252538; color: white; }
  .nav-item.active { color: var(--active-color); background: #252538; }
  .nav-icon { min-width: 30px; font-size: 18px; margin-right: 15px; text-align: center; }
  .nav-text { transition: opacity 0.3s; }
  .collapsed .nav-text { opacity: 0; pointer-events: none; }
  .main-content { flex-grow: 1; padding: 30px; }
  .toggle-btn { margin-top: auto; padding: 20px; text-align: center; cursor: pointer; color: white; border-top: 1px solid #2d2d3f; }
</style>
</head>
<body>
  <aside class="sidebar" id="sidebar">
    <div class="logo">ADMIN</div>
    <ul class="nav-list">
      <li class="nav-item active"><span class="nav-icon">📊</span><span class="nav-text">Dashboard</span></li>
      <li class="nav-item"><span class="nav-icon">👥</span><span class="nav-text">Users</span></li>
      <li class="nav-item"><span class="nav-icon">📁</span><span class="nav-text">Projects</span></li>
      <li class="nav-item"><span class="nav-icon">⚙️</span><span class="nav-text">Settings</span></li>
    </ul>
    <div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('collapsed')">◀▶</div>
  </aside>
  <main class="main-content">
    <h1>메인 콘텐츠 영역</h1>
    <p>사이드바 토글 버튼을 눌러보세요.</p>
  </main>
</body>
</html>