[Docs Site] Refactor header styling (#20962)

* [Docs Site] Refactor header styling

* margin

Author: KianNH

src/components/HeaderDropdowns.tsx

@@ -10,14 +10,16 @@ import {
 import { useState } from "react";
 import { PiCaretDownBold } from "react-icons/pi";
 
+const links = [
+	{ label: "Docs Directory", href: "/products/" },
+	{
+		label: "APIs",
+		href: "https://developers.cloudflare.com/api/",
+	},
+	{ label: "SDKs", href: "/fundamentals/api/reference/sdks/" },
+];
+
 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/" },
@@ -81,12 +83,15 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 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>
+			{links.map(({ label, href }) => (
+				<a
+					key={href}
+					href={href}
+					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"
+				>
+					{label}
+				</a>
+			))}
 			{dropdowns.map((dropdown) => (
 				<Dropdown key={dropdown[0]} dropdown={dropdown} />
 			))}

src/components/overrides/Footer.astro

@@ -1,5 +1,8 @@
 ---
 import Default from "@astrojs/starlight/components/Footer.astro";
+import { Icon } from "@astrojs/starlight/components";
+import type { StarlightIcon } from "@astrojs/starlight/types";
+
 import OneTrust from "../OneTrust.astro";
 import FeedbackPrompt from "../FeedbackPrompt.tsx";
 
@@ -38,6 +41,24 @@ const groups = Object.entries({
 		{ text: "RPKI Toolkit", href: "https://rpki.cloudflare.com/" },
 		{ text: "Certificate Transparency", href: "https://ct.cloudflare.com/" },
 	],
+	Community: [
+		{ text: "X", href: "https://x.com/cloudflare", icon: "x.com" },
+		{
+			text: "Discord",
+			href: "http://discord.cloudflare.com/",
+			icon: "discord",
+		},
+		{
+			text: "YouTube",
+			href: "https://www.youtube.com/cloudflare",
+			icon: "youtube",
+		},
+		{
+			text: "GitHub",
+			href: "https://github.com/cloudflare/cloudflare-docs",
+			icon: "github",
+		},
+	],
 });
 
 const links = Object.entries({
@@ -69,7 +90,7 @@ if (
 }
 {!splash && <Default />}
 <div class="w-full">
-	<div class="grid grid-cols-2 gap-8 pb-10 pt-6 md:grid-cols-4">
+	<div class="grid grid-cols-2 gap-8 pb-10 pt-6 lg:grid-cols-5">
 		{
 			groups.map(([title, items]) => (
 				<ul class="flex w-full list-none flex-col gap-3 pl-0">
@@ -78,7 +99,11 @@ if (
 					</li>
 					{items.map((link) => (
 						<li class="text-sm">
-							<a href={link.href} class="!text-black no-underline">
+							<a
+								href={link.href}
+								class="flex items-center gap-2 !text-black no-underline"
+							>
+								{"icon" in link && <Icon name={link.icon as StarlightIcon} />}
 								{link.text}
 							</a>
 						</li>

src/components/overrides/Header.astro

@@ -2,7 +2,6 @@
 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";
@@ -14,18 +13,15 @@ import HeaderDropdowns from "../HeaderDropdowns.tsx";
 		<div id="docsearch">
 			<DocSearch />
 		</div>
-		<div id="right-group" class="hidden h-10 flex-wrap gap-x-8 overflow-hidden">
+		<div id="right-group" class="hidden h-10 flex-wrap gap-x-2 overflow-hidden">
 			<HeaderDropdowns client:idle />
 			<a
 				id="header-login-button"
 				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"
+				class="mr-2 flex items-center justify-center rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black no-underline"
 			>
-				Sign up / Log in
+				Log in
 			</a>
-			<div id="social-icons" class="flex items-center gap-4">
-				<SocialIcons />
-			</div>
 			<ThemeSelect />
 			<LanguageSelect />
 		</div>