useAppLayout

Opens the navigation drawer and the side panel of the surrounding AppLayout.

Returns the controls of the nearest AppLayout: openNavigation() opens the sidebar as a drawer on small screens, setAsideOpen() shows or hides the right-hand panel, and asideShown() says whether that panel is on screen right now.

See alsoApp Layout

Import

import { useAppLayout } from "@wunderui/react"

Comes with WunderUI Core and Pro, in the @wunderui/react package from your plan. See the plans.

Signature

useAppLayout(): AppLayoutState | null

Returns

AppLayoutState | null

Examples

import { Button, useAppLayout } from "@wunderui/react"

export function ShowDetails() {
  const layout = useAppLayout()
  return (
    <Button variant="plain" size="sm" onClick={() => layout?.setAsideOpen(true)} disabled={!layout}>
      Details
    </Button>
  )
}

Notes

• Returns null outside an AppLayout, so check the result before you call it.
• Use it for buttons inside the page, such as a details button in a table row that opens the aside.
• asideShown() is a function, not a value: it measures at the moment you ask, below the drawer breakpoint too.