Skip to content

new conf design — better navbar #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

new conf design — better navbar #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
201f768
Bump navbar opacities
hasparus May 7, 2025
5214190
Make the Navbar okay
hasparus May 7, 2025
1626ddb
Add background strips per section
hasparus May 7, 2025
6abca31
Remove unused import
hasparus May 7, 2025
9e66889
Make the navbar more mobile friendly
hasparus May 7, 2025
5173e22
Make the navbar consistent color at the top
hasparus May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/conf/2025/components/hero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import heroPhoto from "./hero-photo.jpeg"

export function Hero() {
return (
<article className="relative isolate flex flex-col justify-center bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900">
<article className="gql-conf-navbar-strip before:dark:bg-blk/40 relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900">
<article className="relative">
<Stripes />
<div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
Expand Down Expand Up @@ -42,7 +42,7 @@ export function Hero() {
</div>
</div>
</article>
<div className="bg-[#000]">
<div className="bg-blk">
<Image
src={heroPhoto}
width={1920}
Expand Down
77 changes: 31 additions & 46 deletions src/app/conf/2025/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
"use client"

import {
ReactElement,
ReactNode,
useCallback,
useEffect,
useState,
} from "react"
import { ReactElement, useCallback, useEffect, useState } from "react"
import NextLink from "next/link"
import { clsx } from "clsx"
import { usePathname } from "next/navigation"
Expand All @@ -32,53 +26,55 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
setMobileDrawerOpen(false)
}, [pathname])

const navbarHeight = "70px"

return (
<>
<div
/* pink background "prelude" */ className={clsx(
className={clsx(
"top-0 w-full scale-y-105 bg-pri-base dark:bg-pri-darker",
mobileDrawerOpen ? "static" : "absolute",
)}
style={{
height: navbarHeight,
}}
/>
<div
// placeholder: the colors here on `before` must match the ones on Hero `before` strip
className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full before:bg-white/30 dark:bg-pri-darker dark:before:bg-blk/40"
/>
<header
// todo: not white, but ALWAYS contrasting color, either white or black depending on background
className={clsx(
"top-0 z-10 w-full bg-white/20 font-mono text-white antialiased",
"top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
mobileDrawerOpen ? "fixed" : "sticky",
)}
style={
{
"--navbar-h": navbarHeight,
} as {}
}
>
<BackdropBlur />
<div className="container flex h-[var(--navbar-h)] items-center justify-between gap-5">
<div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
<div className="flex items-center gap-2 text-xl/none uppercase">
<NextLink href="/">
<GraphQLLogo className="h-6" />
</NextLink>
<span>/ GraphQLConf {year}</span>
</div>

<div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-black/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
<p className="flex items-center gap-2 text-sm">
<time dateTime="2025-09-08">September 08</time>
<span>-</span>
<time dateTime="2025-09-10">10, 2025</time>
</p>
<address className="text-sm not-italic">
Amsterdam, Netherlands
</address>
</div>

{mobileDrawerOpen && (
<div
onClick={handleDrawerClick}
className="fixed inset-0 top-[calc(var(--navbar-h)+1px)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
className="fixed inset-0 top-[var(--navbar-h)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
/>
)}

<nav
className={clsx(
"inset-0 z-20 flex gap-7 typography-menu max-lg:fixed max-lg:mt-[calc(var(--navbar-h)+1px)] max-lg:flex-col max-md:min-w-[50%] sm:max-lg:p-4 lg:items-end",
mobileDrawerOpen
? "translate-x-0 text-neu-900"
: "text-white max-lg:translate-x-full",
mobileDrawerOpen ? "translate-x-0" : "max-lg:translate-x-full",
)}
>
<div className="flex w-full flex-col lg:mt-0 lg:block">
Expand Down Expand Up @@ -141,27 +137,16 @@ function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
}

function BackdropBlur() {
const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
const edgeMask =
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the glass "depth" in favor of a simple border, because making "ridges" separating the times would take me a bit, and I actually like it better with the border — less fancy and Apple-like, more brutalist.

image

"linear-gradient(to bottom, black 0, black 1.1px, transparent 1.1px)"
const mask = "linear-gradient(to bottom,#000 0% 50%, transparent 50% 100%)"
return (
<>
<div
// note: we can't use the background trick to reduce flickering, because we have many section
// background colors and big images, so we'd have to change the --bg var with javascript
className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]"
style={{
maskImage: mask,
WebkitMaskImage: mask,
}}
/>
<div
className="pointer-events-none absolute inset-0 -z-10 h-full translate-y-full bg-white/50 backdrop-blur-sm backdrop-brightness-200 backdrop-grayscale-[50%]"
style={{
maskImage: edgeMask,
WebkitMaskImage: edgeMask,
}}
/>
</>
<div
// note: we can't use the background trick to reduce flickering, because we have many section
// background colors and big images, so we'd have to change the --bg var with javascript
className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]"
style={{
maskImage: mask,
WebkitMaskImage: mask,
}}
/>
)
}
20 changes: 10 additions & 10 deletions src/app/conf/2025/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@ export default function Page() {
return (
<main className="gql-all-anchors-focusable antialiased">
<Hero />
<div className="gql-conf-container text-neu-900">
<div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/40">
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saihaj lmk if you think this should have a syntax like navbar-strip:bg-white/40 dark:navbar-strip:bg-blk/40 powered by matchUtilities (probably not worth it? I'm not sure)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is fine. Eventually when we migrate the full site this would get cleaned up

<RegisterToday className="md:mb-8 md:mt-24" />
<WhatToExpectSection className="md:mb-8 md:mt-24" />
<TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
</div>
<GetYourTicket />
<div className="gql-conf-container text-neu-900">
<div className="gql-conf-navbar-strip before:bg-white/40 before:dark:bg-pri-dark/[0.45]">
<GetYourTicket />
</div>
<div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/50">
<RegisterSection />
<Sponsors heading="Thanks to our 2024 sponsors!" />
<CallForProposals />
</div>
<div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
<Sponsor />
<Register />
<Venue />
</div>
<div className="gql-conf-container text-neu-900">
<div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
<Sponsor />
<Register />
<Venue />
</div>
<FAQ />
</div>
</main>
Expand Down
8 changes: 8 additions & 0 deletions src/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,3 +516,11 @@ div[id^="headlessui-menu-items"] {
.gql-conf-section {
@apply px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24 3xl:px-[240px];
}

.gql-conf-navbar-strip {
@apply relative [contain:paint] before:sticky before:top-0 before:z-[9] before:-mt-[var(--navbar-h)] before:block before:h-[var(--navbar-h)] before:w-full before:content-[''];
}

:root {
--navbar-h: 70px;
}
2 changes: 2 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ const config: Config = {
"neu-700": "hsl(var(--color-neu-700) / <alpha-value>)",
"neu-800": "hsl(var(--color-neu-800) / <alpha-value>)",
"neu-900": "hsl(var(--color-neu-900) / <alpha-value>)",

blk: "#000",
// #endregion new design system colors
},
backgroundImage: {
Expand Down
Loading