chore: fix mobile nav in docs (#767)

Author: ascorbic

docs/src/components/Header/SidebarToggle.tsx

@@ -19,7 +19,7 @@ const MenuToggle: FunctionalComponent = () => {
       type="button"
       aria-pressed={sidebarShown ? "true" : "false"}
       id="menu-toggle"
-      onClick={() => setSidebarShown(!sidebarShown)}
+      onClick={() => setSidebarShown((show) => !show)}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

docs/src/components/PageContent/PageContent.astro

@@ -18,7 +18,7 @@ const { title, headings, githubEditUrl, githubRepo } = Astro.props;
   <section class="main-section">
     <h1 class="content-title" id="overview">{title}</h1>
     <nav class="block sm:hidden">
-      <TableOfContents client:media="(max-width: 50em)" headings={headings} />
+      <TableOfContents client:visible headings={headings} />
     </nav>
     {
       githubRepo ? (

docs/src/components/RightSidebar/RightSidebar.astro

@@ -14,7 +14,7 @@ const { headings, githubEditUrl } = Astro.props;
 
 <nav class="sidebar-nav" aria-labelledby="grid-right">
   <div class="sidebar-nav-inner">
-    <TableOfContents client:media="(min-width: 50em)" headings={headings} />
+    <TableOfContents client:visible headings={headings} />
     <MoreMenu editHref={githubEditUrl} />
     <a
       class="github-button"

docs/src/layouts/MainLayout.astro

@@ -109,21 +109,21 @@ const currentFile = `src/content/docs${currentPage.replace(/\/$/, "")}.md`;
           display: flex;
         }
       }
-    </style>
-    <style is:global>
-      .layout > * {
-        width: 100%;
-        height: 100%;
-      }
 
-      .mobile-sidebar-toggle {
+      :global(.mobile-sidebar-toggle) {
         overflow: hidden;
       }
 
-      .mobile-sidebar-toggle #grid-left {
+      :global(.mobile-sidebar-toggle) #grid-left {
         display: block;
         top: 2rem;
       }
     </style>
+    <style is:global>
+      .layout > * {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </body>
 </html>