[Docs Site] Adopt new header styling

astro.config.ts

@@ -103,11 +103,11 @@ export default defineConfig({
 			components: {
 				Footer: "./src/components/overrides/Footer.astro",
 				Head: "./src/components/overrides/Head.astro",
+				Header: "./src/components/overrides/Header.astro",
 				Hero: "./src/components/overrides/Hero.astro",
 				MarkdownContent: "./src/components/overrides/MarkdownContent.astro",
 				Sidebar: "./src/components/overrides/Sidebar.astro",
 				PageTitle: "./src/components/overrides/PageTitle.astro",
-				SocialIcons: "./src/components/overrides/SocialIcons.astro",
 				TableOfContents: "./src/components/overrides/TableOfContents.astro",
 			},
 			sidebar,

package.json

@@ -40,6 +40,7 @@
 		"@cloudflare/workers-types": "4.20250303.0",
 		"@codingheads/sticky-header": "1.0.2",
 		"@expressive-code/plugin-collapsible-sections": "0.40.2",
+		"@floating-ui/react": "0.27.5",
 		"@iarna/toml": "2.2.5",
 		"@marsidev/react-turnstile": "1.1.0",
 		"@octokit/webhooks-types": "7.6.1",

src/components/HeaderDropdowns.tsx

@@ -0,0 +1,95 @@
+import {
+	useFloating,
+	useInteractions,
+	useClick,
+	useDismiss,
+	shift,
+	offset,
+	autoUpdate,
+} from "@floating-ui/react";
+import { useState } from "react";
+import { PiCaretDownBold } from "react-icons/pi";
+
+const dropdowns = Object.entries({
+	"API & SDKs": [
+		{
+			label: "API documentation",
+			href: "https://developers.cloudflare.com/api/",
+		},
+		{ label: "SDKs", href: "/fundamentals/api/reference/sdks/" },
+	],
+	Help: [
+		{ label: "Help center", href: "https://support.cloudflare.com/" },
+		{ label: "Cloudflare status", href: "https://www.cloudflarestatus.com/" },
+		{ label: "Community", href: "https://community.cloudflare.com/" },
+	],
+});
+
+function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
+	const [label, pages] = dropdown;
+	const [isOpen, setIsOpen] = useState(false);
+
+	const { refs, floatingStyles, context } = useFloating({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		middleware: [shift(), offset(5)],
+		whileElementsMounted: autoUpdate,
+	});
+
+	const click = useClick(context);
+	const dismiss = useDismiss(context);
+
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		click,
+		dismiss,
+	]);
+
+	return (
+		<>
+			<button
+				ref={refs.setReference}
+				{...getReferenceProps()}
+				className="flex cursor-pointer items-center justify-center gap-2 rounded bg-transparent p-2 font-medium hover:bg-cl1-white hover:shadow-md dark:hover:bg-cl1-gray-0"
+			>
+				{label}
+				<PiCaretDownBold />
+			</button>
+			{isOpen && (
+				<ul
+					ref={refs.setFloating}
+					style={floatingStyles}
+					{...getFloatingProps()}
+					className="min-w-60 max-w-80 list-none rounded border border-cl1-gray-8 bg-cl1-white pl-0 shadow-md dark:border-cl1-gray-1 dark:bg-cl1-gray-0"
+				>
+					{pages.map((page) => (
+						<li key={page.href}>
+							<a
+								href={page.href}
+								className="8 block p-3 text-black no-underline hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1"
+								target={page.href.startsWith("https") ? "_blank" : undefined}
+							>
+								{page.label}
+							</a>
+						</li>
+					))}
+				</ul>
+			)}
+		</>
+	);
+}
+
+export default function HeaderDropdownsComponent() {
+	return (
+		<div className="flex gap-2 text-nowrap leading-6">
+			<a
+				href="/products/"
+				className="flex items-center justify-center rounded p-2 font-medium text-black no-underline hover:bg-cl1-white hover:shadow-md dark:hover:bg-cl1-gray-0"
+			>
+				Docs Directory
+			</a>
+			{dropdowns.map((dropdown) => (
+				<Dropdown key={dropdown[0]} dropdown={dropdown} />
+			))}
+		</div>
+	);
+}

src/components/overrides/Header.astro

@@ -0,0 +1,66 @@
+---
+import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
+import DocSearch from "@astrojs/starlight-docsearch/DocSearch.astro";
+import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
+import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
+import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
+
+import HeaderDropdowns from "../HeaderDropdowns.tsx";
+---
+
+<div class="flex h-full items-center justify-between gap-4">
+	<SiteTitle />
+	<div class="flex gap-8">
+		<div id="docsearch">
+			<DocSearch />
+		</div>
+		<div id="right-group" class="hidden h-10 flex-wrap gap-x-8 overflow-hidden">
+			<HeaderDropdowns client:idle />
+			<a
+				href="https://dash.cloudflare.com/"
+				class="flex items-center justify-center rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black no-underline"
+			>
+				Sign up / Log in
+			</a>
+			<div id="social-icons" class="flex items-center gap-4">
+				<SocialIcons />
+			</div>
+			<ThemeSelect />
+			<LanguageSelect />
+		</div>
+	</div>
+</div>
+
+<style>
+	:global(.site-title) {
+		gap: 0.5rem;
+		min-width: fit-content;
+		overflow: none;
+
+		span {
+			color: var(--sl-color-white);
+		}
+
+		img {
+			height: 1.25rem;
+		}
+	}
+
+	#social-icons {
+		--sl-icon-color: var(--sl-color-white);
+	}
+
+	:global(starlight-theme-select > label > select) {
+		line-height: 1.25rem;
+	}
+
+	@media screen and (min-width: 800px) {
+		#right-group {
+			display: flex;
+		}
+
+		#docsearch {
+			width: 20rem;
+		}
+	}
+</style>