Crema React
v-4
Search…
⌃K

Sidebar Configuration

To change the sidebar selected menu color set you can directly select from the UI using the right setting icon
<====
To set the new color theme of the left sidebar, you need to update the following param in the file libs/constants/src/defaultConfig.js
import { MenuStyle, ThemeMode } from './AppEnums';
export const DarkSidebar = {
sidebarBgColor: '#313541',
sidebarTextColor: '#fff',
sidebarHeaderColor: '#313541',
sidebarMenuSelectedBgColor: '#F4F7FE',
sidebarMenuSelectedTextColor: 'rgba(0, 0, 0, 0.87)',
mode: ThemeMode.DARK,
};
export const LightSidebar = {
sidebarBgColor: '#fff',
sidebarTextColor: 'rgba(0, 0, 0, 0.60)',
sidebarHeaderColor: '#fff',
sidebarMenuSelectedBgColor: '#F4F7FE',
sidebarMenuSelectedTextColor: 'rgba(0, 0, 0, 0.87)',
mode: ThemeMode.LIGHT,
};
const defaultConfig = {
sidebar: { // update sidebar configuration according
borderColor: '#757575', // to your requirement
menuStyle: MenuStyle.DEFAULT,
allowSidebarBgImage: false,
sidebarBgImageId: 1,
colorSet: LightSidebar,
},
...
};
In the sidebar object, we have a colorSet object of the sidebar theme configuration. The color set has "mode" properties to differentiate between light and dark sidebar
import { MenuStyle, ThemeMode } from './AppEnums';
export const DarkSidebar: SidebarData = {
sidebarBgColor: '#313541',
sidebarTextColor: '#fff',
sidebarHeaderColor: '#313541',
sidebarMenuSelectedBgColor: '#F4F7FE',
sidebarMenuSelectedTextColor: 'rgba(0, 0, 0, 0.87)',
mode: ThemeMode.DARK,
};
export const LightSidebar: SidebarData = {
sidebarBgColor: '#fff',
sidebarTextColor: 'rgba(0, 0, 0, 0.60)',
sidebarHeaderColor: '#fff',
sidebarMenuSelectedBgColor: '#F4F7FE',
sidebarMenuSelectedTextColor: 'rgba(0, 0, 0, 0.87)',
mode: ThemeMode.LIGHT,
};
If we want to enable the sidebar background image we need to set isSidebarBgImage: true.
<====
If we need to change the image of the background then we need to update the following object values below in libs/constants/src/defaultConfig.js
const defaultConfig = {
sidebar: {
...
allowSidebarBgImage: true, // set this flag to true to allow sidebar bg image
sidebarBgImageId: 1, // update image id according to your choice
},
...,
}
You can set your different image set in this sidebarBgImages object in the libs/mockapi/src/fakedb/navigationStyle.js
export const sidebarBgImages = [
{
id: 1,
image: "/assets/images/sidebar/thumb/1.png", // image name should be same as id
},
...
];
In case you want to change the selected menu style then you need to update menuStyle. libs/constants/src/defaultConfig.js
const defaultConfig = {
sidebar: {
...
menuStyle: MenuStyle.DEFAULT, // Change Menu style according to your requirement.
...
},
...
}
Here is the menu style for other options.
export enum MenuStyle {
DEFAULT = "default",
STANDARD = "standard",
ROUNDED = "rounded",
ROUNDED_REVERSE = "rounded-reverse",
CURVED_MENU = "curved-menu",
}