<SidebarLayout>

Simple sidebar layout UI component. Contains a sidebar with links, a header and a main content area. Useful when handling multiple test pages.

The sidebar and header in this website were built using a <SidebarLayout> component.

Example:

The following example shows how to create a custom sidebar layout component, compatible with NextJS's app router:

"use client"

import { sidebarMenu } from "@/constants"
import { usePathname } from "next/navigation"
import { FC } from "react"
import { SidebarLayout } from "react-browser-tests"

type CustomSidebarLayoutProps = {
  children: React.ReactNode
}

export const CustomSidebarLayout: FC<CustomSidebarLayoutProps> = ({ children }) => {
  const pathname = usePathname()

  return (<SidebarLayout
    sidebarMenu={sidebarMenu}
    activeUrl={pathname}
  >
    {children}
  </SidebarLayout>)
}

sidebarMenu is an object with the URLs and names of the pages.

The result of the above code is this page's sidebar, header and main content area.

Props

sidebarMenu?

Object where the keys are the urls, and the values are arrays. The first element of the array specifies the page name to display in the sidebar. The second element is an optional object for submenus - the keys are the urls, and the values are the page names.

Example:

const sidebarMenu: SidebarMenu = {
  "/": ["Home"],
  "/components": ["Components", {
    "/components/test-container": "Test Container",
    "/components/test": "Test",
    "/components/test-group": "Test Group",
    "/components/single-test-container-overview": "Single Test Container Overview",
    "/components/multiple-test-container-overview": "Multiple Test Container Overview",
    "/components/multiple-page-overview": "Multiple Page Overview",
    "/components/sidebar-layout": "Sidebar Layout",
  }]
}

activeUrl?

String - the active URL. The sidebar will highlight the active URL.

css?

CSS styles to apply to the sidebar layout elements. The default value is a CSS string constant called layoutStyles, exported from the styles.ts file.

HTMLDivElement props

Supports standard HTMLDivElement props. For example: className, style, etc.