fix: hide TOC hamburger when TOC is hidden

jupyter-book · Jul 31, 2024 · 7ca75ea · 7ca75ea
1 parent 1e6269a
commit 7ca75ea
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/packages/site/src/components/Navigation/TopNav.tsx b/packages/site/src/components/Navigation/TopNav.tsx
@@ -143,7 +143,7 @@ export function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   );
 }
 
-export function TopNav() {
+export function TopNav({ hideToc }: { hideToc?: boolean }) {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
@@ -152,17 +152,19 @@ export function TopNav() {
     <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 fixed w-screen top-0 z-30 h-[60px]">
       <nav className="flex items-center justify-between flex-wrap max-w-[1440px] mx-auto">
         <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center">
-          <div className="block xl:hidden">
-            <button
-              className="flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
-              onClick={() => {
-                setOpen(!open);
-              }}
-            >
-              <MenuIcon width="2rem" height="2rem" className="m-1" />
-              <span className="sr-only">Open Menu</span>
-            </button>
-          </div>
+          {!hideToc && (
+            <div className="block xl:hidden">
+              <button
+                className="flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
+                onClick={() => {
+                  setOpen(!open);
+                }}
+              >
+                <MenuIcon width="2rem" height="2rem" className="m-1" />
+                <span className="sr-only">Open Menu</span>
+              </button>
+            </div>
+          )}
           <HomeLink name={title} logo={logo} logoDark={logo_dark} logoText={logo_text} />
         </div>
         <div className="flex items-center flex-grow w-auto">

diff --git a/themes/book/app/routes/$.tsx b/themes/book/app/routes/$.tsx
@@ -86,7 +86,7 @@ export function ArticlePageAndNavigation({
   const { container, toc } = useTocHeight(top, inset);
   return (
     <UiStateProvider>
-      <TopNav />
+      <TopNav hideToc={ hide_toc } />
       <Navigation
         tocRef={toc}
         hide_toc={hide_toc}