Initial commit: WealthWise financial analytics platform
This commit is contained in:
163
src/components/Navigation.tsx
Normal file
163
src/components/Navigation.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
TrendingUp,
|
||||
Wallet,
|
||||
PiggyBank,
|
||||
CreditCard,
|
||||
Calendar,
|
||||
Shield,
|
||||
Target,
|
||||
Settings,
|
||||
LogOut,
|
||||
Menu,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
|
||||
interface NavigationProps {
|
||||
activeSection: string;
|
||||
onSectionChange: (section: string) => void;
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
const navigationItems = [
|
||||
{ id: 'dashboard', icon: LayoutDashboard, label: 'Dashboard' },
|
||||
{ id: 'portfolio', icon: TrendingUp, label: 'Portfolio' },
|
||||
{ id: 'budget', icon: Wallet, label: 'Budget' },
|
||||
{ id: 'savings', icon: PiggyBank, label: 'Savings Booster' },
|
||||
{ id: 'credit', icon: CreditCard, label: 'Credit Manager' },
|
||||
{ id: 'commitments', icon: Calendar, label: 'Commitments' },
|
||||
{ id: 'insurance', icon: Shield, label: 'Insurance' },
|
||||
{ id: 'goals', icon: Target, label: 'AI Jar' },
|
||||
];
|
||||
|
||||
const Navigation: React.FC<NavigationProps> = ({
|
||||
activeSection,
|
||||
onSectionChange,
|
||||
onLogout
|
||||
}) => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Navigation Toggle */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className={`fixed top-4 z-[60] lg:hidden w-12 h-12 rounded-xl glass border border-glass-border flex items-center justify-center transition-all duration-300 ${
|
||||
isMobileMenuOpen ? 'left-[268px] bg-red-500/10 border-red-300 text-red-600' : 'left-4 bg-white/80 border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-6 h-6" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Mobile Overlay */}
|
||||
{isMobileMenuOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Navigation Sidebar */}
|
||||
<div className={`fixed left-0 top-0 h-full w-64 lg:w-20 glass border-r border-glass-border z-50 flex flex-col transition-all duration-300 lg:translate-x-0 ${
|
||||
isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
||||
}`}>
|
||||
{/* Logo */}
|
||||
<div className="flex items-center justify-center lg:justify-center h-20 border-b border-glass-border px-4 lg:px-0">
|
||||
<div className="w-10 h-10 rounded-xl gradient-primary flex items-center justify-center shadow-lg">
|
||||
<svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Globe */}
|
||||
<circle cx="16" cy="16" r="10" fill="none" stroke="#FFFFFF" strokeWidth="1.5"/>
|
||||
|
||||
{/* Continents */}
|
||||
<path d="M10 12 Q12 11 14 12 Q13 14 11 13 Z" fill="#FFFFFF" opacity="0.9"/>
|
||||
<path d="M18 10 Q21 9 23 12 Q21 13 19 12 Q17 11 18 10 Z" fill="#FFFFFF" opacity="0.8"/>
|
||||
<path d="M13 18 Q16 17 17 20 Q15 21 13 20 Q12 19 13 18 Z" fill="#FFFFFF" opacity="0.9"/>
|
||||
|
||||
{/* Grid Lines */}
|
||||
<path d="M6 16 Q16 14 26 16" stroke="#FFFFFF" strokeWidth="0.5" opacity="0.4" fill="none"/>
|
||||
<ellipse cx="16" cy="16" rx="10" ry="5" fill="none" stroke="#FFFFFF" strokeWidth="0.5" opacity="0.3"/>
|
||||
|
||||
{/* Growth Arrow */}
|
||||
<path d="M22 10 L25 7 L24 6 L27 6 L27 9 L26 8 L23 11 Z" fill="#10B981"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3 lg:hidden">
|
||||
<h2 className="text-lg font-bold bg-gradient-to-r from-cyan-600 to-blue-600 bg-clip-text text-transparent">
|
||||
Shimmer AI
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">Financial Assistant</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation items */}
|
||||
<nav className="flex-1 py-6">
|
||||
<div className="space-y-2 px-3">
|
||||
{navigationItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
onSectionChange(item.id);
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
className={`w-full flex items-center space-x-3 px-3 py-3 rounded-lg transition-all duration-200 group relative ${
|
||||
activeSection === item.id
|
||||
? 'bg-gradient-to-r from-cyan-500 to-blue-500 text-white shadow-lg'
|
||||
: 'hover:bg-white/10 text-gray-700 hover:text-gray-900'
|
||||
} lg:nav-icon lg:justify-center lg:space-x-0 lg:w-14 lg:h-14 lg:p-0`}
|
||||
title={item.label}
|
||||
>
|
||||
<item.icon className="w-5 h-5 flex-shrink-0" />
|
||||
<span className="font-medium text-sm lg:hidden">{item.label}</span>
|
||||
|
||||
{/* Desktop Tooltip - only show on desktop */}
|
||||
<div className="hidden lg:block absolute left-full ml-3 px-3 py-2 bg-black text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
|
||||
{item.label}
|
||||
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-black"></div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Bottom actions */}
|
||||
<div className="p-3 border-t border-glass-border space-y-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
onSectionChange('settings');
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
className={`w-full flex items-center space-x-3 px-3 py-3 rounded-lg transition-all duration-200 ${
|
||||
activeSection === 'settings'
|
||||
? 'bg-gradient-to-r from-cyan-500 to-blue-500 text-white shadow-lg'
|
||||
: 'hover:bg-white/10 text-gray-700 hover:text-gray-900'
|
||||
} lg:nav-icon lg:justify-center lg:space-x-0 lg:w-14 lg:h-14 lg:p-0`}
|
||||
title="Settings"
|
||||
>
|
||||
<Settings className="w-5 h-5 flex-shrink-0" />
|
||||
<span className="font-medium text-sm lg:hidden">Settings</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
onLogout();
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center space-x-3 px-3 py-3 rounded-lg transition-all duration-200 hover:bg-red-500/20 hover:text-red-500 text-gray-700 lg:nav-icon lg:justify-center lg:space-x-0 lg:w-14 lg:h-14 lg:p-0"
|
||||
title="Logout"
|
||||
>
|
||||
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||||
<span className="font-medium text-sm lg:hidden">Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
Reference in New Issue
Block a user