From 64ad37a09b0cd1e63b1afb5d7f7595ca8bfa2143 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 26 Feb 2025 15:03:16 +0100
Subject: [PATCH] docs contributing layout (#33833)

* contributing layout

* contributing layout mobile

* gap

* Update apps/docs/app/contributing/ContributingToC.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/app/contributing/ContributingToC.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* add missing menu entry

* remove feedback anchor from toc

* cleanup

* sheet height

* sheet height

* breadcrumb

---------

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
---
 .../docs/app/contributing/ContributingToC.tsx | 82 ++++++++++++++-----
 apps/docs/app/contributing/page.tsx           | 24 ++++--
 .../NavigationMenu.constants.ts               |  7 ++
 .../NavigationMenu/NavigationMenu.tsx         |  5 ++
 .../NavigationMenu/NavigationMenu.utils.ts    |  2 +
 apps/docs/layouts/MainSkeleton.tsx            |  6 ++
 6 files changed, 97 insertions(+), 29 deletions(-)

diff --git a/apps/docs/app/contributing/ContributingToC.tsx b/apps/docs/app/contributing/ContributingToC.tsx
index e1d8423f89a..ea2a953f15f 100644
--- a/apps/docs/app/contributing/ContributingToC.tsx
+++ b/apps/docs/app/contributing/ContributingToC.tsx
@@ -5,7 +5,8 @@ import type { HTMLAttributes } from 'react'
 import { useEffect, useState } from 'react'
 
 import { useBreakpoint } from 'common'
-import { cn, Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { cn, Separator, Sheet, SheetContent, SheetHeader, SheetTrigger } from 'ui'
+import { Feedback } from '~/components/Feedback'
 
 interface TocItem extends HTMLAttributes<HTMLElement> {
   label: string
@@ -18,7 +19,7 @@ export function ContributingToc({ className }: { className?: string }) {
 
   useEffect(() => {
     const headings = [
-      ...document.querySelectorAll('article.prose > h2,h3'),
+      ...document.querySelectorAll('article.prose > h2,h3:not(#feedback-title)'),
     ] as Array<HTMLHeadingElement>
     const tocItems = headings
       .filter((heading) => !!heading.id)
@@ -30,20 +31,16 @@ export function ContributingToc({ className }: { className?: string }) {
   }, [])
 
   return mobileToc ? (
-    <MobileToc
-      items={tocItems}
-      className={cn(
-        '[--local-top-spacing:2rem]',
-        'fixed top-[calc(var(--header-height)+var(--local-top-spacing))] right-8'
-      )}
-    />
+    <MobileToc items={tocItems} />
   ) : (
     <TocBase
       items={tocItems}
       className={cn(
         '[--local-top-spacing:5rem]',
-        'fixed top-[calc(var(--header-height)+var(--local-top-spacing))] right-8 w-36',
-        'xl:border-l border-foreground-muted'
+        'border-l thin-scrollbar overflow-y-auto px-2 hidden lg:block',
+        'col-span-3 self-start sticky',
+        'top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)]',
+        className
       )}
     />
   )
@@ -52,31 +49,74 @@ export function ContributingToc({ className }: { className?: string }) {
 function MobileToc({ items, className }: { items: Array<TocItem>; className?: string }) {
   const [open, setOpen] = useState(false)
 
+  useEffect(() => {
+    const onHashChanged = () => setOpen(false)
+
+    window.addEventListener('hashchange', onHashChanged)
+    return () => {
+      window.removeEventListener('hashchange', onHashChanged)
+    }
+  }, [])
+
   return (
-    <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
-      <PopoverTrigger_Shadcn_ className={cn('border rounded p-2', className)}>
-        <Menu />
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger
+        className={cn(
+          'fixed z-0 inset-0 top-auto w-full rounded-t-lg border border-b-0 p-4 bg-studio flex items-center gap-2 text-foreground-light text-sm',
+          className
+        )}
+      >
+        <Menu size={16} strokeWidth={1.5} className="text-foreground-light" />
         <span className="sr-only">
           {open ? 'Close table of contents' : 'Open table of contents'}
         </span>
-      </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ align="end" className="w-48">
-        <TocBase items={items} />
-      </PopoverContent_Shadcn_>
-    </Popover_Shadcn_>
+        <span>On this page</span>
+      </SheetTrigger>
+      <SheetContent
+        side="bottom"
+        size="lg"
+        className={cn(
+          'w-full flex flex-col gap-0 p-0 rounded-t-lg overflow-hidden',
+          !open && 'top-[calc(100vh-100px)]'
+        )}
+      >
+        <SheetHeader className="py-0 px-4">
+          <SheetTrigger
+            className={cn(
+              'w-full py-4 flex items-center gap-2 text-foreground-light text-sm',
+              className
+            )}
+          >
+            <Menu size={16} strokeWidth={1.5} className="text-foreground-light" />
+            <span className="sr-only">
+              {open ? 'Close table of contents' : 'Open table of contents'}
+            </span>
+            <span>On this page</span>
+          </SheetTrigger>
+        </SheetHeader>
+        <div className="w-full flex-1 p-4 pb-8 overflow-y-auto thin-scrollbar">
+          <TocBase items={items} />
+        </div>
+      </SheetContent>
+    </Sheet>
   )
 }
 
 function TocBase({ items, className }: { items: Array<TocItem>; className?: string }) {
   return (
-    <nav aria-label="Table of contents" className={cn('px-4 text-foreground-light', className)}>
-      <ul className="flex flex-col gap-1">
+    <nav aria-label="Table of contents" className={cn('text-foreground-lighter', className)}>
+      <span className="hidden lg:block font-mono text-xs uppercase text-foreground px-5 mb-6">
+        On this page
+      </span>
+      <ul className="toc-menu list-none lg:pl-5 text-[0.8rem] grid gap-2">
         {items.map((item) => (
           <li key={item.anchor} className="overflow-hidden truncate">
             <a href={`#${item.anchor}`}>{item.label}</a>
           </li>
         ))}
       </ul>
+      <Separator className="lg:w-[calc(100%-2rem)] lg:ml-5 my-4 lg:my-8" />
+      <Feedback className="pl-0 lg:pl-5" />
     </nav>
   )
 }
diff --git a/apps/docs/app/contributing/page.tsx b/apps/docs/app/contributing/page.tsx
index 851706f228a..856247ed444 100644
--- a/apps/docs/app/contributing/page.tsx
+++ b/apps/docs/app/contributing/page.tsx
@@ -5,22 +5,30 @@ import { fileURLToPath } from 'node:url'
 import { ContributingToc } from '~/app/contributing/ContributingToC'
 import { MDXProviderGuides } from '~/features/docs/GuidesMdx.client'
 import { MDXRemoteBase } from '~/features/docs/MdxBase'
+import { LayoutMainContent } from '~/layouts/DefaultLayout'
 import { SidebarSkeleton } from '~/layouts/MainSkeleton'
+import Breadcrumbs from '~/components/Breadcrumbs'
 
 export default async function ContributingPage() {
   const contentFile = join(dirname(fileURLToPath(import.meta.url)), 'content.mdx')
   const content = await readFile(contentFile, 'utf-8')
 
   return (
-    <SidebarSkeleton hideSideNav>
-      <div className="px-8 py-16">
-        <article className="prose mx-auto">
-          <MDXProviderGuides>
-            <MDXRemoteBase source={content} />
-          </MDXProviderGuides>
-        </article>
+    <SidebarSkeleton>
+      <LayoutMainContent className="pb-0 grid grid-cols-12 relative gap-4">
+        <div className="col-span-12 lg:col-span-9">
+          <Breadcrumbs className="mb-2 col-span-full" />
+          <article
+            id="contributing"
+            className="prose max-w-none relative transition-all ease-out duration-100"
+          >
+            <MDXProviderGuides>
+              <MDXRemoteBase source={content} />
+            </MDXProviderGuides>
+          </article>
+        </div>
         <ContributingToc />
-      </div>
+      </LayoutMainContent>
     </SidebarSkeleton>
   )
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 07eb5eeb6bf..5f84fdb6c4b 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -1953,6 +1953,13 @@ export const local_development: NavMenuConstant = {
   ],
 }
 
+export const contributing: NavMenuConstant = {
+  icon: 'contributing',
+  title: 'Contributing',
+  url: '/contributing',
+  items: [{ name: 'Overview', url: '/contributing' }],
+}
+
 export const MIGRATION_PAGES: Partial<NavMenuSection & ComponentProps<typeof IconPanel>>[] = [
   {
     name: 'Auth0',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index d3c64edc937..2586d881994 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -24,6 +24,7 @@ enum MenuId {
   SelfHosting = 'self_hosting',
   Integrations = 'integrations',
   LocalDevelopment = 'local_development',
+  Contributing = 'contributing',
   RefJavaScriptV1 = 'reference_javascript_v1',
   RefJavaScriptV2 = 'reference_javascript_v2',
   RefDartV1 = 'reference_dart_v1',
@@ -128,6 +129,10 @@ const menus: Menu[] = [
     id: MenuId.LocalDevelopment,
     type: 'guide',
   },
+  {
+    id: MenuId.Contributing,
+    type: 'guide',
+  },
   {
     id: MenuId.Deployment,
     type: 'guide',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts
index 6636d436862..20ac334a25c 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts
@@ -139,6 +139,8 @@ export const getMenuId = (pathname: string | null) => {
       return MenuId.SelfHosting
     case pathname.startsWith('storage'):
       return MenuId.Storage
+    case pathname.startsWith('/contributing'):
+      return MenuId.Contributing
     default:
       return MenuId.GettingStarted
   }
diff --git a/apps/docs/layouts/MainSkeleton.tsx b/apps/docs/layouts/MainSkeleton.tsx
index b746af56828..51cc8e6a168 100644
--- a/apps/docs/layouts/MainSkeleton.tsx
+++ b/apps/docs/layouts/MainSkeleton.tsx
@@ -82,6 +82,10 @@ const levelsData = {
     icon: 'platform',
     name: 'Platform',
   },
+  contributing: {
+    icon: 'contributing',
+    name: 'Contributing',
+  },
   resources: {
     icon: 'resources',
     name: 'Resources',
@@ -377,6 +381,8 @@ function SidebarSkeleton({
 
   const mobileMenuOpen = useMenuMobileOpen()
 
+  console.log('menuName', menuName, menuId)
+
   return (
     <div className={cn('flex flex-row h-full relative', className)}>
       {!hideSideNav && (