Skip to content

Commit b7cdc84

Browse files
wilcorreawilcorrea
committed
Implementar scroll-driven header
O header agora esconde para cima conforme a barra de rolagem desce, e reaparece quando a barra de rolagem sobe.
1 parent 554f71d commit b7cdc84

File tree

3 files changed

+200
-119
lines changed

3 files changed

+200
-119
lines changed

‎src/components/ResponsiveLayout.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { cn } from "@/lib/utils.ts";
2+
import React, { useRef } from "react";
3+
import { Menu, X } from "lucide-react";
4+
5+
interface ResponsiveLayoutProps {
6+
leftContent: React.ReactNode;
7+
rightContent: React.ReactNode;
8+
title?: string;
9+
}
10+
11+
const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
12+
leftContent,
13+
rightContent,
14+
title,
15+
}) => {
16+
const sidebarRef = useRef<HTMLDivElement>(null);
17+
18+
const handleToggle = () => {
19+
if (sidebarRef.current) {
20+
sidebarRef.current.classList.toggle("translate-x-0");
21+
sidebarRef.current.classList.toggle("-translate-x-full");
22+
}
23+
};
24+
25+
const handleClose = () => {
26+
if (sidebarRef.current) {
27+
sidebarRef.current.classList.remove("translate-x-0");
28+
sidebarRef.current.classList.add("-translate-x-full");
29+
}
30+
};
31+
32+
return (
33+
<div className="flex relative min-h-[400px]">
34+
<div
35+
ref={sidebarRef}
36+
className={cn(
37+
"h-full w-3/12 min-w-[240px] -translate-x-full transition-transform duration-100",
38+
"absolute top-0 left-0 z-10 bg-background p-[10px]",
39+
"lg:relative lg:block lg:bg-transparent lg:translate-x-0 lg:p-5",
40+
)}
41+
>
42+
<div className="flex justify-end lg:hidden">
43+
<button onClick={handleClose} className="hover:bg-red-300 rounded p-1 transition-colors">
44+
<X className="h-5 w-5" />
45+
</button>
46+
</div>
47+
<div>{leftContent}</div>
48+
</div>
49+
50+
<div className="w-full lg:w-9/12 p-[20px] lg:p-5">
51+
<div className="flex items-center gap-3 mb-4">
52+
<button
53+
onClick={handleToggle}
54+
className="lg:hidden shadow hover:shadow-md transition-all"
55+
>
56+
<Menu className="w-4 h-4" />
57+
</button>
58+
{title && (
59+
<h2 className="text-3xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
60+
{title}
61+
</h2>
62+
)}
63+
</div>
64+
<div>{rightContent}</div>
65+
</div>
66+
</div>
67+
);
68+
};
69+
70+
export default ResponsiveLayout;

