8f23630269
* Refactor dashboard layout into new Layout components * Style the new layout * Use Slot/Fill for the Header component * Center cards, fixed size for sidebar * Only set the box-sizing on things within our app * Make app the full height of the wp-admin frame * Add styles to show/hide sidebar * Toggle the sidebar * Wrap router around entire Layout, use page setting to show/hide sidebar on page * Fix the styles on show/hide buttons, add title & close button to the sidebar * Use a min-height on visible sidebars * Add/update READMEs * Update space between main content & sidebar |
||
|---|---|---|
| .. | ||
| README.md | ||
| index.js | ||
| style.scss | ||
README.md
Header
A basic component for the app header. The header outputs breadcrumbs via the sections prop (required) and a toggle button to show the timeline sidebar (hidden via CSS if no applicable to the page).
How to use:
import Header from 'components/header';
render: function() {
return (
<Header sections={ [
<a href={ getAdminLink( 'admin.php?page=wooanalytics' ) }>{ __( 'Analytics', 'woo-dash' ) }</a>,
__( 'Report Title', 'woo-dash' ),
] } />
);
}
Props
sections(required): Used to generate breadcrumbs. Accepts a single node/elemnt or an array of nodes.onToggle(required): The toggle callback when "open sidebar" button is clicked.isSidebarOpen: Boolean describing whether the sidebar is toggled visible.
Note: onToggle & isSidebarOpen are passed through the Slot call, and aren't required when using <Header /> in section components.