Skip to content

Commit 554f71d

Browse files
wilcorreawilcorrea
committed
feat: Use DocsResponsiveSidebar on Examples
Implement DocsResponsiveSidebar on the Examples page to display packages in the left sidebar.
1 parent 6f07dc9 commit 554f71d

File tree

9 files changed

+185
-86
lines changed

9 files changed

+185
-86
lines changed

‎src/components/CodeExamples.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -129,22 +129,23 @@ const CodeExamples = () => {
129129
/>
130130
</div>
131131

132-
<div className="flex flex-col sm:flex-row-reverse gap-4 justify-center mt-16">
132+
<div className="flex flex-col sm:flex-row gap-4 justify-center mt-16">
133133
<Button
134134
size="lg"
135-
className="bg-gradient-primary shadow-glow"
136-
onClick={() => navigate("/docs")}
135+
className="bg-gradient-primary hover:shadow-glow hover:scale-105 transition-all duration-300 text-lg px-8 py-6"
136+
onClick={() => navigate("/docs/examples")}
137137
>
138-
<Play className="w-5 h-5 mr-2" />
139-
Começar Agora
138+
<Code className="w-5 h-5 mr-2" />
139+
Explorar Mais Exemplos
140140
</Button>
141141
<Button
142+
variant="outline"
142143
size="lg"
143-
className="bg-gradient-hero shadow-glow"
144-
onClick={() => navigate("/docs/examples")}
144+
className="text-lg px-8 py-6"
145+
onClick={() => navigate("/docs")}
145146
>
146-
<Code className="w-5 h-5 mr-2" />
147-
Explorar Mais Exemplos
147+
<Play className="w-5 h-5 mr-2" />
148+
Começar Agora
148149
</Button>
149150
</div>
150151
</div>

‎src/components/DocsResponsiveSidebar.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,12 @@ export function DocsResponsiveSidebar({
7373
return (
7474
<Sheet open={isOpen} onOpenChange={setIsOpen}>
7575
<SheetTrigger asChild>
76-
<Button variant="outline" size="icon" className="fixed top-36 right-4 z-50 lg:hidden">
77-
<Menu className="h-4 w-4" />
76+
<Button
77+
variant="outline"
78+
size="icon"
79+
className="fixed top-[138px] left-[8px] z-50 lg:hidden"
80+
>
81+
<Menu className="h-3 w-3" />
7882
</Button>
7983
</SheetTrigger>
8084
<SheetContent side="left" className="w-80">

‎src/components/Footer.tsx‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Code, GitPullRequestCreateArrow, Heart, Mail } from "lucide-react";
22
import { Link } from "react-router-dom";
33

4-
54
import { Soon } from "@/components/Soon.tsx";
65

76
const Footer = () => {
@@ -49,7 +48,7 @@ const Footer = () => {
4948

5049
<div className="container mx-auto relative z-10">
5150
<div className="flex flex-wrap justify-between gap-8 mb-8">
52-
<div className="px-2 min-w-[130px]">
51+
<div className="px-1 min-w-[130px]">
5352
<div className="flex items-center space-x-2 mb-4">
5453
<Link to="/" className="hover:opacity-80 transition-opacity">
5554
<img
@@ -62,7 +61,7 @@ const Footer = () => {
6261
<p className="text-muted-foreground">Ferramentas modernas para o dev moderno</p>
6362
</div>
6463

65-
<div className="px-2 min-w-[130px]">
64+
<div className="px-1 min-w-[130px]">
6665
<h3 className="font-semibold text-foreground mb-4">Pacotes</h3>
6766
<ul className="space-y-2">
6867
<li>
@@ -93,7 +92,53 @@ const Footer = () => {
9392
</ul>
9493
</div>
9594

96-
<div className="px-2 min-w-[130px]">
95+
<div className="px-1 min-w-[130px]">
96+
<h3 className="font-semibold text-foreground mb-4">Soluções</h3>
97+
<ul className="space-y-2">
98+
<li>
99+
<Link
100+
to="/docs/reference/tevun"
101+
className="text-muted-foreground hover:text-primary transition-colors"
102+
>
103+
Tevun
104+
</Link>
105+
</li>
106+
<li>
107+
<Link
108+
to="/docs/reference/http"
109+
className="text-muted-foreground hover:text-primary transition-colors"
110+
>
111+
Http
112+
</Link>
113+
</li>
114+
<li>
115+
<Link
116+
to="/docs/reference/dockerize"
117+
className="text-muted-foreground hover:text-primary transition-colors"
118+
>
119+
Dockerize
120+
</Link>
121+
</li>
122+
<li>
123+
<Link
124+
to="/docs/reference/dockerfile"
125+
className="text-muted-foreground hover:text-primary transition-colors"
126+
>
127+
Dockerfile
128+
</Link>
129+
</li>
130+
<li>
131+
<Link
132+
to="/docs/reference/arceau"
133+
className="text-muted-foreground hover:text-primary transition-colors"
134+
>
135+
Arceau
136+
</Link>
137+
</li>
138+
</ul>
139+
</div>
140+
141+
<div className="px-1 min-w-[130px]">
97142
<h3 className="font-semibold text-foreground mb-4">Recursos</h3>
98143
<ul className="space-y-2">
99144
<li>
@@ -123,7 +168,7 @@ const Footer = () => {
123168
</ul>
124169
</div>
125170

126-
<div className="px-2 min-w-[130px]">
171+
<div className="px-1 min-w-[130px]">
127172
<h3 className="font-semibold text-foreground mb-4">Comunidade</h3>
128173
<div className="flex space-x-4">
129174
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">

‎src/components/Header.tsx‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
DropdownMenuItem,
66
DropdownMenuTrigger,
77
} from "@/components/ui/dropdown-menu";
8-
import { useIsMobile } from "@/hooks/use-mobile";
98
import { useScrollDirection } from "@/hooks/use-scroll-direction";
9+
import { cn } from "@/lib/utils.ts";
1010
import { Github, Menu, Moon, Play, Sun } from "lucide-react";
1111
import { useTheme } from "next-themes";
1212
import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -15,7 +15,6 @@ const Header = () => {
1515
const { theme, setTheme } = useTheme();
1616
const navigate = useNavigate();
1717
const location = useLocation();
18-
const isMobile = useIsMobile();
1918
const scrollDirection = useScrollDirection();
2019

2120
const isActiveLink = (path: string) => {
@@ -46,43 +45,48 @@ const Header = () => {
4645
</div>
4746

4847
<nav className="hidden lg:flex items-center space-x-8">
48+
<Link
49+
to="/"
50+
className={cn(
51+
"transition-colors hover:text-primary",
52+
isActiveLink("/") ? "text-primary bold" : "text-muted-foreground",
53+
)}
54+
>
55+
Início
56+
</Link>
4957
<Link
5058
to="/constructo"
51-
className={`transition-colors hover:text-primary ${
52-
isActiveLink("/constructo")
53-
? "text-primary"
54-
: "text-muted-foreground"
55-
}`}
59+
className={cn(
60+
"transition-colors hover:text-primary",
61+
isActiveLink("/constructo") ? "text-primary" : "text-muted-foreground",
62+
)}
5663
>
5764
Constructo
5865
</Link>
5966
<Link
6067
to="/serendipity"
61-
className={`transition-colors hover:text-primary ${
62-
isActiveLink("/serendipity")
63-
? "text-primary"
64-
: "text-muted-foreground"
65-
}`}
68+
className={cn(
69+
"transition-colors hover:text-primary",
70+
isActiveLink("/serendipity") ? "text-primary" : "text-muted-foreground",
71+
)}
6672
>
6773
Serendipity
6874
</Link>
6975
<Link
7076
to="/effulgence"
71-
className={`transition-colors hover:text-primary ${
72-
isActiveLink("/effulgence")
73-
? "text-primary"
74-
: "text-muted-foreground"
75-
}`}
77+
className={cn(
78+
"transition-colors hover:text-primary",
79+
isActiveLink("/effulgence") ? "text-primary" : "text-muted-foreground",
80+
)}
7681
>
7782
Effulgence
7883
</Link>
7984
<Link
8085
to="/docs"
81-
className={`transition-colors hover:text-primary ${
82-
isActiveLink("/docs")
83-
? "text-primary"
84-
: "text-muted-foreground"
85-
}`}
86+
className={cn(
87+
"transition-colors hover:text-primary",
88+
isActiveLink("/docs") ? "text-primary" : "text-muted-foreground",
89+
)}
8690
>
8791
Documentação
8892
</Link>
@@ -101,63 +105,77 @@ const Header = () => {
101105
</Button>
102106

103107
{/* Mobile menu dropdown */}
104-
{isMobile && (
108+
<div className="flex lg:hidden">
105109
<DropdownMenu>
106110
<DropdownMenuTrigger asChild>
107111
<Button variant="ghost" size="icon">
108112
<Menu className="w-4 h-4" />
109113
</Button>
110114
</DropdownMenuTrigger>
111115
<DropdownMenuContent align="end" className="w-48 bg-background">
116+
<DropdownMenuItem asChild>
117+
<Link
118+
to="/"
119+
className={cn(
120+
"transition-colors hover:text-primary",
121+
isActiveLink("/") ? "text-primary bold" : "bold",
122+
)}
123+
>
124+
Início
125+
</Link>
126+
</DropdownMenuItem>
112127
<DropdownMenuItem asChild>
113128
<Link
114129
to="/constructo"
115-
className="w-full cursor-pointer"
130+
className={cn(
131+
"transition-colors hover:text-primary",
132+
isActiveLink("/constructo") ? "text-primary bold" : "bold",
133+
)}
116134
>
117135
Constructo
118136
</Link>
119137
</DropdownMenuItem>
120138
<DropdownMenuItem asChild>
121139
<Link
122140
to="/serendipity"
123-
className="w-full cursor-pointer"
141+
className={cn(
142+
"transition-colors hover:text-primary",
143+
isActiveLink("/serendipity") ? "text-primary bold" : "bold",
144+
)}
124145
>
125146
Serendipity
126147
</Link>
127148
</DropdownMenuItem>
128149
<DropdownMenuItem asChild>
129150
<Link
130151
to="/effulgence"
131-
className="w-full cursor-pointer"
152+
className={cn(
153+
"transition-colors hover:text-primary",
154+
isActiveLink("/effulgence") ? "text-primary bold" : "bold",
155+
)}
132156
>
133157
Effulgence
134158
</Link>
135159
</DropdownMenuItem>
136160
<DropdownMenuItem asChild>
137161
<Link
138162
to="/docs"
139-
className="w-full cursor-pointer"
163+
className={cn(
164+
"transition-colors hover:text-primary",
165+
isActiveLink("/docs") ? "text-primary bold" : "bold",
166+
)}
140167
>
141168
Documentação
142169
</Link>
143170
</DropdownMenuItem>
144-
<DropdownMenuItem asChild>
145-
<Link
146-
to="/docs"
147-
className="w-full cursor-pointer flex items-center"
148-
>
149-
<Play className="w-4 h-4 mr-2" />
150-
Começar
151-
</Link>
152-
</DropdownMenuItem>
153171
</DropdownMenuContent>
154172
</DropdownMenu>
155-
)}
173+
</div>
156174

157175
{/* Desktop "Começar" button - hidden on mobile */}
158176
<Button
159177
size="sm"
160-
className={`bg-gradient-primary shadow-elegant ${isMobile ? 'hidden' : ''}`}
178+
className="hidden lg:flex bg-gradient-primary hover:shadow-glow hover:scale-105 transition-all duration-300"
161179
onClick={() => navigate("/docs")}
162180
>
163181
<Play className="w-4 h-4 mr-2" />

‎src/pages/Docs.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
DropdownMenuTrigger,
88
} from "@/components/ui/dropdown-menu";
99
import { Button } from "@/components/ui/button";
10+
import { cn } from "@/lib/utils.ts";
1011
import { Menu } from "lucide-react";
1112
import { NavLink, Outlet, useLocation } from "react-router-dom";
1213

@@ -39,26 +40,25 @@ const Docs = () => {
3940
<div className="container mx-auto px-4">
4041
<div className="flex items-center justify-between">
4142
{/* Desktop navigation - hidden on mobile */}
42-
<nav className="hidden md:flex space-x-8">
43+
<nav className="hidden lg:flex space-x-8">
4344
{navigationItems.map(item => (
4445
<NavLink
4546
key={item.path}
4647
to={item.path}
47-
className={() =>
48-
`py-4 px-2 text-sm font-medium transition-colors hover:text-primary border-b-2 ${
49-
isActiveLink(item.path)
50-
? "text-primary border-primary"
51-
: "text-muted-foreground border-transparent hover:border-primary/50"
52-
}`
53-
}
48+
className={cn(
49+
"py-4 px-2 text-sm font-medium transition-colors hover:text-primary border-b-2",
50+
isActiveLink(item.path)
51+
? "text-primary border-primary"
52+
: "text-muted-foreground border-transparent hover:border-primary/50",
53+
)}
5454
>
5555
{item.label}
5656
</NavLink>
5757
))}
5858
</nav>
5959

6060
{/* Mobile dropdown menu */}
61-
<div className="md:hidden py-2">
61+
<div className="lg:hidden py-2">
6262
<DropdownMenu>
6363
<DropdownMenuTrigger asChild>
6464
<Button variant="ghost" size="sm" className="flex items-center space-x-2">
@@ -69,7 +69,13 @@ const Docs = () => {
6969
<DropdownMenuContent align="start" className="w-48 bg-background">
7070
{navigationItems.map(item => (
7171
<DropdownMenuItem key={item.path} asChild>
72-
<NavLink to={item.path} className="w-full cursor-pointer">
72+
<NavLink
73+
to={item.path}
74+
className={cn(
75+
"w-full cursor-pointer",
76+
isActiveLink(item.path) ? "text-primary" : "",
77+
)}
78+
>
7379
{item.label}
7480
</NavLink>
7581
</DropdownMenuItem>

‎src/pages/Docs/Examples.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ const Examples = () => {
2222

2323
return (
2424
<div className="flex gap-8">
25-
<DocsResponsiveSidebar
25+
<DocsResponsiveSidebar
2626
items={sidebarItems}
2727
onItemClick={handleItemClick}
2828
title="Exemplos"
2929
description="Navegue pelos exemplos práticos"
3030
/>
3131

3232
{/* Conteúdo Principal - Coluna Direita */}
33-
<div className="flex-1 space-y-8 lg:border-l lg:pl-8">
33+
<div className="flex-1 space-y-8 lg:border-l lg:pl-8 pt-[16px]">
3434
<div className="space-y-4">
3535
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
3636
Exemplos Práticos

0 commit comments

Comments
 (0)