mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-14 10:52:18 +00:00
feat(frontend): implement TanStack Router with mobile sidebar
- 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
This commit is contained in:
11
frontend/src/routes/transactions.tsx
Normal file
11
frontend/src/routes/transactions.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import TransactionsList from "../components/TransactionsList";
|
||||
|
||||
export const Route = createFileRoute("/transactions")({
|
||||
component: TransactionsList,
|
||||
validateSearch: (search) => ({
|
||||
accountId: search.accountId as string | undefined,
|
||||
startDate: search.startDate as string | undefined,
|
||||
endDate: search.endDate as string | undefined,
|
||||
}),
|
||||
});
|
||||
Reference in New Issue
Block a user