Skip to content

Commit 89e60ff

Browse files
hasparushasparus
committed
Add Navbar
1 parent 2f960c4 commit 89e60ff

File tree

5 files changed

+143
-21
lines changed

5 files changed

+143
-21
lines changed

‎src/app/conf/2025/components/hero/index.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,16 @@ export function Hero() {
5656

5757
function DateAndLocation() {
5858
return (
59-
<div className="flex flex-col gap-4 md:flex-row md:gap-6">
59+
<div className="flex flex-col gap-4 typography-body-md md:flex-row md:gap-6">
6060
<div className="flex items-center gap-2">
61-
<CalendarIcon className="size-6" />
61+
<CalendarIcon className="size-5 sm:size-6" />
6262
<time dateTime="2025-09-08">September 08</time>
6363
<span>-</span>
6464
<time dateTime="2025-09-10">10, 2025</time>
6565
</div>
6666
<div className="flex items-center gap-2">
67-
<PinIcon className="size-6" />
68-
<address className="not-italic typography-body-md">
69-
Amsterdam, Netherlands
70-
</address>
67+
<PinIcon className="size-5 sm:size-6" />
68+
<address className="not-italic">Amsterdam, Netherlands</address>
7169
</div>
7270
</div>
7371
)

‎src/app/conf/2025/components/navbar.tsx

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
"use client"
2+
3+
import {
4+
ReactElement,
5+
ReactNode,
6+
useCallback,
7+
useEffect,
8+
useState,
9+
} from "react"
10+
import NextLink from "next/link"
11+
import { clsx } from "clsx"
12+
import { usePathname } from "next/navigation"
13+
14+
import { HamburgerIcon, CrossIcon } from "@/icons"
15+
16+
import { Badge } from "../../_components/badge"
17+
18+
export interface NavbarProps {
19+
links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[]
20+
year: number
21+
}
22+
23+
export function Navbar({ links, year }: NavbarProps): ReactElement {
24+
const pathname = usePathname()
25+
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false)
26+
27+
const handleDrawerClick = useCallback(() => {
28+
setMobileDrawerOpen(prev => !prev)
29+
}, [])
30+
31+
useEffect(() => {
32+
setMobileDrawerOpen(false)
33+
}, [pathname])
34+
35+
return (
36+
<>
37+
<div
38+
/* pink background "prelude" */ className={clsx(
39+
"top-0 h-[70px] w-full scale-y-105 bg-pri-base dark:bg-pri-darker",
40+
mobileDrawerOpen ? "static" : "absolute",
41+
)}
42+
/>
43+
<header
44+
// todo: not white, but ALWAYS contrasting color, either white or black depending on background
45+
className={clsx(
46+
"top-0 z-10 w-full border-b border-white/70 bg-white/20 font-mono text-white antialiased",
47+
mobileDrawerOpen ? "fixed" : "sticky",
48+
)}
49+
>
50+
<div
51+
/* navbar backdrop */ className="absolute inset-0 -z-10 backdrop-blur-[6.4px]"
52+
/>
53+
{/* todo: better backdrop */}
54+
<div className="container flex h-[70px] items-center justify-between gap-5">
55+
<div className="flex items-center gap-2 text-xl/none uppercase">
56+
<NextLink href="/">
57+
<GraphQLLogo className="h-6" />
58+
</NextLink>
59+
<span>/ GraphQLConf {year}</span>
60+
</div>
61+
62+
{mobileDrawerOpen && (
63+
<div
64+
onClick={handleDrawerClick}
65+
className="fixed inset-0 top-[71px] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
66+
/>
67+
)}
68+
69+
<nav
70+
className={clsx(
71+
"inset-0 z-20 flex gap-7 typography-menu max-lg:fixed max-lg:mt-[71px] max-lg:flex-col max-md:min-w-[50%] sm:max-lg:p-4 lg:items-end",
72+
mobileDrawerOpen
73+
? "translate-x-0 text-neu-900"
74+
: "text-white max-lg:translate-x-full",
75+
)}
76+
>
77+
<div className="flex w-full flex-col lg:mt-0 lg:block">
78+
{links.map(
79+
({ "aria-disabled": isDisabled, children, ...link }) => (
80+
<NextLink
81+
aria-disabled={isDisabled}
82+
key={link.href}
83+
{...link}
84+
// if external link, open in new tab
85+
{...(link.href.startsWith("https") && {
86+
target: "_blank",
87+
rel: "noopener noreferrer",
88+
})}
89+
className={clsx(
90+
"p-5 underline-offset-4 hover:underline aria-disabled:pointer-events-none max-lg:text-base",
91+
pathname === link.href && "underline",
92+
)}
93+
>
94+
{children}
95+
{isDisabled && (
96+
<sup className="ml-2">
97+
<Badge className="text-white">Soon</Badge>
98+
</sup>
99+
)}
100+
</NextLink>
101+
),
102+
)}
103+
</div>
104+
</nav>
105+
106+
<button
107+
className="z-40 ml-auto size-6 text-white lg:hidden"
108+
onClick={handleDrawerClick}
109+
>
110+
{mobileDrawerOpen ? <CrossIcon /> : <HamburgerIcon />}
111+
</button>
112+
</div>
113+
</header>
114+
</>
115+
)
116+
}
117+
118+
function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
119+
return (
120+
<svg viewBox="0 0 100 100" fill="currentColor" {...props}>
121+
<path
122+
fill-rule="evenodd"
123+
clip-rule="evenodd"
124+
d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"
125+
/>
126+
<circle cx="50" cy="9.3209" r="8.82" />
127+
<circle cx="85.2292" cy="29.6605" r="8.82" />
128+
<circle cx="85.2292" cy="70.3396" r="8.82" />
129+
<circle cx="50" cy="90.6791" r="8.82" />
130+
<circle cx="14.7659" cy="70.3396" r="8.82" />
131+
<circle cx="14.7659" cy="29.6605" r="8.82" />
132+
</svg>
133+
)
134+
}

