Skip to content

collapse sidebar on home page to keep focus on content, other pages have it open #531

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 3 commits into from
Closed

collapse sidebar on home page to keep focus on content, other pages have it open #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b625882
collapse sidebar on home page to keep focus on content, other pages h…
evantahler Oct 23, 2025
94c159a
remove client-only directive - it's a useEffect anyway
evantahler Oct 23, 2025
c95594d
revert
evantahler Oct 23, 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
33 changes: 33 additions & 0 deletions app/_components/sidebar-controller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
10 changes: 10 additions & 0 deletions app/_layouts/shared-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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");
Comment on lines +84 to +87
Copy link
Contributor Author

@evantahler evantahler Oct 23, 2025

Choose a reason for hiding this comment

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

We also need check on ssr if we are on the homepage or not to start with the sidebar collapsed or not, otherwise you see a jank animation post-pageload.


return (
<html dir="ltr" lang={lang} suppressHydrationWarning>
<Head
Expand Down Expand Up @@ -147,6 +154,7 @@ export default async function SharedLayout({
sidebar={{
defaultMenuCollapseLevel: 1,
autoCollapse: true,
defaultOpen: !isHomePage,
}}
themeSwitch={{
dark: dictionary.dark,
Expand All @@ -166,7 +174,9 @@ export default async function SharedLayout({
src="https://status.arcade.dev/embed/script.js"
strategy="afterInteractive"
/>

<PostHog>
<SidebarController />
<CustomLayout>{children}</CustomLayout>
</PostHog>
</Layout>
Expand Down
Loading