Merge pull request #1069 from marcchehab/patch-2 - Add SiteToc to Mob…

…ileNav. This PR adds the SiteToc to the MobileNav. It also fixes double type declarations in MobileNav by importing the interfaces from Nav. Adding SiteToc was then just a matter of uncommenting code that was there already.
datopian · May 31, 2024 · 30e7c63 · 30e7c63
2 parents d6bf344 + 1a8e7ac
commit 30e7c63
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/packages/core/src/ui/Nav/Nav.tsx b/packages/core/src/ui/Nav/Nav.tsx
@@ -53,7 +53,7 @@ export const Nav: React.FC<Props> = ({
     <nav className="flex justify-between">
       {/* Mobile navigation  */}
       <div className="mr-2 sm:mr-4 flex lg:hidden">
-        <NavMobile links={links}>{children}</NavMobile>
+        <NavMobile {...{title, links, social, search, defaultTheme, themeToggleIcon}}>{children}</NavMobile>
       </div>
       {/* Non-mobile navigation */}
       <div className="flex flex-none items-center">

diff --git a/packages/core/src/ui/Nav/NavMobile.tsx b/packages/core/src/ui/Nav/NavMobile.tsx
@@ -4,20 +4,16 @@ import { useRouter } from "next/router.js";
 import { useEffect, useState } from "react";
 import { SearchContext, SearchField } from "../Search";
 import { MenuIcon, CloseIcon } from "../Icons";
-import { NavLink, SearchProviderConfig } from "../types";
+import type { NavConfig, ThemeConfig } from "./Nav";
 
-interface Props extends React.PropsWithChildren {
-  author?: string;
-  links?: Array<NavLink>;
-  search?: SearchProviderConfig;
-}
+interface Props extends NavConfig, ThemeConfig, React.PropsWithChildren {}
 
-// TODO why mobile navigation only accepts author and regular nav accepts different things like title, logo, version
+// TODO: Search doesn't appear
 export const NavMobile: React.FC<Props> = ({
   children,
+  title,
   links,
   search,
-  author,
 }) => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
@@ -77,8 +73,8 @@ export const NavMobile: React.FC<Props> = ({
               legacyBehavior
             >
               {/* <Logomark className="h-9 w-9" /> */}
-              <div className="font-extrabold text-primary dark:text-primary-dark text-2xl ml-6">
-                {author}
+              <div className="font-extrabold text-primary dark:text-primary-dark text-lg ml-6">
+                {title}
               </div>
             </Link>
           </div>
@@ -106,9 +102,7 @@ export const NavMobile: React.FC<Props> = ({
               ))}
             </ul>
           )}
-          {/* <div className="pt-6 border border-t-2">
-                        {children}
-                    </div> */}
+          <div className="pt-6">{children}</div>
         </Dialog.Panel>
       </Dialog>
     </>