Make the Navbar okay

Author: hasparus

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

@@ -11,8 +11,9 @@ import blurBean from "./blur-bean-cropped.webp"
 import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
+  // gql-conf-navbar-strip dark:before:bg-[#000]/40 dark:before:bg-[#000]/40
   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 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 dark:before:bg-[#000]/40">
       <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">

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

@@ -32,43 +32,48 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
     setMobileDrawerOpen(false)
   }, [pathname])
 
-  const navbarHeight = "70px"
-
   return (
     <>
       <div
         className={clsx(
           "top-0 w-full scale-y-105 bg-pri-base dark:bg-pri-darker",
           mobileDrawerOpen ? "static" : "absolute",
         )}
-        style={{
-          height: navbarHeight,
-        }}
+      />
+      <div
+        // placeholder
+        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base dark:bg-pri-darker"
       />
       <header
         className={clsx(
-          "top-0 z-10 w-full border-b border-black/60 bg-white/40 font-mono text-neu-900 antialiased dark:border-white/80 dark:bg-black/40",
+          "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-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 border-x border-black/60 px-4 typography-menu dark:border-white/80">
+            <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]"
             />
           )}
 
@@ -138,7 +143,7 @@ function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
 }
 
 function BackdropBlur() {
-  const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
+  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

src/app/conf/2025/layout.tsx

@@ -5,7 +5,7 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
 import "../../colors.css"
-import { Navbar } from "./components/navbar"
+import { Navbar, NavbarBackgroundStrip } from "./components/navbar"
 
 // @ts-expect-error: we want to import the same version as Nextra for the main page
 import { ThemeProvider } from "next-themes"

src/globals.css

@@ -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 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;
+}