App Layout
The AppLayout component should be the root view component of all your pages.
import { AppLayout, PageLayout, usePageLayout } from '@balance-web/app-layout';App layout
The AppLayout component should be the root view component of all your pages. It renders children as flex column.
Page layout, columns and sidebar
The PageLayout component should be used to compose the navigation and main content of your page. It will render children as flex row.
It expects PageLayout.Column and PageLayout.Sidebar as children for the main building blocks, however it does render children as flex so it's possible to compose your own layout using custom elements.
Columns
The PageLayout.Column component is used inside PageLayout to create columns in your page content.
It renders children as flex column.
By default each PageLayout.Column will fill the remaining space. You can use the optional width to specify a fixed width for a specific column.
Note: Styling of each column for things like dividers, padding and background are up to the consumer.
Side bar
The PageLayout.Sidebar component is used inside PageLayout. It provides common side bar functionality such as fill height, fixed width and expand/collapse. It renders children as flex column.
Use the SidebarNavigation component inside PageLayout.Sidebar for a complete side bar navigation experience.
usePageLayout
The usePageLayout hook is used to get the current state of the sidebar and programatically
expand/collapse it.
Recipes
Combine all the components to achieve certain layouts.