Able Pro
NextJS
NextJS
  • ✨Overview
  • 🌴Pre-requisites
  • πŸš€Quick Start
  • πŸ“‚Folder Structure
  • πŸŒ€State Management
  • πŸ”’Authentication
  • πŸ“‘Axios API Calls
  • 🌐Internationalization
  • πŸ› οΈProject Configuration
  • 🎨Color Presets
  • 🎭Theme/Style Configuration
  • πŸ“šHow to
    • Login as First Page
    • Dashboard as First Page
    • Remove menu render from Backend
    • Render Menu from the backend
    • Remove Auth
  • πŸ–ŒοΈFigma
  • 🀝Integration
    • Seed
    • Comparison
  • πŸ“¦Dependencies
  • πŸ—“οΈRoadmap
  • πŸ†˜Support
  • πŸ“…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 allows users to 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

roboto

String

set font family

mode

light

String

light, dark, auto

i18n

en

String

en - English

fr - franΓ§ais

ro - RomÒnă

zh - δΈ­ε›½δΊΊ

menuOrientation

vertical

String

vertical, horizontal

menuCaption

true

boolean

true, false

themeDirection

ltr

string

ltr, rtl

miniDrawer

false

boolean

true, false

container

true

boolean

see layout in stretch

presetColor

default

string

different preset for theme.

themeContrast

false

boolean

set body background.

// next
import { Inter } from 'next/font/google';

// 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 };

const inter = Inter({
  subsets: ['latin'],
  fallback: ['sans-serif'],
  weight: ['300', '400', '500', '700'],
  adjustFontFallback: false
});

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.style.fontFamily,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  menuCaption: true,
  miniDrawer: false,
  container: true,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  themeDirection: ThemeDirection.LTR,
  themeContrast: false
};

export default config;
// next
import { Inter } from 'next/font/google';

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

export const twitterColor = '#1DA1F2';
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 };

const inter = Inter({
  subsets: ['latin'],
  fallback: ['sans-serif'],
  weight: ['300', '400', '500', '700'],
  adjustFontFallback: false
});

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.style.fontFamily,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  menuCaption: true,
  miniDrawer: false,
  container: true,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  themeDirection: ThemeDirection.LTR,
  themeContrast: false
};

export default config;
PreviousInternationalizationNextColor Presets

Last updated 2 months ago

πŸ› οΈ