Route Shell
The Route Shell Component is a layout wrapper for your application's pages.
const Dashboard = () => {
return (
<RouteShell title={'Dashboard'}>
<Head>
<title key={'dashboard'}>Dashboard</title>
</Head>
<div>
// Dashboard Content
</div>
</RouteShell>
);
};
export default Dashboard;
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
return await withAppProps(ctx);
}
Properties
This component accepts two properties
- title: the title of the page
- style: 'topHeader', 'sidebar', or 'custom'
interface Props {
title: string;
style: 'topHeader' | 'sidebar' | 'custom'
}
Features
- It handles sign-out redirects automatically when the user signs out
- Sets the page title automatically
- It provides with 3 layout style configurations:
- Top Menu
- Side Menu
- Custom
Layouts
Top Menu
In this style, the menu of the application is horizontal, and the whole content is centered.
Side Menu
In this style, the menu of the application is placed in a left-hand sidebar.
Custom
In this case, no layout is provided; it will simply wrap the children, and it will be the consumer's responsibility to set up the layout.