Skip to content

Commit c24631d

Browse files
brunobergherbrunobergher
committed
More professional (imo) nav
1 parent 2f1b94f commit c24631d

File tree

2 files changed

+132
-113
lines changed

2 files changed

+132
-113
lines changed

‎apps/web-roo-code/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default async function Home() {
8989
</div>
9090
</div>
9191
</section>
92-
<div id="features">
92+
<div id="product">
9393
<Features />
9494
</div>
9595
<div id="testimonials">

‎apps/web-roo-code/src/components/chromes/nav-bar.tsx‎

Lines changed: 131 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import { useState } from "react"
88
import { RxGithubLogo } from "react-icons/rx"
99
import { VscVscode } from "react-icons/vsc"
1010
import { HiMenu } from "react-icons/hi"
11-
import { IoClose } from "react-icons/io5"
1211

1312
import { EXTERNAL_LINKS } from "@/lib/constants"
1413
import { useLogoSrc } from "@/lib/hooks/use-logo-src"
1514
import { ScrollButton } from "@/components/ui"
1615
import ThemeToggle from "@/components/chromes/theme-toggle"
16+
import { ChevronDown, Cloud, X } from "lucide-react"
1717

1818
interface NavBarProps {
1919
stars: string | null
@@ -26,56 +26,61 @@ export function NavBar({ stars, downloads }: NavBarProps) {
2626

2727
return (
2828
<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
29-
<div className="container mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
29+
<div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
3030
<div className="flex items-center">
3131
<Link href="/" className="flex items-center">
3232
<Image src={logoSrc} alt="Roo Code Logo" width={120} height={40} className="h-8 w-auto" />
3333
</Link>
3434
</div>
3535

3636
{/* Desktop Navigation */}
37-
<nav className="hidden text-sm font-medium md:flex md:items-center md:space-x-3 xl:space-x-8">
38-
{/* note: features and testimonials links are hidden for screen sizes smaller than lg */}
37+
<nav className="grow ml-6 hidden text-sm font-medium md:flex md:items-center">
3938
<ScrollButton
40-
targetId="features"
41-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
42-
Features
39+
targetId="product"
40+
className="text-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
41+
Product
4342
</ScrollButton>
44-
<ScrollButton
45-
targetId="testimonials"
46-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
47-
Testimonials
48-
</ScrollButton>
49-
<Link
50-
href="/evals"
51-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
52-
Evals
53-
</Link>
5443
<Link
5544
href="/enterprise"
56-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
45+
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
5746
Enterprise
5847
</Link>
5948
<a
6049
href={EXTERNAL_LINKS.DOCUMENTATION}
6150
target="_blank"
62-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
51+
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
6352
Docs
6453
</a>
65-
<a
66-
href={EXTERNAL_LINKS.DISCORD}
67-
target="_blank"
68-
rel="noopener noreferrer"
69-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
70-
Community
71-
</a>
72-
<a
73-
href={EXTERNAL_LINKS.CLOUD_APP}
74-
target="_blank"
75-
rel="noopener noreferrer"
76-
className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
77-
Cloud
78-
</a>
54+
{/* Resources Dropdown */}
55+
<div className="relative group">
56+
<button className="flex items-center px-4 py-6 gap-1 text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
57+
Resources
58+
<ChevronDown className="size-3" />
59+
</button>
60+
{/* Dropdown Menu */}
61+
<div className="absolute left-0 top-12 mt-2 w-40 rounded-md border border-border bg-background py-1 shadow-lg opacity-0 -translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-200">
62+
<Link
63+
href="/evals"
64+
className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
65+
Evals
66+
</Link>
67+
<a
68+
href={EXTERNAL_LINKS.DISCORD}
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
72+
Discord
73+
</a>
74+
<a
75+
href={EXTERNAL_LINKS.SECURITY}
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
79+
onClick={() => setIsMenuOpen(false)}>
80+
Security Center
81+
</a>
82+
</div>
83+
</div>
7984
</nav>
8085

8186
<div className="hidden md:flex md:items-center md:space-x-4">
@@ -92,108 +97,122 @@ export function NavBar({ stars, downloads }: NavBarProps) {
9297
<Link
9398
href={EXTERNAL_LINKS.MARKETPLACE}
9499
target="_blank"
95-
className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:bg-primary/80 hover:shadow-lg hover:scale-105 md:flex">
100+
className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
96101
<VscVscode className="-mr-[2px] mt-[1px] h-4 w-4" />
97102
<span>
98103
Install <span className="font-black max-lg:text-xs">&middot;</span>
99104
</span>
100105
{downloads !== null && <span>{downloads}</span>}
101106
</Link>
107+
<a
108+
href={EXTERNAL_LINKS.CLOUD_APP}
109+
target="_blank"
110+
rel="noopener noreferrer"
111+
className="hidden items-center gap-1.5 rounded-md py-2 text-sm border border-primary-background px-4 font-medium text-primary-background transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
112+
<Cloud className="inline h-4 w-4" />
113+
Log in
114+
</a>
102115
</div>
103116

104117
{/* Mobile Menu Button */}
105118
<button
106119
aria-expanded={isMenuOpen}
107120
onClick={() => setIsMenuOpen(!isMenuOpen)}
108-
className="flex items-center justify-center rounded-full p-2 transition-colors hover:bg-accent md:hidden"
121+
className="relative z-10 flex items-center justify-center rounded-full p-2 transition-colors hover:bg-accent md:hidden"
109122
aria-label="Toggle mobile menu">
110-
{isMenuOpen ? <IoClose className="h-6 w-6" /> : <HiMenu className="h-6 w-6" />}
123+
<HiMenu className={`h-6 w-6 ${isMenuOpen ? "hidden" : "block"}`} />
124+
<X className={`h-6 w-6 ${isMenuOpen ? "block" : "hidden"}`} />
111125
</button>
112126
</div>
113127

114-
{/* Mobile Menu Panel */}
128+
{/* Mobile Menu Panel - Full Screen */}
115129
<div
116-
className={`absolute left-0 right-0 top-16 z-50 transform border-b border-border bg-background shadow-lg backdrop-blur-none transition-all duration-200 md:hidden ${isMenuOpen ? "translate-y-0 opacity-100" : "pointer-events-none -translate-y-2 opacity-0"}`}>
117-
<nav className="flex flex-col py-2">
118-
<ScrollButton
119-
targetId="features"
120-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
121-
onClick={() => setIsMenuOpen(false)}>
122-
Features
123-
</ScrollButton>
124-
<ScrollButton
125-
targetId="testimonials"
126-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
127-
onClick={() => setIsMenuOpen(false)}>
128-
Testimonials
129-
</ScrollButton>
130-
<Link
131-
href="/evals"
132-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
133-
onClick={() => setIsMenuOpen(false)}>
134-
Evals
135-
</Link>
136-
<Link
137-
href="/enterprise"
138-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
139-
onClick={() => setIsMenuOpen(false)}>
140-
Enterprise
141-
</Link>
142-
<a
143-
href={EXTERNAL_LINKS.SECURITY}
144-
target="_blank"
145-
rel="noopener noreferrer"
146-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
147-
onClick={() => setIsMenuOpen(false)}>
148-
Security
149-
</a>
150-
<a
151-
href={EXTERNAL_LINKS.DOCUMENTATION}
152-
target="_blank"
153-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
154-
onClick={() => setIsMenuOpen(false)}>
155-
Docs
156-
</a>
157-
<a
158-
href={EXTERNAL_LINKS.DISCORD}
159-
target="_blank"
160-
rel="noopener noreferrer"
161-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
162-
onClick={() => setIsMenuOpen(false)}>
163-
Community
164-
</a>
165-
<a
166-
href={EXTERNAL_LINKS.CLOUD_APP}
167-
target="_blank"
168-
rel="noopener noreferrer"
169-
className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
170-
onClick={() => setIsMenuOpen(false)}>
171-
Cloud
172-
</a>
173-
174-
<hr className="mx-8 my-2 border-t border-border/50" />
175-
176-
{/* Icons & Stats */}
177-
<div className="flex items-center justify-center gap-8 px-8 py-3">
130+
className={`fixed top-16 left-0 bg-background right-0 z-[100] transition-all duration-200 pointer-events-none md:hidden ${isMenuOpen ? "block h-dvh" : "hidden"}`}>
131+
<nav className="overflow-y-auto bg-background pointer-events-auto">
132+
{/* Main navigation items */}
133+
<div className="flex-1 py-4">
134+
<ScrollButton
135+
targetId="product"
136+
className="w-full px-8 py-5 text-left text-lg font-semibold text-foreground active:opacity-50"
137+
onClick={() => setIsMenuOpen(false)}>
138+
Product
139+
</ScrollButton>
178140
<Link
179-
href={EXTERNAL_LINKS.GITHUB}
180-
target="_blank"
181-
className="inline-flex items-center gap-2 rounded-md p-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
141+
href="/enterprise"
142+
className="block w-full px-8 py-5 text-left text-lg font-semibold text-foreground active:opacity-50"
182143
onClick={() => setIsMenuOpen(false)}>
183-
<RxGithubLogo className="h-5 w-5" />
184-
{stars !== null && <span>{stars}</span>}
144+
Enterprise
185145
</Link>
186-
<div className="flex items-center rounded-md p-2 transition-colors hover:bg-accent">
187-
<ThemeToggle />
146+
<a
147+
href={EXTERNAL_LINKS.DOCUMENTATION}
148+
target="_blank"
149+
className="block w-full px-8 py-5 text-left text-lg font-semibold text-foreground active:opacity-50"
150+
onClick={() => setIsMenuOpen(false)}>
151+
Docs
152+
</a>
153+
154+
{/* Resources Section */}
155+
<div className="mt-4 w-full">
156+
<div className="px-8 pb-2 pt-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
157+
Resources
158+
</div>
159+
<Link
160+
href="/evals"
161+
className="block w-full px-8 py-4 text-left text-lg font-medium text-foreground active:opacity-50"
162+
onClick={() => setIsMenuOpen(false)}>
163+
Evals
164+
</Link>
165+
<a
166+
href={EXTERNAL_LINKS.DISCORD}
167+
target="_blank"
168+
rel="noopener noreferrer"
169+
className="block w-full px-8 py-4 text-left text-lg font-medium text-foreground transition-colors hover:bg-accent"
170+
onClick={() => setIsMenuOpen(false)}>
171+
Discord
172+
</a>
173+
<a
174+
href={EXTERNAL_LINKS.SECURITY}
175+
target="_blank"
176+
rel="noopener noreferrer"
177+
className="block w-full px-8 py-5 text-left text-lg font-semibold text-foreground active:opacity-50"
178+
onClick={() => setIsMenuOpen(false)}>
179+
Security Center
180+
</a>
188181
</div>
189-
<Link
190-
href={EXTERNAL_LINKS.MARKETPLACE}
182+
</div>
183+
184+
{/* Bottom section with Cloud Login and stats */}
185+
<div className="border-t border-border">
186+
<div className="flex items-center justify-around px-6 pt-2">
187+
<Link
188+
href={EXTERNAL_LINKS.GITHUB}
189+
target="_blank"
190+
className="inline-flex items-center gap-2 rounded-md p-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
191+
onClick={() => setIsMenuOpen(false)}>
192+
<RxGithubLogo className="h-6 w-6" />
193+
{stars !== null && <span>{stars}</span>}
194+
</Link>
195+
<div className="flex items-center rounded-md p-3 transition-colors hover:bg-accent">
196+
<ThemeToggle />
197+
</div>
198+
<Link
199+
href={EXTERNAL_LINKS.MARKETPLACE}
200+
target="_blank"
201+
className="inline-flex items-center gap-2 rounded-md p-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
202+
onClick={() => setIsMenuOpen(false)}>
203+
<VscVscode className="h-6 w-6" />
204+
{downloads !== null && <span>{downloads}</span>}
205+
</Link>
206+
</div>
207+
<a
208+
href={EXTERNAL_LINKS.CLOUD_APP}
191209
target="_blank"
192-
className="inline-flex items-center gap-2 rounded-md p-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
210+
rel="noopener noreferrer"
211+
className="flex items-center justify-center gap-2 rounded-lg border border-primary bg-background p-4 mx-4 mb-4 text-base font-semibold text-primary"
193212
onClick={() => setIsMenuOpen(false)}>
194-
<VscVscode className="h-5 w-5" />
195-
{downloads !== null && <span>{downloads}</span>}
196-
</Link>
213+
<Cloud className="h-5 w-5" />
214+
Log in
215+
</a>
197216
</div>
198217
</nav>
199218
</div>

0 commit comments

Comments
 (0)