fix: documentation sidebar component to show on mobile

.changeset/cyan-plums-cheat.md

@@ -0,0 +1,5 @@
+---
+"www": patch
+---
+
+Fix LeftSidebar component not showing on mobile

apps/www/src/app/(docs)/layout.tsx

@@ -19,7 +19,7 @@ export default async function DocsLayout({ children }: DocsLayoutProps) {
     <>
       <header className="sticky top-0 z-40 w-full border-b bg-background">
         <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-          <MainNav items={docsConfig.mainNav}>
+          <MainNav>
             <LeftSidebar items={docsConfig.sidebarNav} hooks={hooks} />
           </MainNav>
           <div className="flex flex-1 items-center space-x-4 sm:justify-end">
@@ -41,7 +41,11 @@ export default async function DocsLayout({ children }: DocsLayoutProps) {
 
       <main className="container flex-1">
         <div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
-          <LeftSidebar items={docsConfig.sidebarNav} hooks={hooks} />
+          <LeftSidebar
+            items={docsConfig.sidebarNav}
+            hooks={hooks}
+            className="hidden md:block"
+          />
           {children}
         </div>
       </main>

apps/www/src/app/(marketing)/layout.tsx

@@ -1,10 +1,12 @@
 import Link from 'next/link'
 
 import { DocSearch } from '@/components/doc-search'
+import { LeftSidebar } from '@/components/docs/left-sidebar'
 import { MainNav } from '@/components/main-nav'
 import { GitHub } from '@/components/ui/icons'
-import { marketingConfig } from '@/config/marketing'
+import { docsConfig } from '@/config/docs'
 import { siteConfig } from '@/config/site'
+import { getHookList } from '@/lib/api'
 
 type MarketingLayoutProps = {
   children: React.ReactNode
@@ -13,11 +15,15 @@ type MarketingLayoutProps = {
 export default async function MarketingLayout({
   children,
 }: MarketingLayoutProps) {
+  const hooks = await getHookList()
+
   return (
     <>
       <header className="container z-40 bg-background">
         <div className="flex h-20 items-center justify-between py-6">
-          <MainNav items={marketingConfig.mainNav} />
+          <MainNav>
+            <LeftSidebar items={docsConfig.sidebarNav} hooks={hooks} />
+          </MainNav>
           <nav className="flex space-x-4 justify-center align-middle">
             <DocSearch />
 

apps/www/src/components/docs/left-sidebar.tsx

@@ -9,6 +9,7 @@ import type { BaseHook, SidebarNavItem } from '@/types'
 type DocsSidebarNavProps = {
   items: SidebarNavItem[]
   hooks: BaseHook[]
+  className?: string
 }
 
 export function LeftSidebar(props: DocsSidebarNavProps) {
@@ -23,7 +24,12 @@ export function LeftSidebar(props: DocsSidebarNavProps) {
   }
 
   return (
-    <aside className="fixed top-16 z-30 hidden h-[calc(100vh-4rem-1px)] w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky md:block lg:py-10">
+    <aside
+      className={cn(
+        'top-16 z-30 h-[calc(100vh-4rem-1px)] w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky lg:py-10',
+        props.className,
+      )}
+    >
       {items.map((item, index) => (
         <div key={index} className={'pb-8'}>
           <h4 className="mb-1 rounded-md px-2 py-1 text-sm font-medium">

apps/www/src/components/main-nav.tsx

@@ -3,23 +3,28 @@
 import * as React from 'react'
 
 import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
 import { MobileNav } from '@/components/mobile-nav'
 import { Close, Logo } from '@/components/ui/icons'
 import { siteConfig } from '@/config/site'
-import { cn } from '@/lib/utils'
 import type { MainNavItem } from '@/types'
 
 type MainNavProps = {
   items?: MainNavItem[]
   children?: React.ReactNode
 }
 
-export function MainNav({ items, children }: MainNavProps) {
-  const segment = useSelectedLayoutSegment()
+export function MainNav({ children }: MainNavProps) {
+  const pathname = usePathname()
+  const [prevPathname, setPrevPathname] = React.useState<string>(pathname)
   const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false)
 
+  if (pathname !== prevPathname) {
+    setShowMobileMenu(false)
+    setPrevPathname(pathname)
+  }
+
   return (
     <div className="flex gap-6 md:gap-10">
       <Link href="/" className="hidden items-center space-x-2 md:flex">
@@ -28,25 +33,6 @@ export function MainNav({ items, children }: MainNavProps) {
           {siteConfig.name}
         </span>
       </Link>
-      {items?.length ? (
-        <nav className="hidden gap-6 md:flex">
-          {items?.map((item, index) => (
-            <Link
-              key={index}
-              href={item.disabled ? '#' : item.href}
-              className={cn(
-                'flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm',
-                item.href.startsWith(`/${segment}`)
-                  ? 'text-foreground'
-                  : 'text-foreground/60',
-                item.disabled && 'cursor-not-allowed opacity-80',
-              )}
-            >
-              {item.title}
-            </Link>
-          ))}
-        </nav>
-      ) : null}
       <button
         className="flex items-center space-x-2 md:hidden"
         onClick={() => {
@@ -56,9 +42,7 @@ export function MainNav({ items, children }: MainNavProps) {
         {showMobileMenu ? <Close /> : <Logo />}
         <span className="font-bold">Menu</span>
       </button>
-      {showMobileMenu && items && (
-        <MobileNav items={items}>{children}</MobileNav>
-      )}
+      {showMobileMenu && <MobileNav>{children}</MobileNav>}
     </div>
   )
 }

apps/www/src/components/mobile-nav.tsx

@@ -6,41 +6,25 @@ import { useScrollLock } from 'usehooks-ts'
 import { Logo } from '@/components/ui/icons'
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
-import type { MainNavItem } from '@/types'
 
 type MobileNavProps = {
-  items: MainNavItem[]
   children?: React.ReactNode
 }
 
-export function MobileNav({ items, children }: MobileNavProps) {
+export function MobileNav({ children }: MobileNavProps) {
   useScrollLock()
 
   return (
     <div
       className={cn(
-        'fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-md animate-in slide-in-from-bottom-80 md:hidden',
+        'fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max px-6 pt-0 pb-32 shadow-md animate-in slide-in-from-bottom-80 md:hidden',
       )}
     >
       <div className="relative z-20 grid gap-6 rounded-md bg-popover p-4 text-popover-foreground shadow-md">
         <Link href="/" className="flex items-center space-x-2">
           <Logo />
           <span className="font-bold">{siteConfig.name}</span>
         </Link>
-        <nav className="grid grid-flow-row auto-rows-max text-sm">
-          {items.map((item, index) => (
-            <Link
-              key={index}
-              href={item.disabled ? '#' : item.href}
-              className={cn(
-                'flex w-full items-center rounded-md p-2 text-sm font-medium hover:underline',
-                item.disabled && 'cursor-not-allowed opacity-60',
-              )}
-            >
-              {item.title}
-            </Link>
-          ))}
-        </nav>
         {children}
       </div>
     </div>