feat(layout): hide nav bar from query

Ref to #66

Mirror sites may use this to hide the nav bar when redirecting users
from their home page.

src/components/layout/index.tsx

@@ -15,6 +15,7 @@ import { SelectedMirrorProvider } from '@/contexts/current-selected-mirror';
 import { MirrorEnableHttpsProvider } from '@/contexts/mirror-enable-https';
 import { FrontMatterProvider } from '@/contexts/current-frontmatters';
 import { MirrorEnableSudoProvider } from '@/contexts/mirror-enable-sudo';
+import { NavEnableProvider } from '@/contexts/enable-nav';
 
 import type { MetaFromFrontMatters } from '@/types/front-matter';
 
@@ -131,55 +132,57 @@ export function Layout({ children, meta, toc = [], cname, isContent = false }: R
       <CurrentCnameProvider cname={cname || null}>
         {/** Always reset state after navigation */}
         <SelectedMirrorProvider key={asPath} cname={cname || null}>
-          <MirrorEnableHttpsProvider>
-            <MirrorEnableSudoProvider>
-              <div className={styles('container')}>
-                <div className={styles('sidenav_container')}>
-                  {/**
-                  * !!ALERT!! PERFORMANCE OPTIMIZATION HACK AHEAD!
-                  *
-                  * By adding more Suspense boundaries, React will use this as a signal to hydrate them asynchronously instead of doing everything in a single pass. This would reduce long tasks during hydration.
-                  * It's a bit risky because if something suspends, we'll render null. But we don't have anything suspending directly inside these trees. If we add something, we'll need to give it its own Suspense to prevent triggering these.
-                  */}
-                  <Suspense fallback={null}>
-                    <Nav />
-                  </Suspense>
-                </div>
-                <main className={styles('main')}>
-                  <div className={styles('main_spacer')} />
+          <NavEnableProvider>
+            <MirrorEnableHttpsProvider>
+              <MirrorEnableSudoProvider>
+                <div className={styles('container')}>
+                  <div className={styles('sidenav_container')}>
+                    {/**
+                    * !!ALERT!! PERFORMANCE OPTIMIZATION HACK AHEAD!
+                    *
+                    * By adding more Suspense boundaries, React will use this as a signal to hydrate them asynchronously instead of doing everything in a single pass. This would reduce long tasks during hydration.
+                    * It's a bit risky because if something suspends, we'll render null. But we don't have anything suspending directly inside these trees. If we add something, we'll need to give it its own Suspense to prevent triggering these.
+                    */}
+                    <Suspense fallback={null}>
+                      <Nav />
+                    </Suspense>
+                  </div>
+                  <main className={styles('main')}>
+                    <div className={styles('main_spacer')} />
 
-                  {isContent && meta && <Header title={meta.title} />}
+                    {isContent && meta && <Header title={meta.title} />}
 
-                  <div className={styles('content_wrapper')}>
-                    <div className={styles('content_inner')}>
-                      {children}
+                    <div className={styles('content_wrapper')}>
+                      <div className={styles('content_inner')}>
+                        {children}
 
-                      {isContent && <MetadataCard />}
+                        {isContent && <MetadataCard />}
+                      </div>
                     </div>
-                  </div>
 
-                  <Footer />
-                </main>
-                <div className={styles('toc')}>
-                  {/**
-                  * !!ALERT!! PERFORMANCE OPTIMIZATION HACK AHEAD!
-                  * No fallback UI so need to be careful not to suspend directly inside.
-                  */}
+                    <Footer />
+                  </main>
+                  <div className={styles('toc')}>
+                    {/**
+                    * !!ALERT!! PERFORMANCE OPTIMIZATION HACK AHEAD!
+                    * No fallback UI so need to be careful not to suspend directly inside.
+                    */}
+                    <Suspense fallback={null}>
+                      {toc.length > 0 && (
+                        <ToCAside key={asPath} toc={toc} />
+                      )}
+                    </Suspense>
+                  </div>
+                  <Suspense fallback={null}>
+                    <SearchCommandK />
+                  </Suspense>
                   <Suspense fallback={null}>
-                    {toc.length > 0 && (
-                      <ToCAside key={asPath} toc={toc} />
-                    )}
+                    <Dialog />
                   </Suspense>
                 </div>
-                <Suspense fallback={null}>
-                  <SearchCommandK />
-                </Suspense>
-                <Suspense fallback={null}>
-                  <Dialog />
-                </Suspense>
-              </div>
-            </MirrorEnableSudoProvider>
-          </MirrorEnableHttpsProvider>
+              </MirrorEnableSudoProvider>
+            </MirrorEnableHttpsProvider>
+          </NavEnableProvider>
         </SelectedMirrorProvider>
       </CurrentCnameProvider>
     </FrontMatterProvider>

src/components/layout/nav/index.tsx

@@ -12,6 +12,8 @@ import Sidebar from './sidebar';
 import DarkModeSwitch from '../darkmode-switch';
 import { SearchButtonInSideNav, SearchButtonOnMobile } from '../../search/button';
 
+import { useNavEnabled } from '@/contexts/enable-nav';
+
 const styles = style9.create({
   container: {
     position: 'sticky',
@@ -156,6 +158,9 @@ const styles = style9.create({
       paddingRight: '20px',
       paddingBottom: '24px'
     }
+  },
+  hide_nav: {
+    display: 'none'
   }
 });
 
@@ -196,8 +201,11 @@ function Nav() {
     };
   }, []);
 
+  // hide nav bar
+  const navEnabled = useNavEnabled();
+
   return (
-    <div className={styles('container', isOpen && 'container_open')}>
+    <div className={styles('container', isOpen && 'container_open', !navEnabled && 'hide_nav')}>
       <div className={styles('header', isOpen && 'header_open')}>
         <div className={styles('header_inner')}>
           <button

src/contexts/enable-nav.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const NavEnabledContext = createContext<boolean>(true);
+
+export const useNavEnabled = () => useContext(NavEnabledContext);
+
+export const NavEnableProvider = ({ children }: React.PropsWithChildren<unknown>) => {
+  const [navEnabled, setNavEnabled] = useState<boolean>(true);
+
+  const router = useRouter();
+  useEffect(() => {
+    const navFromUrlQuery = router.query.nav;
+    if (navFromUrlQuery === '0') {
+      setNavEnabled(false);
+    }
+  }, [router.query.nav]);
+
+  return (
+    <NavEnabledContext.Provider value={navEnabled}>
+      {children}
+    </NavEnabledContext.Provider>
+  );
+};