Finding the layout you want to customise
All the layouts can we access in the layouts directory of RapidAdminReact®.
./src
├── layouts
│ ├── BlankLayout
│ │ └── BlankLayout.js
│ └── MiniSidebar
│ └── MiniSidebar.js
All the layouts here are self explanatory but still if you need to look what a particular layout does you can refer to the API documentation for the detail.
Layouts API Documentation
Adding additional Components to header
To add components to header you need to look at the structure of the layout. Let’s take MiniSidebar layout as an exmaple. If you look at the layout, you can see it has been clearly divided into sections.
import React , { Fragment } from 'react';
import {
RapidNotifications ,
RapidHeader ,
RapidHeaderLinksLeft ,
RapidHeaderLinksRight ,
RapidMainContent ,
RapidSidebarMini ,
} from "../../@rapidAdmin/components";
import miniProfileLinks from "../../config/navbars/miniProfile";
import Profile from '../../assets/images/avatars/julian.jpg';
const miniProfileProps = {
links : miniProfileLinks ,
profile : {
name : 'Suzzane Smith' ,
image : Profile ,
altText : 'Suzzane Smith' ,
}
};
export default function MiniSidebar ( props )
{
return (
<Fragment>
<RapidSidebarMini miniProfileProps = { miniProfileProps }>
<RapidHeader>
{/* Insert The Links Visible On The left Side Of The Header As Child Elements */ }
<RapidHeaderLinksLeft>
// Add Components To Be Displayed On The Left Side Of The Header
</RapidHeaderLinksLeft>
{/* Insert The Links Visible On The Right Side Of The Header As Child Elements */ }
<RapidHeaderLinksRight>
<RapidNotifications />
</RapidHeaderLinksRight>
</RapidHeader>
</RapidSidebarMini>
<RapidMainContent>
{ props.children }
</RapidMainContent>
</Fragment>
);
}
A quick look at the structure of the component will make you realise that you can add any component for the left side of the navbar by nesting the componeent inside the <RapidHeaderLinksLeft /> and nest it inside the <RapidHeaderLinksRight /> for the right side of the header.
