diff --git a/packages/docs/app/app-links.tsx b/packages/docs/app/app-links.tsx new file mode 100644 index 0000000..4cd2732 --- /dev/null +++ b/packages/docs/app/app-links.tsx @@ -0,0 +1,47 @@ +import { + CodeIcon, + DocumentTextIcon, + ExternalLinkIcon, +} from "@heroicons/react/solid" +import type { AppLinkProps } from "~/components/app-link" +import { createContentIndex } from "~/helpers/create-index.server" +import { inlineIconClass } from "~/styles" + +export const mainLinks: AppLinkProps[] = [ + { + type: "router", + to: "/docs/guides/getting-started", + label: ( + <> + Guides + + ), + }, + { + type: "internal", + to: "/docs/api", + label: ( + <> + API Reference + + ), + }, + { + type: "external", + to: "https://github.com/itsMapleLeaf/reacord", + label: ( + <> + GitHub + + ), + }, +] + +export async function getGuideLinks(): Promise { + const entries = await createContentIndex("app/routes/docs/guides") + return entries.map((entry) => ({ + type: "router", + label: entry.title, + to: entry.route, + })) +} diff --git a/packages/docs/app/components/app-link.tsx b/packages/docs/app/components/app-link.tsx new file mode 100644 index 0000000..6196dd0 --- /dev/null +++ b/packages/docs/app/components/app-link.tsx @@ -0,0 +1,34 @@ +import { Link } from "remix" +import { ExternalLink } from "~/components/external-link" + +export type AppLinkProps = { + type: "router" | "internal" | "external" + label: React.ReactNode + to: string + className?: string +} + +export function AppLink(props: AppLinkProps) { + switch (props.type) { + case "router": + return ( + + {props.label} + + ) + + case "internal": + return ( + + {props.label} + + ) + + case "external": + return ( + + {props.label} + + ) + } +} diff --git a/packages/docs/app/components/main-navigation.tsx b/packages/docs/app/components/main-navigation.tsx index babc617..94282e9 100644 --- a/packages/docs/app/components/main-navigation.tsx +++ b/packages/docs/app/components/main-navigation.tsx @@ -1,29 +1,102 @@ -import { CodeIcon } from "@heroicons/react/outline" -import { DocumentTextIcon, ExternalLinkIcon } from "@heroicons/react/solid" +import { MenuAlt4Icon } from "@heroicons/react/outline" +import { useRect } from "@reach/rect" +import clsx from "clsx" +import { useRef, useState } from "react" +import { FocusOn } from "react-focus-on" import { Link } from "remix" -import { ExternalLink } from "~/components/external-link" +import { mainLinks } from "~/app-links" +import { AppLink } from "~/components/app-link" +import type { ContentIndexEntry } from "~/helpers/create-index.server" import { linkClass } from "~/styles" -export function MainNavigation() { +const menuItemClass = clsx` + px-3 py-2 transition text-left font-medium block + opacity-50 hover:opacity-100 hover:bg-black/30 +` + +export function MainNavigation({ + guideRoutes, +}: { + guideRoutes: ContentIndexEntry[] +}) { return ( ) } + +function PopoverMenu({ children }: { children: React.ReactNode }) { + const [visible, setVisible] = useState(false) + + const buttonRef = useRef(null) + const buttonRect = useRect(buttonRef) + + const panelRef = useRef(null) + const panelRect = useRect(panelRef) + + /* eslint-disable jsx-a11y/no-static-element-interactions */ + /* eslint-disable jsx-a11y/click-events-have-key-events */ + return ( + <> + + + setVisible(false)} + onEscapeKey={() => setVisible(false)} + > +
setVisible(false)} + > +
+
+
+ {children} +
+
+
+
+ + + ) +} diff --git a/packages/docs/app/routes/docs.tsx b/packages/docs/app/routes/docs.tsx index 79fc316..9c2c969 100644 --- a/packages/docs/app/routes/docs.tsx +++ b/packages/docs/app/routes/docs.tsx @@ -20,11 +20,11 @@ export default function Docs() { <>
- +
-