‎src/app/conf/2025/layout.tsx

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { ReactElement, ReactNode } from "react"
22
import { Metadata } from "next"
3-
import { Header } from "../_components/header"
43
import { Footer } from "../_components/footer"
54
import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
65
import NextLink from "next/link"
76
import { NewFontsStyleTag } from "../../fonts"
87
import "../../colors.css"
8+
import { Navbar } from "./components/navbar"
99

1010
// @ts-expect-error: we want to import the same version as Nextra for the main page
1111
import { ThemeProvider } from "next-themes"
@@ -36,16 +36,8 @@ export default function Layout({
3636
return (
3737
<>
3838
<NewFontsStyleTag />
39-
<Header
40-
logo={
41-
<NextLink
42-
href="/conf/2025"
43-
className="nextra-logo flex items-center gap-2 text-white"
44-
>
45-
<GraphQLConf className="h-6" />
46-
<span className="select-none text-xl/none">2025</span>
47-
</NextLink>
48-
}
39+
<Navbar
40+
year={2025}
4941
links={[
5042
{ children: "Sponsor", href: "/conf/2025/#sponsors" },
5143
{ children: "Submit to Speak", href: "/conf/2025/#speakers" },
@@ -54,10 +46,9 @@ export default function Layout({
5446
{ children: "Resources", href: "/conf/2025/resources" },
5547
{ children: "FAQ", href: "/conf/2025/#faq" },
5648
]}
57-
is2025
5849
/>
5950
<ThemeProvider attribute="class">
60-
<div className="bg-neu-0 text-neu-900">{children}</div>
51+
<div className="bg-neu-0 text-neu-900 antialiased">{children}</div>
6152
</ThemeProvider>
6253
<Footer
6354
logo={

‎src/app/conf/_components/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function Button({
1919
return disabled ? (
2020
<span
2121
className={clsx(
22-
"inline-flex w-fit cursor-default whitespace-nowrap rounded border-0 px-6 py-2 text-center text-sm no-underline transition ease-in-out sm:text-base",
22+
"inline-flex w-fit cursor-default whitespace-nowrap rounded border-0 px-6 py-2 text-center text-sm no-underline subpixel-antialiased transition ease-in-out sm:text-base",
2323
"bg-gray-400 font-medium text-white",
2424
className,
2525
)}

‎tailwind.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@ const config: Config = {
118118
},
119119
".typography-body-md": {
120120
fontSize: "14px",
121-
fontWeight: "300",
122121
"@screen md": {
123122
fontSize: "16px",
124123
},

0 commit comments

Comments
 (0)