fix(mobile): Fix broken mobile navigation menu

src/components/focus-active-link.tsx

@@ -1,5 +1,6 @@
 'use client';
 import {useEffect} from 'react';
+import {usePathname} from 'next/navigation';
 
 type Props = {
   activeLinkSelector: string;
@@ -96,3 +97,16 @@ export function ScrollActiveLink({activeLinkSelector}: Props) {
   // don't render anything, just exist as a client-side component for the useEffect.
   return null;
 }
+
+/** Uncheck the sidebar toggle checkbox whenever the route changes, closing it on mobile. */
+export function CloseSidebarOnNavigation({sidebarToggleId}: {sidebarToggleId: string}) {
+  const pathname = usePathname();
+  useEffect(() => {
+    const checkbox = document.getElementById(sidebarToggleId) as HTMLInputElement | null;
+    if (checkbox) {
+      checkbox.checked = false;
+      checkbox.dispatchEvent(new Event('change'));
+    }
+  }, [pathname, sidebarToggleId]);
+  return null;
+}

src/components/mobileMenu/index.tsx

@@ -34,30 +34,34 @@ export function MobileMenu({pathname, searchPlatforms}: Props) {
 
         <Popover.Portal>
           <Theme accentColor="iris">
-            <Popover.Content className={styles.PopoverContent} sideOffset={5}>
+            <Popover.Content className={styles.PopoverContent} sideOffset={5} align="end">
               <Box display={{xs: 'block', sm: 'none'}}>
-                <li className={styles.MenuItem}>
-                  <Search path={pathname} searchPlatforms={searchPlatforms} />
-                </li>
+                <ul className="list-none p-0 m-0">
+                  <li className={styles.MenuItem}>
+                    <Search path={pathname} searchPlatforms={searchPlatforms} />
+                  </li>
+                </ul>
                 <div className={styles.MenuSeparator} />
               </Box>
-              {mainSections.map(section => (
-                <li key={section.href} className={styles.MenuItem}>
-                  <Link href={section.href}>{section.label}</Link>
+              <ul className="list-none p-0 m-0">
+                {mainSections.map(section => (
+                  <li key={section.href} className={styles.MenuItem}>
+                    <Link href={section.href}>{section.label}</Link>
+                  </li>
+                ))}
+                <li className={styles.MenuItem}>
+                  <Link href="https://sentry.io/changelog/">Changelog</Link>
+                </li>
+                <li className={styles.MenuItem}>
+                  <Link href="https://sandbox.sentry.io/">Sandbox</Link>
+                </li>
+                <li className={styles.MenuItem}>
+                  <Link href="https://sentry.io/">Go to Sentry</Link>
+                </li>
+                <li className={styles.MenuItem}>
+                  <Link href="https://sentry.io/signup/">Get Started</Link>
                 </li>
-              ))}
-              <li className={styles.MenuItem}>
-                <Link href="https://sentry.io/changelog/">Changelog</Link>
-              </li>
-              <li className={styles.MenuItem}>
-                <Link href="https://sandbox.sentry.io/">Sandbox</Link>
-              </li>
-              <li className={styles.MenuItem}>
-                <Link href="https://sentry.io/">Go to Sentry</Link>
-              </li>
-              <li className={styles.MenuItem}>
-                <Link href="https://sentry.io/signup/">Get Started</Link>
-              </li>
+              </ul>
             </Popover.Content>
           </Theme>
         </Popover.Portal>

src/components/sidebar/developDocsSidebar.tsx

@@ -2,7 +2,7 @@ import {DocNode, nodeForPath} from 'sentry-docs/docTree';
 
 import styles from './style.module.scss';
 
-import {ScrollActiveLink} from '../focus-active-link';
+import {CloseSidebarOnNavigation, ScrollActiveLink} from '../focus-active-link';
 
 import {DynamicNav, toTree} from './dynamicNav';
 import {SidebarLink, SidebarSeparator} from './sidebarLink';
@@ -44,6 +44,7 @@ export function DevelopDocsSidebar({
   return (
     <aside className={`${styles.sidebar} p-3`} data-layout-anchor="left">
       <input type="checkbox" id={sidebarToggleId} className="hidden" />
+      <CloseSidebarOnNavigation sidebarToggleId={sidebarToggleId} />
       <style>{':root { --sidebar-width: 300px; }'}</style>
       <div className="flex flex-col items-stretch h-full min-h-0">
         <div className={styles.toc}>

src/components/sidebar/index.tsx

@@ -10,7 +10,7 @@ import {Platform} from 'sentry-docs/types';
 
 import styles from './style.module.scss';
 
-import {ScrollActiveLink} from '../focus-active-link';
+import {CloseSidebarOnNavigation, ScrollActiveLink} from '../focus-active-link';
 import {PlatformSelector} from '../platformSelector';
 import {VersionSelector} from '../versionSelector';
 
@@ -138,6 +138,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
             )}
           </div>
           <div className={`${styles.toc} px-3`}>
+            <CloseSidebarOnNavigation sidebarToggleId={sidebarToggleId} />
             <ScrollActiveLink activeLinkSelector={activeLinkSelector} />
             <SidebarNavigation path={path} />
           </div>
@@ -154,6 +155,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
   return (
     <aside className={`${styles.sidebar} py-3`} data-layout-anchor="left">
       <input type="checkbox" id={sidebarToggleId} className="hidden" />
+      <CloseSidebarOnNavigation sidebarToggleId={sidebarToggleId} />
       <style>{':root { --sidebar-width: 300px; }'}</style>
       <div className="flex flex-col items-stretch h-full min-h-0">
         <MobileSidebarNav platforms={basicPlatforms} />

src/components/sidebar/style.module.scss

@@ -55,7 +55,6 @@
     left: 0;
     top: var(--header-height, 80px);
     width: var(--sidebar-width);
-    height: calc(100vh - var(--header-height, 80px));
     display: flex;
 
     & + :global(.main-content) {