add fullscreen button to hide side navigation elements and widen content

Author: ldirer

packages/site/src/components/Navigation/Navigation.tsx

@@ -91,6 +91,7 @@ export const ConfigurablePrimaryNavigation = ({
   return (
     <>
       {open && !mobileOnly && headings && (
+        // overlay to dim content when hamburger menu is open on mobile
         <div
           className="fixed inset-0 z-30 bg-black opacity-50"
           style={{ marginTop: top }}

packages/site/src/components/Navigation/TopNav.tsx

@@ -16,6 +16,7 @@ import { LoadingBar } from './Loading.js';
 import { HomeLink } from './HomeLink.js';
 import { ActionMenu } from './ActionMenu.js';
 import { ExternalOrInternalLink } from './Link.js';
+import { FullScreenButton } from '@myst-theme/book/app/routes/fullScreenButton.js';
 
 export const DEFAULT_NAV_HEIGHT = 60;
 
@@ -149,6 +150,7 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
           <NavItems nav={nav} />
           <div className="flex-grow block"></div>
           {!hideSearch && <Search />}
+          <FullScreenButton />
           <ThemeButton />
           <div className="block sm:hidden">
             <ActionMenu actions={actions} />

themes/book/app/root.tsx

@@ -1,5 +1,6 @@
 import type { LinksFunction, V2_MetaFunction, LoaderFunction } from '@remix-run/node';
 import tailwind from '~/styles/app.css';
+import fullscreenCss from '~/styles/fullscreen.css';
 import thebeCoreCss from 'thebe-core/dist/lib/thebe-core.css';
 import { getConfig } from '~/utils/loaders.server';
 import type { SiteLoader } from '@myst-theme/common';
@@ -41,6 +42,7 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
 export const links: LinksFunction = () => {
   return [
     { rel: 'stylesheet', href: tailwind },
+    { rel: 'stylesheet', href: fullscreenCss },
     { rel: 'stylesheet', href: thebeCoreCss },
     {
       rel: 'stylesheet',

themes/book/app/routes/fullScreenButton.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { ArrowsPointingOutIcon } from '@heroicons/react/24/solid';
+import { ArrowsPointingInIcon } from '@heroicons/react/24/solid';
+export function FullScreenButton() {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const toggle = useCallback(() => {
+    setIsFullscreen((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    if (isFullscreen) {
+      document.body.classList.add('fullscreen');
+    } else {
+      document.body.classList.remove('fullscreen');
+    }
+
+    // Cleanup function to remove the class when component unmounts
+    return () => {
+      document.body.classList.remove('fullscreen');
+    };
+  }, [isFullscreen]);
+
+  const ToggledIcon = isFullscreen ? ArrowsPointingInIcon : ArrowsPointingOutIcon;
+
+  return (
+    <button
+      onClick={toggle}
+      className="h-8 w-8 ml-3 rounded-full aspect-square border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800"
+      title="Toggle fullscreen"
+      aria-label="Toggle fullscreen"
+      aria-pressed={isFullscreen}
+    >
+      <ToggledIcon className="h-full w-full p-0.5 text-text-slate-700 dark:text-slate-10" />
+    </button>
+  );
+}

themes/book/app/styles/fullscreen.css

@@ -0,0 +1,15 @@
+
+
+.fullscreen nav[aria-label="Table of Contents"] {
+  display: none;
+}
+.fullscreen nav[aria-label="Document Outline"] {
+  display: none;
+}
+
+
+
+body.fullscreen .article-grid > *, .article-left-grid > *, .article-center-grid > * {
+  /* make elements take more space in the parent grid. Overrides an existing rule in the app CSS. */
+  grid-column: page;
+}