Skip to content

Commit 58daa52

Browse files
parbhatkapila4parbhatkapila4
committed
Navbar enhancements
1 parent 43e1623 commit 58daa52

File tree

3 files changed

+117
-104
lines changed

3 files changed

+117
-104
lines changed

‎src/app/pricing/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Link from "next/link"
22
import type { Metadata } from "next"
3-
import Navigation from "@/components/landing/Navigation"
43
import Footer from "@/components/landing/Footer"
54
import { Button } from "@/components/ui/button"
65
import { Badge } from "@/components/ui/badge"
@@ -70,9 +69,7 @@ export default function PricingPage() {
7069
<div className="relative min-h-screen w-full overflow-hidden">
7170
<BackgroundGlow />
7271
<div className="relative z-10 flex min-h-screen flex-col">
73-
<Navigation />
74-
75-
<main className="mx-auto w-full max-w-7xl flex-1 px-4 pt-16 pb-24 sm:px-6 lg:px-8">
72+
<main className="mx-auto w-full max-w-7xl flex-1 px-4 pt-24 pb-24 sm:px-6 lg:px-8">
7673
<section className="mx-auto max-w-4xl space-y-6 text-center">
7774
<Badge className="mx-auto border border-white/20 bg-white/10 text-white/90">Pricing</Badge>
7875
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Choose the plan that scales with your repo</h1>
@@ -131,7 +128,7 @@ export default function PricingPage() {
131128
</p>
132129
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
133130
<Button asChild size="lg">
134-
<Link href="mailto:hello@repodoc.dev">Talk to sales</Link>
131+
<Link href="mailto:parbhat@parbhat.dev">Talk to sales</Link>
135132
</Button>
136133
<Button asChild variant="ghost" size="lg" className="text-white hover:bg-white/10">
137134
<Link href="/about">Learn more about RepoDoc</Link>

‎src/components/landing/Navigation.tsx‎

Lines changed: 110 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,133 @@
11
"use client"
2-
import React, { useState } from 'react'
3-
import Link from 'next/link'
4-
import { Button } from "@/components/ui/button"
5-
import { HoverBorderGradient } from "@/components/ui/hover-border-gradient"
2+
3+
import { useState } from "react"
4+
import Link from "next/link"
5+
import { usePathname } from "next/navigation"
66
import { Menu, X } from "lucide-react"
7+
import { Button } from "@/components/ui/button"
78
import { RepoDocLogo } from "@/components/ui/repodoc-logo"
8-
import { useUser } from "@clerk/nextjs"
9+
import { useUser, UserButton, SignInButton } from "@clerk/nextjs"
10+
import { HoverBorderGradient } from "@/components/ui/hover-border-gradient"
11+
import { cn } from "@/lib/utils"
12+
13+
const navLinks = [
14+
{ href: "/", label: "Home" },
15+
{ href: "/about", label: "About" },
16+
{ href: "/pricing", label: "Pricing" },
17+
]
918

1019
export default function Navigation() {
1120
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
1221
const { isSignedIn } = useUser()
22+
const pathname = usePathname()
23+
24+
const handleToggle = () => setIsMobileMenuOpen((open) => !open)
1325

1426
return (
15-
<div className="sticky top-0 z-50 backdrop-blur-xl bg-black/20">
16-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
17-
<div className="flex justify-between items-center h-16">
18-
<div className="flex items-center space-x-3">
19-
<RepoDocLogo size="md" className="text-white" />
20-
<span className="text-xl font-semibold text-white tracking-tight">RepoDoc</span>
21-
</div>
22-
23-
{/* Desktop Navigation */}
24-
<div className="hidden md:flex items-center space-x-3">
25-
<Link href="/pricing">
26-
<Button variant="ghost" size="sm" className="text-white/80 hover:text-white hover:bg-white/10 rounded-xl px-4 py-2 transition-all duration-200">
27-
Pricing
28-
</Button>
29-
</Link>
30-
{isSignedIn ? (
31-
<Link href="/dashboard">
27+
<nav className="sticky top-0 z-50 bg-transparent backdrop-blur-xl">
28+
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
29+
<Link href="/" className="flex items-center gap-3">
30+
<RepoDocLogo size="md" className="text-white" />
31+
<span className="text-xl font-semibold text-white">RepoDoc</span>
32+
</Link>
33+
34+
<div className="flex items-center gap-4 md:order-2">
35+
{isSignedIn ? (
36+
<UserButton
37+
appearance={{
38+
elements: {
39+
userButtonAvatarBox:
40+
"h-9 w-9 border border-white/20 shadow-md shadow-blue-500/10",
41+
},
42+
}}
43+
afterSignOutUrl="/"
44+
/>
45+
) : (
46+
<div className="hidden items-center gap-3 md:flex">
47+
<SignInButton mode="modal">
48+
<Button variant="ghost" className="rounded-lg px-4 text-white/80 hover:text-white">
49+
Sign In
50+
</Button>
51+
</SignInButton>
52+
<Link href="/sign-up">
3253
<HoverBorderGradient
3354
containerClassName="rounded-2xl"
3455
as="button"
3556
className="dark:bg-black bg-white text-black dark:text-white flex items-center space-x-2 px-4 py-1"
3657
>
37-
<span className="font-medium">Dashboard</span>
58+
<span className="font-medium">Sign Up</span>
3859
</HoverBorderGradient>
3960
</Link>
40-
) : (
41-
<>
42-
<Link href="/sign-in">
43-
<Button variant="ghost" size="sm" className="text-white/80 hover:text-white hover:bg-white/10 rounded-xl px-4 py-2 transition-all duration-200">
44-
Sign In
45-
</Button>
46-
</Link>
47-
<Link href="/sign-up">
48-
<HoverBorderGradient
49-
containerClassName="rounded-2xl"
50-
as="button"
51-
className="dark:bg-black bg-white text-black dark:text-white flex items-center space-x-2 px-4 py-1"
52-
>
53-
<span className="font-medium">Sign Up</span>
54-
</HoverBorderGradient>
55-
</Link>
56-
</>
57-
)}
58-
</div>
61+
</div>
62+
)}
5963

60-
{/* Mobile Menu Button */}
61-
<div className="md:hidden">
62-
<Button
63-
variant="ghost"
64-
size="sm"
65-
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
66-
aria-label="Toggle mobile menu"
67-
className="text-white/80 hover:text-white hover:bg-white/10 rounded-xl p-2 transition-all duration-200"
68-
>
69-
{isMobileMenuOpen ? (
70-
<X className="w-5 h-5" />
71-
) : (
72-
<Menu className="w-5 h-5" />
73-
)}
74-
</Button>
75-
</div>
64+
<button
65+
type="button"
66+
onClick={handleToggle}
67+
className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-white/10 text-white/70 transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 md:hidden"
68+
aria-controls="primary-navigation"
69+
aria-expanded={isMobileMenuOpen}
70+
>
71+
<span className="sr-only">Toggle menu</span>
72+
{isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
73+
</button>
7674
</div>
7775

78-
{/* Mobile Navigation Menu */}
79-
{isMobileMenuOpen && (
80-
<div className="md:hidden glass-card backdrop-blur-xl">
81-
<div className="px-4 pt-4 pb-4 space-y-3">
82-
<Link href="/pricing" className="w-full">
83-
<Button variant="ghost" size="sm" className="w-full justify-start text-white/80 hover:text-white hover:bg-white/10 rounded-xl py-3 transition-all duration-200">
84-
Pricing
85-
</Button>
86-
</Link>
87-
{isSignedIn ? (
88-
<Link href="/dashboard" className="w-full">
89-
<HoverBorderGradient
90-
containerClassName="rounded-2xl w-full"
91-
as="button"
92-
className="dark:bg-black bg-white text-black dark:text-white flex items-center justify-center space-x-2 w-full py-3"
93-
>
94-
<span className="font-medium">Dashboard</span>
95-
</HoverBorderGradient>
96-
</Link>
97-
) : (
98-
<>
99-
<Link href="/sign-in" className="w-full">
100-
<Button variant="ghost" size="sm" className="w-full justify-start text-white/80 hover:text-white hover:bg-white/10 rounded-xl py-3 transition-all duration-200">
101-
Sign In
102-
</Button>
103-
</Link>
104-
<Link href="/sign-up" className="w-full">
105-
<HoverBorderGradient
106-
containerClassName="rounded-2xl w-full"
107-
as="button"
108-
className="dark:bg-black bg-white text-black dark:text-white flex items-center justify-center space-x-2 w-full py-3"
109-
>
110-
<span className="font-medium">Sign Up</span>
111-
</HoverBorderGradient>
76+
<div
77+
id="primary-navigation"
78+
className={cn(
79+
"w-full md:w-auto md:flex md:items-center md:justify-center md:order-1",
80+
isMobileMenuOpen ? "block" : "hidden"
81+
)}
82+
>
83+
<ul className="flex flex-col gap-2 rounded-2xl border border-white/10 bg-white/[0.03] p-4 text-sm font-medium text-white md:flex-row md:items-center md:gap-8 md:border-transparent md:bg-transparent md:p-0 md:text-base">
84+
{navLinks.map((link) => {
85+
const isActive = link.href !== "/" ? pathname.startsWith(link.href) : pathname === "/"
86+
const linkClasses = cn(
87+
"rounded-lg px-3 py-2 transition",
88+
isActive
89+
? "bg-white/10 text-white shadow-md shadow-blue-500/20 md:bg-transparent md:text-white md:underline md:decoration-blue-400 md:decoration-2 md:underline-offset-8"
90+
: "text-white/70 hover:bg-white/10 hover:text-white"
91+
)
92+
93+
if (link.external) {
94+
return (
95+
<li key={link.href}>
96+
<a href={link.href} className={linkClasses}>
97+
{link.label}
98+
</a>
99+
</li>
100+
)
101+
}
102+
103+
return (
104+
<li key={link.href}>
105+
<Link href={link.href} className={linkClasses} onClick={() => setIsMobileMenuOpen(false)}>
106+
{link.label}
112107
</Link>
113-
</>
114-
)}
115-
</div>
116-
</div>
117-
)}
108+
</li>
109+
)
110+
})}
111+
112+
{!isSignedIn && (
113+
<li className="md:hidden">
114+
<SignInButton mode="modal">
115+
<Button className="w-full rounded-lg bg-white text-black hover:bg-white/90">Sign In</Button>
116+
</SignInButton>
117+
</li>
118+
)}
119+
{!isSignedIn && (
120+
<li className="md:hidden">
121+
<Link href="/sign-up" onClick={() => setIsMobileMenuOpen(false)}>
122+
<Button variant="outline" className="w-full rounded-lg border-white/30 text-white hover:bg-white/10">
123+
Sign Up
124+
</Button>
125+
</Link>
126+
</li>
127+
)}
128+
</ul>
129+
</div>
118130
</div>
119-
</div>
131+
</nav>
120132
)
121133
}

‎src/middleware.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
22

33
const isPublicRoute = createRouteMatcher([
44
'/',
5+
'/about',
6+
'/pricing',
7+
'/privacy',
8+
'/terms',
59
'/sign-in(.*)',
610
'/sign-up(.*)',
711
'/api/webhook/stripe(.*)',
812
'/api/webhooks(.*)',
913
'/api/clerk(.*)',
1014
'/readme/(.*)',
11-
'/docs/(.*)'
15+
'/docs/(.*)',
1216
])
1317

1418
export default clerkMiddleware(async (auth, req) => {

0 commit comments

Comments
 (0)