Sideabar

The Sidebar component majorly consists of Profile Header, Recent Chat Section and Contacts section.

Profile Header#

The profile header component is completely customized with the providing icons and colorset. The default Profile Header is mentioned below and it can be completely customized.

light-theme

On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables

Profile Header ComponentVariablesUsage
Profile Header Background ColormfRecentchatHeaderBgFor changing the background color for the Profile Header
Profile Name colormfProfileImgNameFor changing the text color for the Profile Header
CallLogs Icon usagemf_CallLogsFor changing the calllog Icon
New Chat Icon usagemf_NewGroupFor changing the New Chat Icon
Dot Menu Icon usagemf_DotMenuFor changing the Dot Menu Icon
Font Family for Profile NamemfSemiboldFor changing the font of the profile name
function App() {
const customColorSet={
mfRecentchatHeaderBg:"#baf54c",
mfProfileImgName:"#0782e0",
mfSemibold:"monospace"
}
const filledColorIcons={
mf_CallLogs: <FcCallback />, // from any icon packages
mf_NewChat: <FcSms />, // from any icon packages
mf_DotMenu: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="24" fill="none" stroke="#3F51B5" stroke-miterlimit="10" stroke-width="16"/><circle cx="128" cy="48" r="24" fill="none" stroke="#2196F3" stroke-miterlimit="10" stroke-width="16"/><circle cx="128" cy="208" r="24" fill="none" stroke="#009688" stroke-miterlimit="10" stroke-width="16"/></svg>,
}
return (
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
iconSet={filledColorIcons}
colorSet={customColorSet}
/>
);
}

Customized Profile Header#

As the componenet is customized with above mentioned variables, the below image is the customized Profile Header.

light-theme

Recent Chat Component#

The Recent Chat Component is completely customized with the providing colorset. The default Recent Chat is mentioned below and it can be completely customized.

light-theme

On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables

Recent Chat ComponentVariablesUsage
Recent Chat Background ColormfWhiteFor changing the background color for the Recent Chat Component
Recent Chat Name ColormfSecondaryDarkFor changing the text color for the Recent Chat Name
Recent Chat Message ColormfChatSubDetailsFor changing the text color for the Recent Chat Message
Unread Count Badge ColormfThemeColorBrightFor changing the Unread Count Badge Color
Recent Chat Name FontmfMediumFor changing the Recent Chat Name Font
Recent Chat Message FontmfRegularFor changing the font of the Recent Chat Message Font
Recent Chat Border Common ColormfBorderCommonFor changing the font of the Recent Chat Border Common Color
Recent Chat list Hover ColormfListHoverBgFor changing the font of the Recent Chat list Hover Color
function App() {
const customColorSet={
mfWhite:"#baf54c",
mfSecondaryDark:"#0782e0",
mfChatSubDetails:"#36383b",
mfThemeColorBright:"#476e90",
mfMedium:"monospace",
mfRegular:"fantasy",
mfBorderCommon:"#1c0707",
mfListHoverBg:"#3b4625"
}
return (
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
iconSet={filledColorIcons}
colorSet={customColorSet}
/>
);
}

Customized Recent Chat Component#

As the componenet is customized with above mentioned variables, the below image is the customized Recent Chat Component.

light-theme

New Chat (or) Contacts Component#

The Contacts Component is completely customized with the providing colorset. The default Contacts is mentioned below and it can be completely customized.

light-theme

On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables

Recent Chat ComponentVariablesUsage
New Chat Background ColormfBgcRecentChatlistHeaderFor changing the background color for the New Chat Component's Header
New Chat Background ColormfMenuNameFor changing the background color for the New Chat Component's Headers Name Color
New Chat Background ColormfWhiteFor changing the background color for the New Chat Component
New Chat Name ColormfSecondaryDarkFor changing the text color for the New Chat Name
New Chat Message ColormfChatSubDetailsFor changing the text color for the New Chat Message
New Chat Name FontmfMediumFor changing the New Chat Name Font
New Chat Message FontmfRegularFor changing the font of the New Chat Message Font
New Chat Border Common ColormfBorderCommonFor changing the font of the New Chat Border Common Color
New Chat list Hover ColormfListHoverBgFor changing the font of the New Chat list Hover Color
function App() {
const customColorSet={
mfBgcRecentChatlistHeader:"#baf54c",
mfMenuName:"#0782e0",
mfWhite:"#baf54c",
mfSecondaryDark:"#0782e0",
mfChatSubDetails:"#36383b",
mfThemeColorBright:"#476e90",
mfMedium:"monospace",
mfRegular:"fantasy",
mfBorderCommon:"#1c0707",
mfListHoverBg:"#3b4625"
}
return (
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
iconSet={filledColorIcons}
colorSet={customColorSet}
/>
);
}

Customized New Chat Component#

As the componenet is customized with above mentioned variables, the below image is the customized Contacts Component.

light-theme