mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-13 17:12:15 +00:00
- 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
26 lines
685 B
TypeScript
26 lines
685 B
TypeScript
import { StrictMode } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { createRouter, RouterProvider } from "@tanstack/react-router";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import "./index.css";
|
|
import { routeTree } from "./routeTree.gen";
|
|
|
|
const router = createRouter({ routeTree });
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
retry: 1,
|
|
},
|
|
},
|
|
});
|
|
|
|
createRoot(document.getElementById("root")!).render(
|
|
<StrictMode>
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} />
|
|
</QueryClientProvider>
|
|
</StrictMode>,
|
|
);
|