‎src/pages/Docs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Docs = () => {
3636
>
3737
<Header />
3838
<div className="flex-1 flex flex-col">
39-
<div className="border-b border-border bg-background/50 backdrop-blur-sm sticky top-0 z-10">
39+
<div className="border-b-2 border-border bg-background/50 backdrop-blur-sm sticky top-0 z-10">
4040
<div className="container mx-auto px-4">
4141
<div className="flex items-center justify-between">
4242
{/* Desktop navigation - hidden on mobile */}
@@ -89,7 +89,7 @@ const Docs = () => {
8989

9090
<div className="flex-1 relative">
9191
<div className="absolute inset-0 bg-gradient-hero opacity-5"></div>
92-
<div className="container mx-auto px-4 py-8">
92+
<div>
9393
<Outlet />
9494
</div>
9595
</div>

‎src/pages/Docs/Introduction.tsx‎

Lines changed: 128 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { DocsResponsiveSidebar, type SidebarItem } from "@/components/DocsResponsiveSidebar";
1+
import { type SidebarItem } from "@/components/DocsResponsiveSidebar";
2+
import ResponsiveLayout from "@/components/ResponsiveLayout.tsx";
23
import { Badge } from "@/components/ui/badge";
34
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
5+
import { cn } from "@/lib/utils.ts";
46
import { Layers, Package, Wrench } from "lucide-react";
7+
import React from "react";
58

69
const Introduction = () => {
710
const scrollToSection = (id: string) => {
@@ -21,133 +24,141 @@ const Introduction = () => {
2124
];
2225

2326
return (
24-
<div className="flex gap-8">
25-
<DocsResponsiveSidebar
26-
items={sidebarItems}
27-
onItemClick={scrollToSection}
28-
title="Sumário da Introdução"
29-
description="Navegue pelo conteúdo da introdução"
30-
/>
31-
32-
{/* Conteúdo Principal */}
33-
<div className="flex-1 space-y-8 lg:border-l md:pl-8">
34-
<div className="space-y-4">
35-
<h2 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
36-
Começando do Começo
37-
</h2>
38-
<p className="text-xl text-muted-foreground">
39-
Bem-vindo à documentação oficial dos pacotes Devitools.
40-
</p>
27+
<ResponsiveLayout
28+
title={"Começando do Começo"}
29+
leftContent={
30+
<div>
31+
{sidebarItems.map(item => (
32+
<button
33+
key={item.id}
34+
onClick={() => scrollToSection(item.id)}
35+
className={cn(
36+
"block w-full text-left transition-colors py-1 hover:text-primary",
37+
item.level === 1 ? "ml-3 text-xs text-muted-foreground" : "text-sm",
38+
)}
39+
>
40+
{item.level === 1 ? `• ${item.label}` : item.label}
41+
</button>
42+
))}
4143
</div>
44+
}
45+
rightContent={
46+
<div className="space-y-8">
47+
<div className="space-y-4">
48+
<p className="text-xl text-muted-foreground">
49+
Bem-vindo à documentação oficial das soluções do Devitools.
50+
</p>
51+
</div>
4252

43-
<div className="prose prose-slate dark:prose-invert max-w-none">
44-
<h2 id="introducao">Introdução</h2>
45-
<p>
46-
O Devitools é um conjunto de ferramentas modernas para desenvolvimento PHP que visa
47-
simplificar e acelerar o processo de criação de aplicações robustas e escaláveis. Nossos
48-
pacotes fornecem soluções elegantes para os desafios mais comuns no desenvolvimento PHP
49-
contemporâneo.
50-
</p>
53+
<div className="prose prose-slate dark:prose-invert max-w-none">
54+
<h2 id="introducao">Introdução</h2>
55+
<p>
56+
O Devitools é um conjunto de ferramentas modernas para desenvolvimento PHP que visa
57+
simplificar e acelerar o processo de criação de aplicações robustas e escaláveis.
58+
Nossos pacotes fornecem soluções elegantes para os desafios mais comuns no
59+
desenvolvimento PHP contemporâneo.
60+
</p>
5161

52-
<p>
53-
Com uma arquitetura bem pensada e APIs intuitivas, o Devitools permite que
54-
desenvolvedores foquem no que realmente importa: criar valor para seus usuários. Nossos
55-
pacotes seguem as melhores práticas da comunidade PHP e são extensivamente testados para
56-
garantir a máxima confiabilidade.
57-
</p>
62+
<p>
63+
Com uma arquitetura bem pensada e APIs intuitivas, o Devitools permite que
64+
desenvolvedores foquem no que realmente importa: criar valor para seus usuários.
65+
Nossos pacotes seguem as melhores práticas da comunidade PHP e são extensivamente
66+
testados para garantir a máxima confiabilidade.
67+
</p>
5868

59-
<h3 id="requisitos">Requisitos do Sistema</h3>
60-
<ul>
61-
<li>PHP 8.1 ou superior</li>
62-
<li>Composer para gerenciamento de dependências</li>
63-
<li>Conhecimento básico de PHP orientado a objetos</li>
64-
<li>Familiaridade com padrões PSR (recomendado)</li>
65-
</ul>
66-
</div>
69+
<h3 id="requisitos">Requisitos do Sistema</h3>
70+
<ul>
71+
<li>PHP 8.1 ou superior</li>
72+
<li>Composer para gerenciamento de dependências</li>
73+
<li>Conhecimento básico de PHP orientado a objetos</li>
74+
<li>Familiaridade com padrões PSR (recomendado)</li>
75+
</ul>
76+
</div>
6777

68-
<div id="pacotes">
69-
<h2 className="text-2xl font-bold mb-6">Pacotes Principais</h2>
70-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
71-
<Card id="constructo" className="hover:shadow-lg transition-shadow">
72-
<CardHeader>
73-
<div className="flex items-center space-x-2">
74-
<Wrench className="h-6 w-6 text-primary" />
75-
<CardTitle>Constructo</CardTitle>
76-
</div>
77-
<CardDescription>Ferramentas fundamentais para projetos PHP</CardDescription>
78-
</CardHeader>
79-
<CardContent>
80-
<p className="text-sm text-muted-foreground mb-4">
81-
Sistema completo de serialização, validação e geração de dados fake para acelerar
82-
o desenvolvimento PHP.
83-
</p>
84-
<div className="flex flex-wrap gap-2">
85-
<Badge variant="secondary">Serialização</Badge>
86-
<Badge variant="secondary">Validação</Badge>
87-
<Badge variant="secondary">Testing</Badge>
88-
</div>
89-
</CardContent>
90-
</Card>
78+
<div id="pacotes">
79+
<h2 className="text-2xl font-bold mb-6">Pacotes Principais</h2>
80+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
81+
<Card id="constructo" className="hover:shadow-lg transition-shadow">
82+
<CardHeader>
83+
<div className="flex items-center space-x-2">
84+
<Wrench className="h-6 w-6 text-primary" />
85+
<CardTitle>Constructo</CardTitle>
86+
</div>
87+
<CardDescription>Ferramentas fundamentais para projetos PHP</CardDescription>
88+
</CardHeader>
89+
<CardContent>
90+
<p className="text-sm text-muted-foreground mb-4">
91+
Sistema completo de serialização, validação e geração de dados fake para
92+
acelerar o desenvolvimento PHP.
93+
</p>
94+
<div className="flex flex-wrap gap-2">
95+
<Badge variant="secondary">Serialização</Badge>
96+
<Badge variant="secondary">Validação</Badge>
97+
<Badge variant="secondary">Testing</Badge>
98+
</div>
99+
</CardContent>
100+
</Card>
91101

92-
<Card id="serendipity" className="hover:shadow-lg transition-shadow">
93-
<CardHeader>
94-
<div className="flex items-center space-x-2">
95-
<Package className="h-6 w-6 text-accent" />
96-
<CardTitle>Serendipity</CardTitle>
97-
</div>
98-
<CardDescription>Extensão otimizada para Hyperf</CardDescription>
99-
</CardHeader>
100-
<CardContent>
101-
<p className="text-sm text-muted-foreground mb-4">
102-
Ferramentas avançadas para desenvolvimento com Hyperf, incluindo workers, rotas e
103-
tratamento de erros.
104-
</p>
105-
<div className="flex flex-wrap gap-2">
106-
<Badge variant="secondary">Hyperf</Badge>
107-
<Badge variant="secondary">Workers</Badge>
108-
<Badge variant="secondary">Async</Badge>
109-
</div>
110-
</CardContent>
111-
</Card>
102+
<Card id="serendipity" className="hover:shadow-lg transition-shadow">
103+
<CardHeader>
104+
<div className="flex items-center space-x-2">
105+
<Package className="h-6 w-6 text-accent" />
106+
<CardTitle>Serendipity</CardTitle>
107+
</div>
108+
<CardDescription>Extensão otimizada para Hyperf</CardDescription>
109+
</CardHeader>
110+
<CardContent>
111+
<p className="text-sm text-muted-foreground mb-4">
112+
Ferramentas avançadas para desenvolvimento com Hyperf, incluindo workers, rotas
113+
e tratamento de erros.
114+
</p>
115+
<div className="flex flex-wrap gap-2">
116+
<Badge variant="secondary">Hyperf</Badge>
117+
<Badge variant="secondary">Workers</Badge>
118+
<Badge variant="secondary">Async</Badge>
119+
</div>
120+
</CardContent>
121+
</Card>
112122

113-
<Card id="effulgence" className="hover:shadow-lg transition-shadow">
114-
<CardHeader>
115-
<div className="flex items-center space-x-2">
116-
<Layers className="h-6 w-6 text-success" />
117-
<CardTitle>Effulgence</CardTitle>
118-
</div>
119-
<CardDescription>Extensão otimizada para Laravel</CardDescription>
120-
</CardHeader>
121-
<CardContent>
122-
<p className="text-sm text-muted-foreground mb-4">
123-
Integração completa com Laravel, incluindo Eloquent, controllers simplificados e
124-
middlewares otimizados.
125-
</p>
126-
<div className="flex flex-wrap gap-2">
127-
<Badge variant="secondary">Laravel</Badge>
128-
<Badge variant="secondary">Eloquent</Badge>
129-
<Badge variant="secondary">Controllers</Badge>
130-
</div>
131-
</CardContent>
132-
</Card>
123+
<Card id="effulgence" className="hover:shadow-lg transition-shadow">
124+
<CardHeader>
125+
<div className="flex items-center space-x-2">
126+
<Layers className="h-6 w-6 text-success" />
127+
<CardTitle>Effulgence</CardTitle>
128+
</div>
129+
<CardDescription>Extensão otimizada para Laravel</CardDescription>
130+
</CardHeader>
131+
<CardContent>
132+
<p className="text-sm text-muted-foreground mb-4">
133+
Integração completa com Laravel, incluindo Eloquent, controllers simplificados e
134+
middlewares otimizados.
135+
</p>
136+
<div className="flex flex-wrap gap-2">
137+
<Badge variant="secondary">Laravel</Badge>
138+
<Badge variant="secondary">Eloquent</Badge>
139+
<Badge variant="secondary">Controllers</Badge>
140+
</div>
141+
</CardContent>
142+
</Card>
143+
</div>
133144
</div>
134-
</div>
135145

136-
<div id="instalacao" className="bg-muted/50 rounded-lg p-6">
137-
<h3 className="text-lg font-semibold mb-3">Instalação Rápida</h3>
138-
<p className="text-muted-foreground mb-4">
139-
Instale os pacotes Devitools via Composer para começar a usar em seus projetos PHP.
140-
</p>
141-
<div className="bg-background rounded border p-4 font-mono text-sm">
142-
composer require devitools/constructo
143-
<br />
144-
composer require devitools/serendipity
145-
<br />
146-
composer require devitools/effulgence
146+
<div id="instalacao" className="bg-muted/50 rounded-lg p-6">
147+
<h3 className="text-lg font-semibold mb-3">Instalação Rápida</h3>
148+
<p className="text-muted-foreground mb-4">
149+
Instale os pacotes Devitools via Composer para começar a usar em seus projetos PHP.
150+
</p>
151+
<div className="bg-background rounded border p-4 font-mono text-sm">
152+
composer require devitools/constructo
153+
<br />
154+
composer require devitools/serendipity
155+
<br />
156+
composer require devitools/effulgence
157+
</div>
147158
</div>
148159
</div>
149-
</div>
150-
</div>
160+
}
161+
/>
151162
);
152163
};
153164

0 commit comments

Comments
 (0)