antigravity-xd
67563664ce
- Implemented adaptive navigation (Sidebar for wide screens, Bottom Nav for narrow screens) - Added manual theme selection (Light/Dark/System) - Added accent color selection - Created ThemeProvider for dynamic styling - Added Settings page - Refactored Profile page with Quick Access links Fixes #2 Co-Authored-By: Claude <noreply@anthropic.com>
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { User, Calendar, GraduationCap, MessageSquare, Settings } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ path: '/profile', label: 'Profile', icon: User },
|
|
{ path: '/schedule', label: 'Schedule', icon: Calendar },
|
|
{ path: '/grades', label: 'Grades', icon: GraduationCap },
|
|
{ path: '/messages', label: 'Messages', icon: MessageSquare },
|
|
{ path: '/settings', label: 'Settings', icon: Settings },
|
|
];
|
|
|
|
export const Navigation: React.FC = () => {
|
|
return (
|
|
<>
|
|
<nav className="navigation-rail">
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<div className="nav-item-icon-wrapper">
|
|
<item.icon size={24} />
|
|
</div>
|
|
<span className="nav-item-label">{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
<nav className="navigation-bar">
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<div className="nav-item-icon-wrapper">
|
|
<item.icon size={24} />
|
|
</div>
|
|
<span className="nav-item-label">{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
</>
|
|
);
|
|
};
|