Untitled Page

// Renders the fixed left navigation and active-route highlight.
import { NavLink } from 'react-router-dom';
import { colors } from './theme';

const links = [
  { to: '/dashboard', label: 'Dashboard', icon: 'bi-house-door' },
  { to: '/tasks', label: 'Tasks', icon: 'bi-clipboard2' },
  { to: '/profile', label: 'Profile', icon: 'bi-person' },
];

function Sidebar() {
  return (
    <aside style={{ position: 'fixed', left: 0, top: 0, bottom: 0, width: 240, background: colors.sidebar, color: '#fff', padding: '30px 20px 24px', zIndex: 10 }}>
      <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: 0.4, margin: '0 12px 28px' }}>TASKFLOW</div>
      <nav className="d-grid gap-2">
        {links.map((link) => (
          <NavLink key={link.to} to={link.to} style={({ isActive }) => ({ display: 'flex', alignItems: 'center', gap: 12, color: '#fff', textDecoration: 'none', padding: '12px 14px', borderRadius: 6, fontSize: 14, background: isActive ? colors.active : 'transparent' })}>
            <i className={`bi ${link.icon}`} aria-hidden="true" />{link.label}
          </NavLink>
        ))}
      </nav>
      <div style={{ position: 'absolute', left: 32, bottom: 24, fontSize: 11, lineHeight: 1.8 }}><div>TaskFlow</div><div>© 2024 All rights reserved.</div></div>
    </aside>
  );
}
export default Sidebar;