81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
import { useState } from 'react';
|
|
import { Bell, Globe2, Link, LogOut, Menu, ShieldCheck, UserRound, X } 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 }) {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const MenuIcon = menuOpen ? X : Menu;
|
|
|
|
function handleNavigate(view) {
|
|
onNavigate(view);
|
|
setMenuOpen(false);
|
|
}
|
|
|
|
function handleLogout() {
|
|
setMenuOpen(false);
|
|
onLogout();
|
|
}
|
|
|
|
return (
|
|
<aside className={`sidebar ${menuOpen ? 'menu-open' : ''}`} aria-label="メインメニュー">
|
|
<div className="sidebar-brand">
|
|
<ShieldCheck aria-hidden="true" size={24} />
|
|
<span>CertRemind</span>
|
|
</div>
|
|
|
|
<div className="sidebar-mobile-user">
|
|
<UserRound aria-hidden="true" size={18} />
|
|
<span>{user.displayName}</span>
|
|
</div>
|
|
|
|
<button
|
|
className="sidebar-menu-button"
|
|
type="button"
|
|
onClick={() => setMenuOpen((open) => !open)}
|
|
aria-expanded={menuOpen}
|
|
aria-controls="sidebar-menu"
|
|
aria-label={menuOpen ? 'メニューを閉じる' : 'メニューを開く'}
|
|
title={menuOpen ? 'メニューを閉じる' : 'メニューを開く'}
|
|
>
|
|
<MenuIcon aria-hidden="true" size={22} />
|
|
</button>
|
|
|
|
<nav className="sidebar-nav" id="sidebar-menu">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = activeView === item.view;
|
|
return (
|
|
<button
|
|
className={`sidebar-link ${active ? 'active' : ''}`}
|
|
key={item.view}
|
|
onClick={() => handleNavigate(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={handleLogout} title="ログアウト">
|
|
<LogOut aria-hidden="true" size={20} />
|
|
<span>ログアウト</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|