RapidMiniProfile
The mini sidebar profile uses <RapidMiniProfile/> component as its base. <RapidMiniProfile/> can be used individually anywhere in your application and you can see the above mentioned API documentation to see the available props for the component.
Customising By Passing Props To Nested Component
Since the <RapidMiniProfile /> component is nested inside the <RapidSidebarMini/> component all the props passed in the following structure as miniProfileProps to the <RapidSidebarMini/> mini component will be inherited by the <RapidMiniProfile />. Here is an example of how you would do it in your layput:
import React from 'react';
import { 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 : 'Profile Image Of Suzzane Smith' ,
}
};
export default function MainLayout ( props )
{
return (
<RapidSidebarMini miniProfileProps = { miniProfileProps }>
</RapidSidebarMini>
)
}
Adding Links to RapidMiniProfile
RapidMiniProfile accepts a prop which is an object to render the links in the profile section along with the icons. To have a look at all the available props please See API Docs.
However, there is a link already a pre-defined object for links in the navigation and this preset file can be used to pass the necessary paths. You can locate the miniProfile.js file at the following location.
./config
├── navbars
│ ├── miniProfile.js
│ └── navigation.js
Customising the miniProfile.js file
the following is the structure of the miniProfile.js file and can be easily modified to get the links and the icons that you need to set in the profile area of the sidebar.
import React from 'react';
import routePaths from "../routes/paths";
import Face from '@material-ui/icons/FaceOutlined';
import Settings from '@material-ui/icons/SettingsOutlined';
import LastPage from '@material-ui/icons/LastPageOutlined';
const miniProfileLinks = [
{
id : 'mppro' , // Use Prefix With ID So that it is unique
name : 'Profile Overview' ,
icon : ( <Face fontSize = "small" /> ) ,
link : '/path' ,
} ,
{
id : 'mpset' , // Use Prefix With ID So that it is unique
name : 'Profile Settings' ,
icon : ( <Settings fontSize = "small" /> ) ,
link : '/path' ,
} ,
{
id : 'mplog' , // Use Prefix With ID So that it is unique
name : 'Logout' ,
icon : ( <LastPage fontSize = "small" /> ) ,
link : '/path' ,
} ,
];
export default miniProfileLinks
