Able Pro
React
React
  • ✨Overview
  • 🌱Pre-requisites
  • πŸš€Quick Start
  • πŸ“‚Folder Structure
  • πŸŒ€State Management
  • πŸ”’Authentication
    • Switch to Auth0
    • Switch to Firebase
    • Switch to AWS Cognito
  • πŸ›£οΈRouting
  • πŸ“‘Axios API Calls
  • 🌐Internationalization
  • 🎭Theme/Style Configuration
  • 🎨Color Presets
  • πŸ› οΈProject Configuration
  • πŸ“šHow to's
    • Login as First Page
    • Dashboard as First Page
    • Render Menu from the backend
    • Remove menu render from Backend
    • Remove Auth
  • 🀝Integration
    • Seed
    • Comparison
  • πŸ“¦Dependencies
  • πŸ–ŒοΈFigma
  • πŸ†˜Support
  • πŸ—“οΈRoadmap
  • πŸ“…Changelog
Powered by GitBook
On this page

Project Configuration

Configuration option for whole Template

Able Pro 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, locale, etc. All those can be configured at src/config

fontFamily

Inter var

String

set font family

mode

light

String

light, dark

fontFamily

Inter var

string

set font-family

i18n

en

String

en - English

fr - franΓ§ais

ro - RomÒnă

zh - δΈ­ε›½δΊΊ

themeDirection

ltr

boolean

set layout from right to left.

miniDrawer

false

boolean

true, false

container

true

boolean

see layout in stretch

presetColor

default

string

different preset for theme.

themeContrast

false

boolean

set box-shadow.

menuCaption

true

boolean

true, false

src/config.ts
// types
import { DefaultConfigProps } from 'types/config';

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

export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

export const APP_DEFAULT_PATH = '/dashboard/default';
export const HORIZONTAL_MAX_ITEM = 8;
export const DRAWER_WIDTH = 280;
export const MINI_DRAWER_WIDTH = 90;
export const HEADER_HEIGHT = 74;
export const GRID_COMMON_SPACING = { xs: 2, md: 2.5 };

export enum SimpleLayoutType {
  SIMPLE = 'simple',
  LANDING = 'landing'
}

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

export enum MenuOrientation {
  VERTICAL = 'vertical',
  HORIZONTAL = 'horizontal'
}

export enum ThemeDirection {
  LTR = 'ltr',
  RTL = 'rtl'
}

export enum NavActionType {
  FUNCTION = 'function',
  LINK = 'link'
}

export enum Gender {
  MALE = 'Male',
  FEMALE = 'Female'
}

export enum DropzopType {
  DEFAULT = 'default',
  STANDARD = 'standard'
}

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

const config: DefaultConfigProps = {
  fontFamily: `Inter var`,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  menuCaption: true,
  miniDrawer: false,
  container: true,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  themeDirection: ThemeDirection.LTR,
  themeContrast: false
};

export default config;
src/config.js
// ==============================|| THEME CONSTANT ||============================== //

export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

export const APP_DEFAULT_PATH = '/dashboard/default';
export const HORIZONTAL_MAX_ITEM = 8;
export const DRAWER_WIDTH = 280;
export const MINI_DRAWER_WIDTH = 90;
export const HEADER_HEIGHT = 74;
export const GRID_COMMON_SPACING = { xs: 2, md: 2.5 };

export let SimpleLayoutType;

(function (SimpleLayoutType) {
  SimpleLayoutType['SIMPLE'] = 'simple';
  SimpleLayoutType['LANDING'] = 'landing';
})(SimpleLayoutType || (SimpleLayoutType = {}));

export let ThemeMode;

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

export let MenuOrientation;

(function (MenuOrientation) {
  MenuOrientation['VERTICAL'] = 'vertical';
  MenuOrientation['HORIZONTAL'] = 'horizontal';
})(MenuOrientation || (MenuOrientation = {}));

export let ThemeDirection;

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

export let NavActionType;

(function (NavActionType) {
  NavActionType['FUNCTION'] = 'function';
  NavActionType['LINK'] = 'link';
})(NavActionType || (NavActionType = {}));

export let Gender;

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

export let DropzopType;

(function (DropzopType) {
  DropzopType['DEFAULT'] = 'default';
  DropzopType['STANDARD'] = 'standard';
})(DropzopType || (DropzopType = {}));

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

const config = {
  fontFamily: `Inter var`,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  menuCaption: true,
  miniDrawer: false,
  container: true,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  themeDirection: ThemeDirection.LTR,
  themeContrast: false
};

export default config;
PreviousColor PresetsNextHow to's

Last updated 2 months ago

πŸ› οΈ