Merge pull request #36 from steel-dev/dane/feat-navigation-expand-mobile-menu-visibility-to-desktop

Author: danew

components/layout/mobile-menu-button.tsx

@@ -18,7 +18,7 @@ export function MobileMenuButton({ tree }: MobileMenuButtonProps) {
       <Button
         variant="ghost"
         size="icon"
-        className="h-8 w-8 md:hidden"
+        className="h-8 w-8 xl:hidden"
         onClick={open}
         aria-label="Open navigation menu"
         aria-expanded={isOpen}

components/layout/mobile-navigation.tsx

@@ -5,7 +5,7 @@ import { TreeContextProvider } from 'fumadocs-ui/contexts/tree';
 import { ChevronRight, X } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { baseOptions } from '@/app/layout.config';
 import { Sidebar } from '@/components/layouts/docs';
 import {
@@ -17,6 +17,7 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { DocsLogo } from '@/components/ui/icon';
+import { isActive } from '@/lib/is-active';
 import { cn } from '@/lib/utils';
 import { SearchToggle } from '../layout/search-toggle';
 
@@ -28,7 +29,6 @@ interface MobileNavigationProps {
 
 export function MobileNavigation({ isOpen = false, onClose, tree }: MobileNavigationProps) {
   const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
-  const [showMainMenu, setShowMainMenu] = useState(false);
   const pathname = usePathname();
 
   const isInDocsContext = !!tree;
@@ -37,12 +37,50 @@ export function MobileNavigation({ isOpen = false, onClose, tree }: MobileNaviga
 
   const handleClose = () => {
     setActiveSubmenu(null);
-    setShowMainMenu(false);
     onClose?.();
   };
 
+  const renderMainLinks = () => (
+    <>
+      {baseOptions.links
+        ?.filter((item) => {
+          if (!('url' in item) || !item.url) return true;
+
+          const activeMode =
+            'active' in item ? (item.active ?? 'url') : item.type === 'menu' ? 'nested-url' : 'url';
+          if (activeMode === 'none') return true;
+
+          return !isActive(item.url, pathname, activeMode === 'nested-url');
+        })
+        .map((item, index) => (
+          <div key={index}>
+            {item.type === 'menu' ? (
+              <button
+                type="button"
+                className="w-full flex items-center justify-between px-2 py-2 text-[0.75rem] leading-none tracking-wide font-mono font-bold hover:bg-accent transition-colors text-left"
+                onClick={() => setActiveSubmenu(String(item.text))}
+              >
+                <span className="text-muted-foreground">{item.text}</span>
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              </button>
+            ) : (
+              'url' in item && (
+                <Link
+                  href={item.url as string}
+                  onClick={handleClose}
+                  className="flex items-center justify-between px-2 py-2 text-[0.75rem] leading-none tracking-wide font-mono font-bold hover:bg-accent transition-colors"
+                >
+                  {item.text}
+                </Link>
+              )
+            )}
+          </div>
+        ))}
+    </>
+  );
+
   return (
-    <div className="fixed inset-0 z-50 md:hidden">
+    <div className="fixed inset-0 z-50 xl:hidden">
       <div
         className="fixed inset-0 bg-black/50 transition-opacity duration-200"
         onClick={handleClose}
@@ -73,7 +111,6 @@ export function MobileNavigation({ isOpen = false, onClose, tree }: MobileNaviga
                         type="button"
                         onClick={() => {
                           setActiveSubmenu(null);
-                          setShowMainMenu(true);
                         }}
                       >
                         ..
@@ -89,9 +126,6 @@ export function MobileNavigation({ isOpen = false, onClose, tree }: MobileNaviga
                 </BreadcrumbList>
               </Breadcrumb>
             ) : (
-              // isInDocsContext && !showMainMenu ? (
-              //   getMobileBreadcrumb()
-              // ) :
               <Link href="/" onClick={handleClose}>
                 <DocsLogo />
               </Link>
@@ -129,52 +163,19 @@ export function MobileNavigation({ isOpen = false, onClose, tree }: MobileNaviga
                   </Link>
                 );
               })
-            ) : isInDocsContext && !showMainMenu ? (
-              <TreeContextProvider tree={tree}>
-                <div className="bg-background">
-                  <div className="[&_aside]:!relative [&_aside]:!top-auto [&_aside]:!w-full [&_aside]:!h-auto [&_aside]:!visible [&_aside]:!px-0 [&_aside]:!pt-0 [&_aside]:!pb-10">
-                    <Sidebar />
-                  </div>
-                </div>
-              </TreeContextProvider>
             ) : (
-              // TODO: Hide get started link for now
               <>
-                {/* <Link
-                  href="/start"
-                  onClick={handleClose}
-                  className="font-mono text-muted-foreground flex items-center justify-between px-4 py-3 text-base hover:bg-accent transition-colors"
-                >
-                  Get Started
-                </Link> */}
+                {renderMainLinks()}
 
-                {baseOptions.links?.map((item, index) => (
-                  <div key={index} className="">
-                    {item.type === 'menu' ? (
-                      <button
-                        type="button"
-                        className="w-full flex items-center justify-between px-4 py-3 text-lg hover:bg-accent transition-colors text-left"
-                        onClick={() => {
-                          setActiveSubmenu(String(item.text));
-                          setShowMainMenu(false);
-                        }}
-                      >
-                        <span className="font-mono text-muted-foreground">{item.text}</span>
-                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                      </button>
-                    ) : (
-                      'url' in item && (
-                        <Link
-                          href={item.url as string}
-                          onClick={handleClose}
-                          className="font-mono flex items-center justify-between px-4 py-3 text-lg hover:bg-accent transition-colors"
-                        >
-                          {item.text}
-                        </Link>
-                      )
-                    )}
-                  </div>
-                ))}
+                {isInDocsContext ? (
+                  <TreeContextProvider tree={tree}>
+                    <div className="bg-background pt-2">
+                      <div className="[&_aside]:!relative [&_aside]:!top-auto [&_aside]:!w-full [&_aside]:!h-auto [&_aside]:!visible [&_aside]:!px-0 [&_aside]:!pt-0 [&_aside]:!pb-10">
+                        <Sidebar />
+                      </div>
+                    </div>
+                  </TreeContextProvider>
+                ) : null}
               </>
             )}
           </div>