Project Configuration

Configuration option for whole Template

Datta Able has a single source of truth for default configuration which lets users manage it effectively. It also makes it scalable for new configurations. you can set configs like font, border, theme layout, etc. All those can be configured at ..src/config/constant.js

Option	Default	Type	Description
layout	vertical	string	vertical, horizontal
preLayout	null	string	layout-2, layout-2-2, layout-3, layout-4, layout-4-2, layout-6, layout-8
collapseMenu	false	boolean	false, true
layoutType	menu-dark	string	menu-dark, menu-light, dark
navIconColor	false	boolean	true, false
headerBackColor	header-default	string	header-default, header-blue, header-red, header-purple, header-lightblue, header-dark
navBackColor	navbar-default	string	navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark
navBrandColor	brand-default	string	brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark
navBackImage	null	string	navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5
rtlLayout	false	boolean	false, true
navFixedLayout	true	boolean	false, true
headerFixedLayout	false	boolean	false, true
boxLayout	false	boolean	false, true
navDropdownIcon	style1	string	style1, style2, style3
navListIcon	style1	string	style1, style2, style3, style4, style5, style6
navActiveListColor	active-default	string	active-default, active-blue, active-red, active-purple, active-lightblue, active-dark
navListTitleColor	title-default	string	title-default, title-blue, title-red, title-purple, title-lightblue, title-dark
navListTitleHide	false	boolean	false, true
configBlock	false	boolean	false, true (used for only preLayout)
layout6Background	#23b7e5	string	Note: used only for preLayout: layout-6 Background Color #04a9f5 #ff5252 #9575CD #23b7e5 #424448 linear-gradient(to right, #1de9b6 0%, #1dc4e9 100%) linear-gradient(to right, #899FD4 0%, #A389D4 100%) linear-gradient(to right, #4facfe 0%, #00f2fe 100%) linear-gradient(to right, #667eea 0%, #764ba2 100%) linear-gradient(to right, #f77062 0%, #fe5196 100%) linear-gradient(to right, #9be15d 0%, #00e3ae 100%) linear-gradient(to right, #b224ef 0%, #7579ff 100%) linear-gradient(to right, #0acffe 0%, #495aff 100%) linear-gradient(to right, #01a9ac 0%, #01dbdf 100%) linear-gradient(to right, #fe5d70 0%, #fe909d 100%) linear-gradient(to right, #0ac282 0%, #0df3a3 100%) linear-gradient(to right, #fe9365 0%, #feb798 100%) linear-gradient(to right, #A445B2 0%, #D41872 52%, #FF0066 100%) Background Image url("assets/images/bg-images/bg1.jpg") url("assets/images/bg-images/bg3.jpg") url("assets/images/bg-images/bg4.jpg") url("assets/images/bg-images/bg5.jpg") Background Pattern url("assets/images/bg-images/1.png") url("assets/images/bg-images/2.png") url("assets/images/bg-images/3.png") url("assets/images/bg-images/4.png") url("assets/images/bg-images/5.png") url("assets/images/bg-images/6.png")
layout6BackSize	' '	string	auto, cover

..\src\config\constant.js

export const BASENAME = ''; // don't add '/' at end off BASENAME
export const BASE_URL = '/app/dashboard/default';
export const BASE_TITLE = ' | Datta Able Premium React Hooks + Redux Admin Template';

export const CONFIG = {
  layout: 'vertical', // vertical, horizontal
  subLayout: '', // null, layout-2, layout-2-2, layout-3, layout-4, layout-4-2, layout-6, layout-8
  collapseMenu: false, // mini-menu
  layoutType: 'menu-dark', // menu-dark, menu-light, dark
  navIconColor: false,
  headerBackColor: 'header-default', // header-default, header-blue, header-red, header-purple, header-lightblue, header-dark
  navBackColor: 'navbar-default', // navbar-default, navbar-blue, navbar-red, navbar-purple, navbar-lightblue, navbar-dark
  navBrandColor: 'brand-default', // brand-default, brand-blue, brand-red, brand-purple, brand-lightblue, brand-dark
  navBackImage: false, // false, navbar-image-1, navbar-image-2, navbar-image-3, navbar-image-4, navbar-image-5
  rtlLayout: false,
  navFixedLayout: true, // only for vertical layouts
  headerFixedLayout: false, // only for vertical layouts
  boxLayout: false,
  navDropdownIcon: 'style1', // style1, style2, style3
  navListIcon: 'style1', // style1, style2, style3, style4, style5, style6
  navActiveListColor: 'active-default', // active-default, active-blue, active-red, active-purple, active-lightblue, active-dark
  navListTitleColor: 'title-default', // title-default, title-blue, title-red, title-purple, title-lightblue, title-dark
  navListTitleHide: false,
  configBlock: true,
  layout6Background: 'linear-gradient(to right, #A445B2 0%, #D41872 52%, #FF0066 100%)', // used only for pre-layout = layout-6
  layout6BackSize: '' // 'auto' - for background pattern, 'cover' - for background images & used only for pre-layout = layout-6
};