Project Configuration

Configuration option for whole Template

Datta Able has a single source of truth for the 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

VITE ( TS )

src/config.ts

import { DefaultConfigProps } from 'types/config';

// ==============================|| THEME CONSTANT ||============================== //

export const APP_DEFAULT_PATH = '/dashboard/default';
export const DRAWER_WIDTH = 260;

export enum MenuOrientation {
  VERTICAL = 'vertical',
  TAB = 'tab',
  LAYOUT2 = 'layout 2',
  LAYOUT3 = 'layout 3'
}

export enum ThemeMode {
  LIGHT = 'light',
  DARK = 'dark',
  AUTO = 'auto'
}

export enum Gender {
  MALE = 'Male',
  FEMALE = 'Female'
}
export enum ThemeDirection {
  LTR = 'ltr',
  RTL = 'rtl'
}

// ==============================|| THEME CONFIG ||============================== //

const config: DefaultConfigProps = {
  fontFamily: `'Public Sans', sans-serif`,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  container: false,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  caption: true,
  sidebarTheme: false,
  themeDirection: ThemeDirection.LTR,
  customColor: 'preset-1',
  headerColor: '',
  navbarColor: '',
  logoColor: '',
  navbarCaptionColor: '',
  navbarImg: '',
  menuIcon: 'preset-1',
  menuLinkIcon: 'preset-1'
};

export default config;

VITE ( JS )

src/config.js

// ==============================|| THEME CONSTANT ||============================== //

export const APP_DEFAULT_PATH = '/dashboard/default';
export const DRAWER_WIDTH = 260;

export let MenuOrientation;

(function (MenuOrientation) {
  MenuOrientation['VERTICAL'] = 'vertical';
  MenuOrientation['TAB'] = 'tab';
  MenuOrientation['LAYOUT2'] = 'layout 2';
  MenuOrientation['LAYOUT3'] = 'layout 3';
})(MenuOrientation || (MenuOrientation = {}));

export let ThemeMode;

(function (ThemeMode) {
  ThemeMode['LIGHT'] = 'light';
  ThemeMode['DARK'] = 'dark';
  ThemeMode['AUTO'] = 'auto';
})(ThemeMode || (ThemeMode = {}));

export let Gender;

(function (Gender) {
  Gender['MALE'] = 'Male';
  Gender['FEMALE'] = 'Female';
})(Gender || (Gender = {}));

export let ThemeDirection;

(function (ThemeDirection) {
  ThemeDirection['LTR'] = 'ltr';
  ThemeDirection['RTL'] = 'rtl';
})(ThemeDirection || (ThemeDirection = {}));

// ==============================|| THEME CONFIG ||============================== //

const config = {
  fontFamily: `'Public Sans', sans-serif`,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  container: false,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  caption: true,
  sidebarTheme: false,
  themeDirection: ThemeDirection.LTR,
  customColor: 'preset-1',
  headerColor: '',
  navbarColor: '',
  logoColor: '',
  navbarCaptionColor: '',
  navbarImg: '',
  menuIcon: 'preset-1',
  menuLinkIcon: 'preset-1'
};

export default config;