Page Layout

Configure page layout, including navigation, in a Next.js page

Before configuring page, ensure you have set up your layout (that which wraps page). The following example

identifies the app title
introduces a custom hyperlink wrapper into the app's context scheme
sets the app language to French

// app/layout.tsx

import { Html, Body } from 'matterial'

// Optional custom link
function Link = ({ href, title }) => <a href={href} class="my-link">{title}</a>

const config = {
  appTitle: 'My App',
  // You may wish to use pass framework's `Link` component instead (eg, Next.js Link)
  linkComponent: Link,
}

export default function Layout({ children }) {
  return (
    <Html config={config} lang="fr">
      <Body>{children}</Body>
    </Html>
  )
}

Now that the app wrapper set up, it's time to structure page layouts. A basic structure is as follows:

// app/page.tsx

import { Page } from 'matterial'

export default function RootPage() {
  return (
    <Page>
      Hello, world
    </Page>
  )
}

Navigation can be rendered by supplying a nav prop that is either

a NavMap object
a JSX component

Navigation as a NavMap object

A NavMap follows a schema like so:

type NavMap = {
  /** Heading component */
  _heading?: ReactElement

  /** Sub-nav with a sub-heading as the key */
  [key: string]: LinkList

  /** Render a link list with no sub-heading */
  _?: LinkList

  /** Insert a horizontal rule */
  _hr?: ''
}

type Link = {
  href: string
  title: string
  isActive?: boolean
}

type LinkList = Array<Link | ReactElement>

For example:

// app/page.tsx

import { Layout } from 'matterial'

export default function Page() {
  const navMap = {
    Foo: [{ href: '/bar' title: 'Bar', isActive: true }, { href: '/baz', title: 'Baz' }],
    _hr: '',
    Lorem: [<Link href="/ipsum">Ipsum</Link>, <Link href="/ipsum">Ipsum</Link>],
  }
  return (
    <Layout nav={navMap}>
      Hello, world
    </Layout>
  )
}

Navigation as JSX Component

For more customization, provide a JSX component wrapped in Matterial's <Nav> component:

// app/page.tsx

import Link from 'next/link'
import { Layout, Nav } from 'matterial'

function PageNav() {
  return (
    <Nav>
      <h1>My App</h1>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about">About</Link>
        </li>
      </ul>
    </Nav>
  )
}

export default function Page() {
  return (
    <Layout nav={<PageNav>}>
      Hello, world
    </Layout>
  )
}