`frontend/src/components/Sidebar.js`

53 lines
import React from 'react'
import { NavLink } from 'react-router-dom'

const Sidebar = () => {
  const navItems = [
    { path: '/dashboard', label: 'Dashboard', icon: '📊' },
    { path: '/alerts', label: 'Alerts', icon: '🚨' },
    { path: '/users', label: 'Users', icon: '👥' },
    { path: '/monitoring', label: 'Monitoring', icon: '📈' },
    { path: '/reports', label: 'Reports', icon: '📋' }
  ]

  return (
    <div className="sidebar">
      <div className="sidebar-header">
        <div className="sidebar-title">Dear Bubbe Admin</div>
        <div className="sidebar-subtitle">Security Dashboard</div>
      </div>
      
      <nav className="nav-menu">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) => 
              `nav-item ${isActive ? 'active' : ''}`
            }
          >
            <span className="nav-icon">{item.icon}</span>
            {item.label}
          </NavLink>
        ))}
      </nav>

      <div style={{
        position: 'absolute',
        bottom: '20px',
        left: '20px',
        right: '20px',
        fontSize: '12px',
        color: '#94a3b8',
        textAlign: 'center',
        borderTop: '1px solid #475569',
        paddingTop: '16px'
      }}>
        <div>Version 1.0.0</div>
        <div>Real-time Protection Active</div>
      </div>
    </div>
  )
}

export default Sidebar