First commit

src/client/components/Sidebar.jsx

@@ -0,0 +1,49 @@
+import { Bell, Globe2, Link, LogOut, ShieldCheck, UserRound } from 'lucide-react';
+
+const navItems = [
+  { view: 'sites', label: 'サイト一覧', icon: Globe2 },
+  { view: 'alerts', label: 'アラート履歴', icon: Bell },
+  { view: 'notifications', label: '通知方法', icon: Link },
+  { view: 'account', label: 'アカウント', icon: UserRound },
+];
+
+export function Sidebar({ activeView, user, onNavigate, onLogout }) {
+  return (
+    <aside className="sidebar" aria-label="メインメニュー">
+      <div className="sidebar-brand">
+        <ShieldCheck aria-hidden="true" size={24} />
+        <span>CertRemind</span>
+      </div>
+
+      <nav className="sidebar-nav">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const active = activeView === item.view;
+          return (
+            <button
+              className={`sidebar-link ${active ? 'active' : ''}`}
+              key={item.view}
+              onClick={() => onNavigate(item.view)}
+              aria-current={active ? 'page' : undefined}
+              title={item.label}
+            >
+              <Icon aria-hidden="true" size={20} />
+              <span>{item.label}</span>
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="sidebar-footer">
+        <div className="sidebar-user">
+          <UserRound aria-hidden="true" size={18} />
+          <span>{user.displayName}</span>
+        </div>
+        <button className="sidebar-link" onClick={onLogout} title="ログアウト">
+          <LogOut aria-hidden="true" size={20} />
+          <span>ログアウト</span>
+        </button>
+      </div>
+    </aside>
+  );
+}