88 lines
3.3 KiB
React
88 lines
3.3 KiB
React
import React from 'react'
|
|
|
|
const NAV_ITEMS = [
|
|
{ id: 'dashboard', label: 'Dashboard', icon: '⬡', badge: null },
|
|
{ id: 'trip-tracker', label: 'Trip Tracker', icon: '♥', badge: '3' },
|
|
{ id: 'schedule', label: 'Schedule', icon: '◷', badge: null },
|
|
{ id: 'providers', label: 'Providers', icon: '✦', badge: null },
|
|
{ id: 'rooms', label: 'Rooms', icon: '▣', badge: null },
|
|
{ id: 'reports', label: 'Reports', icon: '◈', badge: null },
|
|
]
|
|
|
|
const BOTTOM_ITEMS = [
|
|
{ id: 'notifications', label: 'Notifications', icon: '◉', badge: '5' },
|
|
{ id: 'settings', label: 'Settings', icon: '⚙', badge: null },
|
|
]
|
|
|
|
/**
|
|
* Sidebar — primary navigation for CTM Concierge.
|
|
* @param {string} activePage — the currently active page id (owned by App)
|
|
* @param {function} onNavigate — callback to change the active page
|
|
*/
|
|
export default function Sidebar({ activePage, onNavigate }) {
|
|
return (
|
|
<aside className="sidebar">
|
|
{/* Logo / App identity */}
|
|
<div className="sidebar-logo">
|
|
<div className="sidebar-logo-icon" aria-hidden="true">✦</div>
|
|
<div className="sidebar-logo-text">
|
|
<span className="sidebar-logo-name">CTM Concierge</span>
|
|
<span className="sidebar-logo-tagline">Trip Tracker</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Primary navigation */}
|
|
<nav className="sidebar-nav" aria-label="Primary navigation">
|
|
<span className="sidebar-section-label">Main</span>
|
|
{NAV_ITEMS.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
id={`nav-${item.id}`}
|
|
className={`nav-item${activePage === item.id ? ' active' : ''}`}
|
|
onClick={() => onNavigate(item.id)}
|
|
aria-current={activePage === item.id ? 'page' : undefined}
|
|
>
|
|
<span className="nav-item-icon" aria-hidden="true">{item.icon}</span>
|
|
{item.label}
|
|
{item.badge && (
|
|
<span className="nav-item-badge" aria-label={`${item.badge} alerts`}>
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
|
|
<span className="sidebar-section-label" style={{ marginTop: 'var(--space-4)' }}>System</span>
|
|
{BOTTOM_ITEMS.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
id={`nav-${item.id}`}
|
|
className={`nav-item${activePage === item.id ? ' active' : ''}`}
|
|
onClick={() => onNavigate(item.id)}
|
|
aria-current={activePage === item.id ? 'page' : undefined}
|
|
>
|
|
<span className="nav-item-icon" aria-hidden="true">{item.icon}</span>
|
|
{item.label}
|
|
{item.badge && (
|
|
<span className="nav-item-badge" aria-label={`${item.badge} alerts`}>
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
{/* User identity footer */}
|
|
<div className="sidebar-footer">
|
|
<div className="sidebar-user" role="button" tabIndex={0} aria-label="User profile">
|
|
<div className="sidebar-avatar" aria-hidden="true">JD</div>
|
|
<div className="sidebar-user-info">
|
|
<div className="sidebar-user-name">Dr. Jane Doe</div>
|
|
<div className="sidebar-user-role">Senior Physician</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|