docs: add MobileNavBar

adrian-ub · Nov 1, 2024 · 60874c2 · 60874c2
1 parent e563588
commit 60874c2
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 2 deletions.
diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro
@@ -3,6 +3,7 @@ import { siteConfig } from '@/config/site'
 import { buttonVariants } from '@/registry/new-york/ui/button'
 
 import Navbar from './Navbar.astro'
+import MobileNavbar from './MobileNavbar.astro'
 
 const { pathname } = Astro.url
 ---
@@ -12,7 +13,7 @@ const { pathname } = Astro.url
 >
   <div class="container md:px-8 px-4 flex h-14 max-w-screen-2xl items-center">
     <Navbar pathname={pathname} />
-    <!-- <MobileNavbar pathname={pathname} /> -->
+    <MobileNavbar pathname={pathname} />
     <div class="flex flex-1 items-center justify-end space-x-2">
       <div class="w-full flex-1 md:w-auto md:flex-none">
         <!-- <CommandMenu /> -->

diff --git a/docs/src/components/Logo.astro b/docs/src/components/Logo.astro
@@ -1,4 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-6 w-6" {...Astro.props}>
+---
+import { cn } from '@/lib/utils'
+
+const { class: className, ...rest } = Astro.props
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class={cn('h-6 w-6', className)} {...rest}>
   <rect width="256" height="256" fill="none"></rect>
   <line
     x1="208"

diff --git a/docs/src/components/MobileNavbar.astro b/docs/src/components/MobileNavbar.astro
@@ -0,0 +1,101 @@
+---
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/new-york/ui/button'
+import Logo from './Logo.astro'
+import { siteConfig } from '@/config/site'
+import { docsConfig } from '@/config/docs'
+---
+
+<div x-data="{ slideOverOpen: false }">
+  <button
+    @click="slideOverOpen=true"
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:text-accent-foreground h-9 py-2 mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+  >
+    <svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
+      <path d="M3 5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M3 12H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M3 19H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+    <span class="sr-only">Toggle Menu</span>
+  </button>
+  <template x-teleport="body">
+    <div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" class="relative z-[99]">
+      <div
+        x-show="slideOverOpen"
+        :data-state="slideOverOpen ? 'open' : 'closed'"
+        @click="slideOverOpen = false"
+        class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      >
+      </div>
+      <div
+        x-show="slideOverOpen"
+        x-transition.duration.300ms
+        :data-state="slideOverOpen ? 'open' : 'closed'"
+        class="fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm pr-0"
+      >
+        <button
+          @click="slideOverOpen=false"
+          type="button"
+          class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+          >
+            <path
+              d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span class="sr-only">Close</span>
+        </button>
+
+        <a class="flex items-center" href="/">
+          <Logo class="mr-2 h-4 w-4" />
+          <span class="font-bold">{siteConfig.title}</span>
+        </a>
+
+        <div class="relative overflow-hidden my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+          <div class="h-full w-full rounded-[inherit] overflow-auto">
+            <div style="min-width: 100%; display: table;">
+              <div class="flex flex-col space-y-3">
+                {docsConfig.mainNav.map((main) => <a href={main.href}>{main.title}</a>)}
+              </div>
+              <div class="flex flex-col space-y-2">
+                {
+                  docsConfig.sidebarNav.map((item) => (
+                    <div class="flex flex-col space-y-3 pt-6">
+                      <h4>{item.title}</h4>
+                      {item?.items?.length &&
+                        item.items.map((item) => (
+                          <Fragment>
+                            {!item.disabled && item.href ? (
+                              <a href={item.href} class="text-muted-foreground">
+                                {item.title}{' '}
+                                {item.label && (
+                                  <span class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                                    {item.label}
+                                  </span>
+                                )}
+                              </a>
+                            ) : (
+                              <span class="text-muted-foreground">{item.title}</span>
+                            )}
+                          </Fragment>
+                        ))}
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>