mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-13 21:52:40 +00:00
ca41b7af0a
- Install and configure TanStack Router for type-safe routing - Create route structure with __root.tsx layout and individual route files - Implement mobile-responsive sidebar with collapse functionality - Add clickable logo in sidebar that navigates to overview page - Extract Header and Sidebar components from Dashboard for reusability - Configure Vite with TanStack Router plugin for development - Update main.tsx to use RouterProvider instead of direct App rendering - Maintain existing TanStack Query integration seamlessly - Add proper TypeScript types for all route components - Implement responsive design with mobile overlay and hamburger menu This replaces the tab-based navigation with URL-based routing while maintaining the same user experience and adding powerful features like: - Bookmarkable URLs (/transactions, /analytics, /notifications) - Browser back/forward button support - Direct linking capabilities - Mobile-responsive sidebar with smooth animations - Type-safe navigation with auto-completion
107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import { Link, useLocation } from "@tanstack/react-router";
|
|
import {
|
|
CreditCard,
|
|
Home,
|
|
List,
|
|
BarChart3,
|
|
Bell,
|
|
TrendingUp,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { apiClient } from "../lib/api";
|
|
import { formatCurrency } from "../lib/utils";
|
|
import { cn } from "../lib/utils";
|
|
import type { Account } from "../types/api";
|
|
|
|
const navigation = [
|
|
{ name: "Overview", icon: Home, to: "/" },
|
|
{ name: "Transactions", icon: List, to: "/transactions" },
|
|
{ name: "Analytics", icon: BarChart3, to: "/analytics" },
|
|
{ name: "Notifications", icon: Bell, to: "/notifications" },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
sidebarOpen: boolean;
|
|
setSidebarOpen: (open: boolean) => void;
|
|
}
|
|
|
|
export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
|
|
const location = useLocation();
|
|
|
|
const { data: accounts } = useQuery<Account[]>({
|
|
queryKey: ["accounts"],
|
|
queryFn: apiClient.getAccounts,
|
|
});
|
|
|
|
const totalBalance =
|
|
accounts?.reduce((sum, account) => {
|
|
const primaryBalance = account.balances?.[0]?.amount || 0;
|
|
return sum + primaryBalance;
|
|
}, 0) || 0;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
|
|
sidebarOpen ? "translate-x-0" : "-translate-x-full",
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
|
|
<Link
|
|
to="/"
|
|
onClick={() => setSidebarOpen(false)}
|
|
className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
|
|
>
|
|
<CreditCard className="h-8 w-8 text-blue-600" />
|
|
<h1 className="text-xl font-bold text-gray-900">Leggen</h1>
|
|
</Link>
|
|
<button
|
|
onClick={() => setSidebarOpen(false)}
|
|
className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="px-6 py-4">
|
|
<div className="space-y-1">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
onClick={() => setSidebarOpen(false)}
|
|
className={`flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors ${
|
|
location.pathname === item.to
|
|
? "bg-blue-100 text-blue-700"
|
|
: "text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
<item.icon className="mr-3 h-5 w-5" />
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Account Summary in Sidebar */}
|
|
<div className="px-6 py-4 border-t border-gray-200 mt-auto">
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-600">
|
|
Total Balance
|
|
</span>
|
|
<TrendingUp className="h-4 w-4 text-green-500" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-gray-900 mt-1">
|
|
{formatCurrency(totalBalance)}
|
|
</p>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
{accounts?.length || 0} accounts
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|