Application Layout

The application layout provides a base UI wrapper for any application built with Halstack.

Props

NameTypeDescriptionDefault
visibilityToggleLabelstringText to be placed next to the hamburger button that toggles the visibility of the sidenav.-
headerReact.ReactNodeHeader of the application layout shown at the top of the screen. It is optional and if it is not specified, the default header will be shown. Please check the Header documentation here.-
footerReact.ReactNodeFooter of the application layout shown at the bottom of the screen. It is optional and if it is not specified, the default header will be shown. Please check the Footer documentation here.-
sidenavReact.ReactNodeSidenav of the application layout shown at the left side of the screen. Please check the Sidenav documentation here.-
Required
children
React.ReactNodeUse the DxcApplicationLayout.Main provided to render main content.-

DxcApplicationLayout.Main

Everything between the tags will be displayed as the main content of the application layout.

DxcApplicationLayout.useResponsiveSidenavVisibility

Custom hook that returns a function to manually change the visibility of the sidenav in responsive mode. This can be very useful for cases where a custom sidenav is being used and some of its inner elements can close it (for example, a navigation link).

Examples

Basic usage

With sidenav