From 5157e5b34ad803c3ca12ba369d1497c787a46e53 Mon Sep 17 00:00:00 2001
From: gerzon05 <gerzonarletrangel@gmail.com>
Date: Mon, 13 May 2024 21:19:44 -0500
Subject: [PATCH] feat(doc): added movil menu

---
 apps/web/components/menu.tsx              | 21 ++-----------
 apps/web/components/movil-sidebar-nav.tsx | 36 +++++++++++++++++++++++
 apps/web/components/sidebar-nav.tsx       | 15 ++++++++--
 3 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 apps/web/components/movil-sidebar-nav.tsx

diff --git a/apps/web/components/menu.tsx b/apps/web/components/menu.tsx
index d59f626..f43941b 100644
--- a/apps/web/components/menu.tsx
+++ b/apps/web/components/menu.tsx
@@ -1,7 +1,9 @@
+'use client'
 import { Button } from '@openui-org/react'
 import Link from 'next/link'
 import { DocsSearch } from './docs-search'
 import { Icons } from './icons'
+import MovilSidebar from './movil-sidebar-nav'
 
 const links = [
   { name: 'Documentation', path: '/docs/getting-started/introduction' },
@@ -42,24 +44,7 @@ export default function Menu() {
                 </Link>
               </Button>
             </div>
-            <Button variant="ghost" size="icon" className="relative lg:hidden ml-auto">
-              <span className=" absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="size-6"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                </svg>
-              </span>
-            </Button>
-
+            <MovilSidebar />
           </div>
         </div>
       </div>
diff --git a/apps/web/components/movil-sidebar-nav.tsx b/apps/web/components/movil-sidebar-nav.tsx
new file mode 100644
index 0000000..2031e27
--- /dev/null
+++ b/apps/web/components/movil-sidebar-nav.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { Button, ScrollArea, Sheet, SheetContent, SheetTrigger } from '@openui-org/react'
+import { DocsSidebarNav } from './sidebar-nav'
+import { docsConfig } from '@/constants/docs'
+
+export default function MovilSidebar() {
+  const [open, setOpen] = useState(false)
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="relative lg:hidden ml-auto">
+          <span className=" absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="size-6"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <ScrollArea className="h-screen">
+          <DocsSidebarNav items={docsConfig.sidebarNav} setOpen={setOpen} />
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/web/components/sidebar-nav.tsx b/apps/web/components/sidebar-nav.tsx
index a696dcf..7c8544f 100644
--- a/apps/web/components/sidebar-nav.tsx
+++ b/apps/web/components/sidebar-nav.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Button } from '@openui-org/react'
+import type { Dispatch, SetStateAction } from 'react'
 import { cn } from '@openui-org/theme'
 import type { NavItem } from './main-nav'
 
@@ -23,9 +24,10 @@ export type SidebarNavItem = {
 
 export interface DocsSidebarNavProps {
   items: SidebarNavItem[]
+  setOpen?: Dispatch<SetStateAction<boolean>>
 }
 
-export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
+export function DocsSidebarNav({ items, setOpen }: DocsSidebarNavProps) {
   return items.length
     ? (
       <div className="w-full pr-2">
@@ -35,7 +37,12 @@ export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
               {item.title}
             </h4>
             {item.items
-              ? (<DocsSidebarNavItems items={item.items} />)
+              ? (
+                <DocsSidebarNavItems
+                  items={item.items}
+                  setOpen={setOpen}
+                />
+                )
               : null}
           </div>
         ))}
@@ -46,9 +53,10 @@ export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
 
 interface DocsSidebarNavItemsProps {
   items: SidebarNavItem[]
+  setOpen?: Dispatch<SetStateAction<boolean>>
 }
 
-export function DocsSidebarNavItems({ items }: DocsSidebarNavItemsProps) {
+export function DocsSidebarNavItems({ items, setOpen }: DocsSidebarNavItemsProps) {
   const path = usePathname()
   return items?.length
     ? (
@@ -59,6 +67,7 @@ export function DocsSidebarNavItems({ items }: DocsSidebarNavItemsProps) {
               href={item.href!}
               className="!font-light"
               target={item.external ? '_blank' : ''}
+              onClick={() => setOpen?.(false)}
             >
               {item.title}
             </Link>