AI向け説明 AI Description

`N-008` はアプリのような管理画面に適したサイドバーナビゲーションです。CSSの`width`トランジションで開閉アニメーションを行い、閉じた状態（`.collapsed`クラス）ではアイコンのみを表示します。

`N-008` implements a collapsible sidebar navigation suitable for dashboards. It uses CSS `width` transitions for smooth toggling between full and icon-only (`.collapsed`) states.

調整可能パラメータ Adjustable Parameters

• --sidebar-width — 展開時のサイドバー幅Expanded sidebar width
• --sidebar-bg — サイドバーの背景色Sidebar background color

実装 Implementation

HTML + CSS + JS

<aside class="sidebar" id="sidebar">
  <div class="header">
    <span class="brand">Logo</span>
    <button class="toggle">≡</button>
  </div>
  <ul class="nav">
    <li><a href="#"><span class="icon">🏠</span> Home</a></li>
  </ul>
</aside>

<style>
:root { --sidebar-width: 240px; --sidebar-bg: #fff; }
.sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); transition: width 0.3s ease; overflow: hidden; }
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .brand { opacity: 0; }
</style>

<script>
document.querySelector('.toggle').addEventListener('click', () => {
  document.getElementById('sidebar').classList.toggle('collapsed');
});
</script>

React (JSX + CSS)

// react/N-008.jsx
import { useState } from 'react';
import './N-008.css';

export default function Sidebar() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
      <div className="sidebar-header">
        <span className="brand-logo">Dashboard</span>
        <button className="toggle-btn" onClick={() => setCollapsed(!collapsed)}>
          <svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
            <path d="M3 12h18M3 6h18M3 18h18"/>
          </svg>
        </button>
      </div>
      <ul className="nav-list">
        <li><a href="#" className="nav-link"><span className="nav-icon">🏠</span> Home</a></li>
        <li><a href="#" className="nav-link"><span className="nav-icon">⚙️</span> Settings</a></li>
      </ul>
    </aside>
  );
}