| 1 | import classNames from 'classnames' |
| 2 | import Link from 'next/link' |
| 3 | |
| 4 | export type NavigationProps = { |
| 5 | manifest: Record<string, any> |
| 6 | slug: string[] |
| 7 | } |
| 8 | |
| 9 | export const Navigation = ({ |
| 10 | manifest, |
| 11 | slug: currentSlug, |
| 12 | }: NavigationProps) => { |
| 13 | const activePage = `/docs/${currentSlug.join('/')}` |
| 14 | |
| 15 | return ( |
| 16 | <div> |
| 17 | {Object.entries<any>(manifest).map(([slug, meta]) => ( |
| 18 | <ul className="category" key={slug}> |
| 19 | <li> |
| 20 | {meta.title && <h3 className="category-title">{meta.title}</h3>} |
| 21 | {meta.pages && ( |
| 22 | <ul> |
| 23 | {Object.entries<any>(meta.pages).map(([pSlug, pMeta]) => { |
| 24 | const href = `/docs/${slug}/${pSlug}` |
| 25 | |
| 26 | return ( |
| 27 | <Link href={href} key={pSlug} legacyBehavior> |
| 28 | <a |
| 29 | className={classNames( |
| 30 | 'page-link custom-anchor', |
| 31 | href === activePage && 'active' |
| 32 | )} |
| 33 | > |
| 34 | <li>{pMeta.title}</li> |
| 35 | </a> |
| 36 | </Link> |
| 37 | ) |
| 38 | })} |
| 39 | </ul> |
| 40 | )} |
| 41 | </li> |
| 42 | </ul> |
| 43 | ))} |
| 44 | <style jsx>{` |
| 45 | .category { |
| 46 | @apply mt-6; |
| 47 | } |
| 48 | .category:first-child { |
| 49 | @apply mt-0; |
| 50 | } |
| 51 | .category-title { |
| 52 | @apply font-rounded mb-2 text-xl font-bold uppercase text-gray-700; |
| 53 | } |
| 54 | |
| 55 | .page-link { |
| 56 | @apply text-marp-darken mt-1 block rounded py-1 px-2 outline-none; |
| 57 | |
| 58 | transition-property: background-color, border-color, fill, stroke; |
| 59 | } |
| 60 | .page-link:hover, |
| 61 | .page-link:focus { |
| 62 | @apply text-marp-dark bg-gray-200 duration-300; |
| 63 | } |
| 64 | .page-link:hover:active { |
| 65 | @apply duration-0 bg-gray-300; |
| 66 | } |
| 67 | .page-link:focus-visible { |
| 68 | @apply ring-1 ring-white ring-offset-2; |
| 69 | } |
| 70 | |
| 71 | .page-link.active { |
| 72 | @apply from-marp-brand to-marp-dark duration-0 bg-gradient-to-br font-bold text-white; |
| 73 | } |
| 74 | .page-link.active:hover:active { |
| 75 | @apply bg-marp-dark from-marp-dark to-marp-darkest; |
| 76 | } |
| 77 | `}</style> |
| 78 | </div> |
| 79 | ) |
| 80 | } |
| 81 |