Skip to content

Commit f3472dc

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refatorar navegação da página Docs
Substitui o componente de tabs por links com borda inferior na cor primary. A div que contém os links também terá uma borda. As páginas de destino permanecerão transparentes. O centro da página Docs agora utiliza um Outlet para carregar as sub-páginas.
1 parent dfc26e4 commit f3472dc

File tree

2 files changed

+46
-57
lines changed

2 files changed

+46
-57
lines changed

‎src/App.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Toaster } from "@/components/ui/toaster";
22
import { Toaster as Sonner } from "@/components/ui/sonner";
33
import { TooltipProvider } from "@/components/ui/tooltip";
44
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5-
import { BrowserRouter, Routes, Route } from "react-router-dom";
5+
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
66
import { ThemeProvider } from "next-themes";
77
import ScrollToTop from "@/components/ScrollToTop";
88
import Index from "./pages/Index";
@@ -11,6 +11,11 @@ import Constructo from "./pages/Constructo";
1111
import Serendipity from "./pages/Serendipity";
1212
import Effulgence from "./pages/Effulgence";
1313
import Docs from "./pages/Docs";
14+
import DocsIntroducao from "./pages/docs/DocsIntroducao";
15+
import DocsGuias from "./pages/docs/DocsGuias";
16+
import DocsDicasTruques from "./pages/docs/DocsDicasTruques";
17+
import DocsEcossistema from "./pages/docs/DocsEcossistema";
18+
import DocsSobre from "./pages/docs/DocsSobre";
1419
import DocsConstructo from "./pages/DocsConstructo";
1520
import DocsSerendipity from "./pages/DocsSerendipity";
1621
import DocsEffulgence from "./pages/DocsEffulgence";
@@ -37,8 +42,14 @@ const App = () => (
3742
<Route path="/constructo" element={<Constructo />} />
3843
<Route path="/serendipity" element={<Serendipity />} />
3944
<Route path="/effulgence" element={<Effulgence />} />
40-
<Route path="/docs" element={<Docs />} />
41-
<Route path="/docs/:tab" element={<Docs />} />
45+
<Route path="/docs" element={<Docs />}>
46+
<Route index element={<Navigate to="/docs/introducao" replace />} />
47+
<Route path="introducao" element={<DocsIntroducao />} />
48+
<Route path="guias" element={<DocsGuias />} />
49+
<Route path="dicas-truques" element={<DocsDicasTruques />} />
50+
<Route path="ecossistema" element={<DocsEcossistema />} />
51+
<Route path="sobre" element={<DocsSobre />} />
52+
</Route>
4253
<Route path="/docs/constructo" element={<DocsConstructo />} />
4354
<Route path="/docs/serendipity" element={<DocsSerendipity />} />
4455
<Route path="/docs/effulgence" element={<DocsEffulgence />} />

‎src/pages/Docs.tsx‎

Lines changed: 32 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,44 @@
1-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
2-
import { useLocation, useNavigate } from "react-router-dom";
3-
import { useEffect } from "react";
1+
import { NavLink, Outlet } from "react-router-dom";
42
import Header from "@/components/Header";
53
import Footer from "@/components/Footer";
6-
import DocsIntroducao from "./docs/DocsIntroducao";
7-
import DocsGuias from "./docs/DocsGuias";
8-
import DocsDicasTruques from "./docs/DocsDicasTruques";
9-
import DocsEcossistema from "./docs/DocsEcossistema";
10-
import DocsSobre from "./docs/DocsSobre";
114

125
const Docs = () => {
13-
const location = useLocation();
14-
const navigate = useNavigate();
15-
16-
// Extrair a aba ativa da URL
17-
const currentTab = location.pathname.split('/docs/')[1] || 'introducao';
18-
19-
const handleTabChange = (value: string) => {
20-
navigate(`/docs/${value}`);
21-
};
22-
23-
// Redirecionar para /docs/introducao se estiver apenas em /docs
24-
useEffect(() => {
25-
if (location.pathname === '/docs') {
26-
navigate('/docs/introducao', { replace: true });
27-
}
28-
}, [location.pathname, navigate]);
6+
const navigationItems = [
7+
{ label: "Introdução", path: "/docs/introducao" },
8+
{ label: "Guias", path: "/docs/guias" },
9+
{ label: "Dicas & Truques", path: "/docs/dicas-truques" },
10+
{ label: "Ecossistema", path: "/docs/ecossistema" },
11+
{ label: "Sobre", path: "/docs/sobre" },
12+
];
2913

3014
return (
3115
<div className="min-h-screen flex flex-col" style={{ background: 'var(--gradient-background)' }}>
3216
<Header />
3317
<div className="flex-1 flex flex-col">
34-
<div className="container mx-auto px-4 py-8">
35-
<Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
36-
<TabsList className="grid w-full grid-cols-5 mb-8">
37-
<TabsTrigger value="introducao">Introdução</TabsTrigger>
38-
<TabsTrigger value="guias">Guias</TabsTrigger>
39-
<TabsTrigger value="dicas-truques">Dicas & Truques</TabsTrigger>
40-
<TabsTrigger value="ecossistema">Ecossistema</TabsTrigger>
41-
<TabsTrigger value="sobre">Sobre</TabsTrigger>
42-
</TabsList>
43-
44-
<TabsContent value="introducao" className="mt-0">
45-
<DocsIntroducao />
46-
</TabsContent>
47-
48-
<TabsContent value="guias" className="mt-0">
49-
<DocsGuias />
50-
</TabsContent>
51-
52-
<TabsContent value="dicas-truques" className="mt-0">
53-
<DocsDicasTruques />
54-
</TabsContent>
55-
56-
<TabsContent value="ecossistema" className="mt-0">
57-
<DocsEcossistema />
58-
</TabsContent>
59-
60-
<TabsContent value="sobre" className="mt-0">
61-
<DocsSobre />
62-
</TabsContent>
63-
</Tabs>
18+
<div className="border-b border-border bg-background/50 backdrop-blur-sm sticky top-0 z-10">
19+
<div className="container mx-auto px-4">
20+
<nav className="flex space-x-8">
21+
{navigationItems.map((item) => (
22+
<NavLink
23+
key={item.path}
24+
to={item.path}
25+
className={({ isActive }) =>
26+
`py-4 px-2 text-sm font-medium transition-colors hover:text-primary border-b-2 ${
27+
isActive
28+
? "text-primary border-primary"
29+
: "text-muted-foreground border-transparent hover:border-primary/50"
30+
}`
31+
}
32+
>
33+
{item.label}
34+
</NavLink>
35+
))}
36+
</nav>
37+
</div>
38+
</div>
39+
40+
<div className="flex-1 container mx-auto px-4 py-8">
41+
<Outlet />
6442
</div>
6543
</div>
6644
<Footer />

0 commit comments

Comments
 (0)