rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Dashboard and Transactions menu selection

Browse Source 
The dashboard menu item is selected when the user navigates to the transactions page. This commit ensures that the correct menu item is selected based on the current route.
This commit is contained in:
gpt-engineer-app[bot] 2025-05-18 13:17:51 +00:00
parent 3028d8629d
commit 23ac89e158
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -46,19 +46,21 @@ const App = () => {
path="/" path="/"
element={ element={
isAutenticado ? ( isAutenticado ? (
<Navigate to="/transacoes" replace /> <ProtectedRoute>
<Index />
</ProtectedRoute>
) : ( ) : (
<Navigate to="/auth" replace /> <Navigate to="/auth" replace />
) )
} }
/> />
{/* Rota de autenticação - redireciona para transações se já estiver autenticado */} {/* Rota de autenticação - redireciona para dashboard se já estiver autenticado */}
<Route <Route
path="/auth" path="/auth"
element={ element={
isAutenticado ? ( isAutenticado ? (
<Navigate to="/transacoes" replace /> <Navigate to="/" replace />
) : ( ) : (
<Auth /> <Auth />
) )

11
src/components/layout/Sidebar.tsx
View File

@ -5,10 +5,11 @@ import { cn } from '@/lib/utils';
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight, Home, CalendarDays, DollarSign, PieChart } from 'lucide-react'; import { ChevronLeft, ChevronRight, Home, CalendarDays, DollarSign, PieChart } from 'lucide-react';
// Modificado para separar Dashboard e Transações como itens distintos
const navItems = [ const navItems = [
{ {
name: 'Dashboard', name: 'Dashboard',
path: '/transacoes', // Alterado de '/' para '/transacoes' path: '/', // Caminho separado para o Dashboard
icon: <Home className="mr-2 h-5 w-5" /> icon: <Home className="mr-2 h-5 w-5" />
}, },
{ {
@ -36,6 +37,12 @@ const Sidebar = ({ className }: SidebarProps) => {
const location = useLocation(); const location = useLocation();
const [collapsed, setCollapsed] = React.useState(false); const [collapsed, setCollapsed] = React.useState(false);
// Função para verificar se o item está ativo baseado no caminho atual
const isItemActive = (path: string) => {
// Verificação exata do caminho
return location.pathname === path;
};
return ( return (
<div <div
className={cn( className={cn(
@ -65,7 +72,7 @@ const Sidebar = ({ className }: SidebarProps) => {
to={item.path} to={item.path}
className={cn( className={cn(
"flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors", "flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors",
location.pathname === item.path isItemActive(item.path)
? "bg-sidebar-accent text-sidebar-accent-foreground" ? "bg-sidebar-accent text-sidebar-accent-foreground"
: "text-sidebar-foreground hover:bg-sidebar-accent/50", : "text-sidebar-foreground hover:bg-sidebar-accent/50",
collapsed ? "justify-center" : "justify-start" collapsed ? "justify-center" : "justify-start"