-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ed9aae8
commit 8c75a85
Showing
4 changed files
with
185 additions
and
39 deletions.
There are no files selected for viewing
44 changes: 44 additions & 0 deletions
44
apps/marketing-astro/src/components/docs/mobileNavSidebar.astro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| --- | ||
| import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon"; | ||
| --- | ||
|
|
||
| <div | ||
| data-state="closed" | ||
| id="docs-nav-menu-dialog" | ||
| class="fixed w-full inset-x-0 top-16 group data-[state='open']:bottom-0 z-40 bg-surface/90 backdrop-blur-sm mt-px" | ||
| > | ||
| <button | ||
| id="docs-nav-menu-btn" | ||
| aria-expanded="false" | ||
| aria-controls="docs-nav-menu-dialog" | ||
| class="flex py-3.5 h-12 border-b group-data-[state='open']:border-none border-outline-variant px-6 items-center text-on-surface text-sm w-full" | ||
| > | ||
| <ChevronDownIcon | ||
| className="h-4 w-4 mr-2 group-data-[state=open]:rotate-180" | ||
| /> | ||
| <span>Menu</span> | ||
| </button> | ||
|
|
||
| <div | ||
| class="max-w-full fixed hidden group-data-[state='open']:block lg:hidden w-full max-h-[calc(100vh-7rem)] overflow-y-auto overflow-x-hidden scrollbar-thin" | ||
| > | ||
| <div class="px-6 py-4"> | ||
| <slot /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| const btn = document.getElementById("docs-nav-menu-btn")!; | ||
| const dialog = document.getElementById("docs-nav-menu-dialog")!; | ||
|
|
||
| btn.addEventListener("click", (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| const newState = | ||
| dialog.getAttribute("data-state") === "open" ? "closed" : "open"; | ||
| dialog.setAttribute("data-state", newState); | ||
|
|
||
| btn.setAttribute("aria-expanded", newState === "open" ? "true" : "false"); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| --- | ||
| import { cx } from "class-variance-authority"; | ||
| interface Props { | ||
| sections: { | ||
| title: string; | ||
| links: { | ||
| title: string; | ||
| href: string; | ||
| }[]; | ||
| }[]; | ||
| path: string; | ||
| mobile?: boolean; | ||
| } | ||
| const { sections, path, mobile } = Astro.props; | ||
| --- | ||
|
|
||
| <nav class="text-base md:text-sm -ml-0.5 pl-0.5"> | ||
| <ul role="list" class={cx("space-y-9", mobile && "mb-20")}> | ||
| { | ||
| sections.map((section) => ( | ||
| <li> | ||
| <h2 class="font-display capitalize font-medium text-on-surface"> | ||
| {section.title} | ||
| </h2> | ||
| <ul | ||
| role="list" | ||
| class="mt-2 space-y-2 border-l-2 md:mt-4 md:space-y-4 border-outline-variant" | ||
| > | ||
| {section.links.map((link) => ( | ||
| <li class="relative"> | ||
| <a | ||
| href={link.href} | ||
| class={cx( | ||
| "block w-full capitalize pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full", | ||
| link.href === `/docs/${path}` | ||
| ? "before:bg-tertiary font-semibold text-tertiary" | ||
| : "before:hidden before:bg-on-surface-variant hover:text-on-surface hover:before:block text-on-surface-variant" | ||
| )} | ||
| > | ||
| {link.title} | ||
| </a> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </li> | ||
| )) | ||
| } | ||
| </ul> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| "use client"; | ||
|
|
||
| import NextLink from "next/link"; | ||
| import { cx } from "class-variance-authority"; | ||
| import { usePathname } from "next/navigation"; | ||
| import * as Collapsible from "@radix-ui/react-collapsible"; | ||
| import { ChevronDownIcon } from "@heroicons/react/24/outline"; | ||
| import { useState } from "react"; | ||
|
|
||
| export interface Section { | ||
| title: string; | ||
| links: { | ||
| title: string; | ||
| href: string; | ||
| }[]; | ||
| } | ||
|
|
||
| interface DocsNavProps { | ||
| sections: Section[]; | ||
| mobile?: boolean; | ||
| onNav?: () => void; | ||
| } | ||
|
|
||
| export function DocsNavDesktop({ sections, mobile, onNav }: DocsNavProps) { | ||
| const pathname = usePathname(); | ||
| return ( | ||
| <nav className="text-base md:text-sm"> | ||
| <ul role="list" className={cx("space-y-9", mobile && "mb-20")}> | ||
| {sections.map((section) => ( | ||
| <li key={section.title}> | ||
| <h2 className="font-display capitalize font-medium text-on-surface"> | ||
| {section.title} | ||
| </h2> | ||
| <ul | ||
| role="list" | ||
| className="mt-2 space-y-2 border-l-2 md:mt-4 md:space-y-4 border-outline-variant" | ||
| > | ||
| {section.links.map((link) => ( | ||
| <li key={link.href} className="relative"> | ||
| <NextLink | ||
| onClick={() => onNav?.()} | ||
| href={link.href} | ||
| className={cx( | ||
| "block w-full capitalize pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full", | ||
| link.href === pathname | ||
| ? "before:bg-tertiary font-semibold text-tertiary" | ||
| : "before:hidden before:bg-on-surface-variant hover:text-on-surface hover:before:block text-on-surface-variant" | ||
| )} | ||
| > | ||
| {link.title} | ||
| </NextLink> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </nav> | ||
| ); | ||
| } | ||
|
|
||
| export function DocsNavMobile({ sections }: DocsNavProps) { | ||
|
|
||
|
|
||
|
|
||
| const [open, setOpen] = useState(false); | ||
|
|
||
|
|
||
| return ( | ||
| <Collapsible.Root open={open} onOpenChange={setOpen} className="bg-surface/90 backdrop-blur-sm fixed w-full inset-x-0 top-16 data-[state=open]:bottom-0"> | ||
| <Collapsible.Trigger className="flex group py-3.5 border-b data-[state=open]:border-none border-outline-variant px-6 items-center text-on-surface text-sm w-full"> | ||
| <ChevronDownIcon className="h-4 w-4 group-data-[state=open]:rotate-180 mr-2" />{" "} | ||
| Menu | ||
| </Collapsible.Trigger> | ||
| <Collapsible.Content className="fixed lg:hidden w-full max-h-[calc(100vh-8rem)] overflow-y-auto px-6 py-4 z-10 "> | ||
| <DocsNavDesktop onNav={() => setOpen(false)} mobile sections={sections} /> | ||
| </Collapsible.Content> | ||
| </Collapsible.Root> | ||
| ); | ||
| } |