🍔 Remove TOC hamburger icon when TOC itself is hidden (#442)

jupyter-book · Jul 31, 2024 · 61e24ac · 61e24ac
1 parent 7d8819d
commit 61e24ac
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/.changeset/forty-panthers-cheer.md b/.changeset/forty-panthers-cheer.md
@@ -0,0 +1,7 @@
+---
+'@myst-theme/article': patch
+'@myst-theme/site': patch
+'@myst-theme/book': patch
+---
+
+Hide TOC hamburger when TOC is hidden, remove unused option
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/article/app/types.ts b/themes/article/app/types.ts
@@ -1,5 +1,4 @@
 export interface TemplateOptions {
-  hide_toc?: boolean;
   hide_outline?: boolean;
   hide_footer_links?: boolean;
   outline_maxdepth?: number;

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}