From b62588224a5d23429459a5a44ba0768bc16e9006 Mon Sep 17 00:00:00 2001 From: Evan Tahler Date: Thu, 23 Oct 2025 11:26:08 -0700 Subject: [PATCH 1/3] collapse sidebar on home page to keep focus on content, other pages have it open --- app/_components/sidebar-controller.tsx | 33 ++++++++++++++++++++++++++ app/_layouts/shared-layout.tsx | 10 ++++++++ 2 files changed, 43 insertions(+) create mode 100644 app/_components/sidebar-controller.tsx diff --git a/app/_components/sidebar-controller.tsx b/app/_components/sidebar-controller.tsx new file mode 100644 index 000000000..8fd07a7ac --- /dev/null +++ b/app/_components/sidebar-controller.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import { useEffect } from "react"; + +export function SidebarController() { + const pathname = usePathname(); + + useEffect(() => { + // Check if we're on the home page (e.g., /en/home, /es/home, etc.) + const isHomePage = pathname?.endsWith("/home"); + + // Find the sidebar expand/collapse button + const sidebarButton = document.querySelector( + "button[aria-controls][aria-expanded]" + ) as HTMLButtonElement; + + if (sidebarButton) { + const isExpanded = sidebarButton.getAttribute("aria-expanded") === "true"; + + // Click the button if we need to change the state + if (isHomePage && isExpanded) { + // On home page, collapse if expanded + sidebarButton.click(); + } else if (!(isHomePage || isExpanded)) { + // On other pages, expand if collapsed + sidebarButton.click(); + } + } + }, [pathname]); + + return null; +} diff --git a/app/_layouts/shared-layout.tsx b/app/_layouts/shared-layout.tsx index dab5058a9..c822062ad 100644 --- a/app/_layouts/shared-layout.tsx +++ b/app/_layouts/shared-layout.tsx @@ -4,10 +4,12 @@ import CustomLayout from "@/app/_components/custom-layout"; import { Footer } from "@/app/_components/footer"; import { Logo } from "@/app/_components/logo"; import NavBarButton from "@/app/_components/nav-bar-button"; +import { SidebarController } from "@/app/_components/sidebar-controller"; import { TranslationBanner } from "@/app/_components/translation-banner"; import "@/app/globals.css"; import { Discord, Github } from "@arcadeai/design-system"; import { GoogleTagManager } from "@next/third-parties/google"; +import { headers } from "next/headers"; import Link from "next/link"; import Script from "next/script"; import { Head } from "nextra/components"; @@ -79,6 +81,11 @@ export default async function SharedLayout({ const dictionary = await getDictionary(lang); const pageMap = await getPageMap(`/${lang}`); + // Get the current pathname to determine initial sidebar state + const headersList = await headers(); + const pathname = headersList.get("x-pathname") || ""; + const isHomePage = pathname.endsWith("/home"); + return ( + + {children} From 94c159a3db731b7d27c5ae1202e8875952a8ac3a Mon Sep 17 00:00:00 2001 From: Evan Tahler Date: Thu, 23 Oct 2025 11:40:44 -0700 Subject: [PATCH 2/3] remove client-only directive - it's a useEffect anyway --- app/_components/sidebar-controller.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/_components/sidebar-controller.tsx b/app/_components/sidebar-controller.tsx index 8fd07a7ac..5166f4ddb 100644 --- a/app/_components/sidebar-controller.tsx +++ b/app/_components/sidebar-controller.tsx @@ -1,5 +1,3 @@ -"use client"; - import { usePathname } from "next/navigation"; import { useEffect } from "react"; From c95594db1bc755899c80ab0ed9a389b6dcd38434 Mon Sep 17 00:00:00 2001 From: Evan Tahler Date: Thu, 23 Oct 2025 11:42:16 -0700 Subject: [PATCH 3/3] revert --- app/_components/sidebar-controller.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/_components/sidebar-controller.tsx b/app/_components/sidebar-controller.tsx index 5166f4ddb..8fd07a7ac 100644 --- a/app/_components/sidebar-controller.tsx +++ b/app/_components/sidebar-controller.tsx @@ -1,3 +1,5 @@ +"use client"; + import { usePathname } from "next/navigation"; import { useEffect } from "react";