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",
}
​
Last modified 8mo ago