fix: navbar on mobile docs for grouped features (#2658)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/docs/components/Layout.tsx

@@ -32,7 +32,7 @@ export const Layout = ({
               </Link>
             </div>
             <Header />
-            <Navigation className="hidden lg:mt-10 lg:block" />
+            <Navigation className="hidden lg:mt-10 lg:block" isMobile={false} />
           </div>
         </motion.header>
         <div className="relative flex h-full flex-col px-4 pt-14 sm:px-6 lg:px-8">

apps/docs/components/MobileNavigation.tsx

@@ -90,7 +90,7 @@ const MobileNavigationDialog = ({ isOpen, close }: { isOpen: boolean; close: ()
             <motion.div
               layoutScroll
               className="ring-zinc-900/7.5 fixed bottom-0 left-0 top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800">
-              <Navigation />
+              <Navigation isMobile={true} />
             </motion.div>
           </Transition.Child>
         </Dialog.Panel>

apps/docs/components/Navigation.tsx

@@ -46,25 +46,41 @@ const NavLink = ({
   active = false,
   isAnchorLink = false,
 }: {
-  href: string;
+  href?: string;
   children: React.ReactNode;
   active: boolean;
   isAnchorLink?: boolean;
 }) => {
-  return (
-    <Link
-      href={href}
-      aria-current={active ? "page" : undefined}
-      className={clsx(
-        "flex justify-between gap-2 py-1 pr-3 text-sm transition",
-        isAnchorLink ? "pl-7" : "pl-4",
-        active
-          ? "rounded-r-md bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white"
-          : "text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
-      )}>
-      <span className="flex w-full truncate">{children}</span>
-    </Link>
+  const commonClasses = clsx(
+    "flex justify-between gap-2 py-1 pr-3 text-sm transition",
+    isAnchorLink ? "pl-7" : "pl-4",
+    active
+      ? "rounded-r-md bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white"
+      : "text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
   );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        aria-current={active ? "page" : undefined}
+        className={clsx(
+          "flex justify-between gap-2 py-1 pr-3 text-sm transition",
+          isAnchorLink ? "pl-7" : "pl-4",
+          active
+            ? "rounded-r-md bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white"
+            : "text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
+        )}>
+        <span className="flex w-full truncate">{children}</span>
+      </Link>
+    );
+  } else {
+    return (
+      <div aria-current={active ? "page" : undefined} className={commonClasses}>
+        <span className="flex w-full truncate">{children}</span>
+      </div>
+    );
+  }
 };
 
 const VisibleSectionHighlight = ({ group, pathname }: { group: NavGroup; pathname: string }) => {
@@ -131,6 +147,7 @@ const NavigationGroup = ({
   setActiveGroup,
   openGroups,
   setOpenGroups,
+  isMobile,
 }: {
   group: NavGroup;
   className?: string;
@@ -138,6 +155,7 @@ const NavigationGroup = ({
   setActiveGroup: (group: NavGroup | null) => void;
   openGroups: string[];
   setOpenGroups: (groups: string[]) => void;
+  isMobile: boolean;
 }) => {
   const isInsideMobileNavigation = useIsInsideMobileNavigation();
   const pathname = usePathname();
@@ -171,13 +189,15 @@ const NavigationGroup = ({
           {group.links.map((link) => (
             <motion.li key={link.title} layout="position" className="relative">
               {link.href ? (
-                <NavLink href={link.href} active={!!pathname?.startsWith(link.href)}>
+                <NavLink
+                  href={isMobile && link.children ? "" : link.href}
+                  active={!!pathname?.startsWith(link.href)}>
                   {link.title}
                 </NavLink>
               ) : (
                 <div onClick={() => toggleParentTitle(link.title)}>
                   <NavLink
-                    href={link.children?.[0]?.href || ""}
+                    href={!isMobile ? link.children?.[0]?.href || "" : undefined}
                     active={
                       !!(
                         isParentOpen(link.title) &&
@@ -197,7 +217,7 @@ const NavigationGroup = ({
                 </div>
               )}
               <AnimatePresence mode="popLayout" initial={false}>
-                {link.children && isParentOpen(link.title) && (
+                {isActiveGroup && link.children && isParentOpen(link.title) && (
                   <motion.ul
                     role="list"
                     initial={{ opacity: 0 }}
@@ -221,7 +241,11 @@ const NavigationGroup = ({
   );
 };
 
-export const Navigation = (props: React.ComponentPropsWithoutRef<"nav">) => {
+interface NavigationProps extends React.ComponentPropsWithoutRef<"nav"> {
+  isMobile: boolean;
+}
+
+export const Navigation = ({ isMobile, ...props }: NavigationProps) => {
   const [activeGroup, setActiveGroup] = useState<NavGroup | null>(navigation[0]);
   const [openGroups, setOpenGroups] = useState<string[]>([]);
 
@@ -237,6 +261,7 @@ export const Navigation = (props: React.ComponentPropsWithoutRef<"nav">) => {
             setActiveGroup={setActiveGroup}
             openGroups={openGroups}
             setOpenGroups={setOpenGroups}
+            isMobile={isMobile}
           />
         ))}
         <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">