Documentation - Color Admin

Follow the following step to install the reactjs in your localhost
You may refer to their official documentation for how to setup the node js & npm.
Setup Guide

<!-- run the following command -->
cd /your-path-url/template_react
npm install --force
npm start

<!-- browse the url -->
http://localhost:3000/

Verify that you are running at least node 20.x.x or later and npm 10.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into react folder -->
/admin/template/template_react/public/assets/img

File structure overview for React JS Version

template_react/
├── package.json
├── README.md
├── public/
└── src/
    ├── app.jsx
    ├── index.js
    ├── index.css
    ├── assets/ 
    ├── components/
    ├── config/
    ├── pages/
    └── scss/

Below is the code from app.js which include the header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

import React, { useEffect, useState } from 'react';
import { AppSettings } from './config/app-settings.js';
import { slideToggle } from './composables/slideToggle.js';

import Header from './components/header/header.jsx';
import Sidebar from './components/sidebar/sidebar.jsx';
import SidebarRight from './components/sidebar-right/sidebar-right.jsx';
import TopMenu from './components/top-menu/top-menu.jsx';
import Content from './components/content/content.jsx';
import ThemePanel from './components/theme-panel/theme-panel.jsx';

function App() {  
  const [appTheme] = useState('');
  const [appDarkMode, setAppDarkMode] = useState(false);
  const [appGradientEnabled, setAppGradientEnabled] = useState(false);
  const [appHeaderNone, setAppHeaderNone] = useState(false);
  const [appHeaderFixed, setAppHeaderFixed] = useState(true);
  const [appHeaderInverse, setAppHeaderInverse] = useState(false);
  const [appHeaderMegaMenu, setAppHeaderMegaMenu] = useState(false);
  const [appHeaderLanguageBar, setAppHeaderLanguageBar] = useState(false);
  const [hasScroll, setHasScroll] = useState(false);
  const [appSidebarNone, setAppSidebarNone] = useState(false);
  const [appSidebarWide, setAppSidebarWide] = useState(false);
  const [appSidebarLight, setAppSidebarLight] = useState(false);
  const [appSidebarMinify, setAppSidebarMinify] = useState(false);
  const [appSidebarMobileToggled, setAppSidebarMobileToggled] = useState(false);
  const [appSidebarTransparent, setAppSidebarTransparent] = useState(false);
  const [appSidebarSearch, setAppSidebarSearch] = useState(false);
  const [appSidebarFixed, setAppSidebarFixed] = useState(true);
  const [appSidebarGrid, setAppSidebarGrid] = useState(false);
  const [appContentNone, setAppContentNone] = useState(false);
  const [appContentClass, setAppContentClass] = useState('');
  const [appContentFullHeight, setAppContentFullHeight] = useState(false);
  const [appTopMenu, setAppTopMenu] = useState(false);
  const [appTopMenuMobileToggled] = useState(false);
  const [appSidebarTwo, setAppSidebarTwo] = useState(false);
  const [appSidebarEnd, setAppSidebarEnd] = useState(false);
  const [appSidebarEndToggled, setAppSidebarEndToggled] = useState(false);
  const [appSidebarEndMobileToggled, setAppSidebarEndMobileToggled] = useState(false);
  
  ...
  
  return (
    <AppSettings.Provider
      value={{
        appTheme,
        appDarkMode,
        appGradientEnabled,
        appHeaderNone,
        appHeaderFixed,
        ...
      }}
    >
      <div
        className={
          'app ' +
          (appGradientEnabled ? 'app-gradient-enabled ' : '') +
          (appHeaderNone ? 'app-without-header ' : '') +
          (appHeaderFixed && !appHeaderNone ? 'app-header-fixed ' : '') +
          (appSidebarFixed ? 'app-sidebar-fixed ' : '') +
          (appSidebarNone ? 'app-without-sidebar ' : '') +
          (appSidebarEnd ? 'app-with-end-sidebar ' : '') +
          (appSidebarWide ? 'app-with-wide-sidebar ' : '') +
          (appSidebarMinify ? 'app-sidebar-minified ' : '') +
          (appSidebarMobileToggled ? 'app-sidebar-mobile-toggled ' : '') +
          (appTopMenu ? 'app-with-top-menu ' : '') +
          (appContentFullHeight ? 'app-content-full-height ' : '') +
          (appSidebarTwo ? 'app-with-two-sidebar ' : '') +
          (appSidebarEndToggled ? 'app-sidebar-end-toggled ' : '') +
          (appSidebarEndMobileToggled ? 'app-sidebar-end-mobile-toggled ' : '') +
          (hasScroll ? 'has-scroll ' : '')
        }
      >
        {!appHeaderNone && <Header />}
        {!appSidebarNone && <Sidebar />}
        {appSidebarTwo && <SidebarRight />}
        {appTopMenu && <TopMenu />}
        {!appContentNone && <Content />}
        <ThemePanel />
      </div>
    </AppSettings.Provider>
  );
}

export default App;

List of components inside the components folder

components/
├── content/
├── float-sub-menu/
├── header/
├── panel/
├── sidebar/
├── sidebar-right/
├── theme-panel/
└── top-menu/

File to configure the default page options & page routes

config/
├── app-route.jsx
└── app-settings.js

Example of how to change page options in single page

import React, { useEffect, useContext } from 'react';
import { AppSettings } from './../../config/app-settings.js';

function PageWithoutSidebar() {
  const context = useContext(AppSettings);

  useEffect(() => {
    context.handleSetAppSidebarNone(true);
    
    return () => {
      context.handleSetAppSidebarNone(false);
    };
    // eslint-disable-next-line
  }, []);

  return (
  );
}

export default PageWithoutSidebar;

List of options:

context.handleSetAppHeaderNone (true);
context.handleSetAppHeaderInverse (true);
context.handleSetAppHeaderLanguageBar(true);
context.handleSetAppHeaderMegaMenu(true);
context.handleSetAppHeaderFixed(true);

context.handleSetAppSidebarNone(true);
context.handleSetAppSidebarWide (true);
context.handleSetAppSidebarLight(true);
context.handleSetAppSidebarMinified(true);
context.handleSetAppSidebarTransparent(true);
context.handleSetAppSidebarSearch(true);
context.handleSetAppSidebarFixed(true);
context.handleSetAppSidebarGrid(true);
context.handleSetAppSidebarEnd(true);
context.handleSetAppSidebarTwo(true);

context.handleSetAppContentNone(true);
context.handleSetAppContentClass('p-0');
context.handleSetAppContentFullHeight(true);

context.handleSetAppTopMenu(true);
context.handleSetAppBoxedLayout(true);
context.handleSetAppDarkMode('dark');
context.handleSetAppGradientEnabled(true);
context.handleSetAppTheme('blue');

context.toggleAppSidebarMinify();
context.toggleAppSidebarMobile();
context.toggleAppTopMenuMobile();
context.toggleAppSidebarEnd();
context.toggleAppSidebarEndMobile();

Enable dark mode from template_react/src/app.jsx.

...
const [appDarkMode, setAppDarkMode] = useState(true);   // LINE 14
...

Apple Design

Change the variable from template_react/src/scss/react.scss.
```
@import 'apple/styles';
```

Add the following css link to template_react/public/index.html.

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
```
<div class="menu-icon">
  <i class="ion-ios-pulse bg-gradient-blue"></i>
</div>
```

Facebook Design

Change the variable from template_react/src/scss/react.scss.
```
@import 'facebook/styles';
```

Change the following variable from template_react/src/app.jsx.

...
const [appHeaderInverse, setAppHeaderInverse] = useState(true);   // LINE 18
...

Transparent Design

Change the variable from template_react/src/scss/react.scss.
```
@import 'transparent/styles';
```

Add the .app-cover next to the <body> tag in template_react/public/index.html.

<body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

Change the variable from template_react/src/scss/react.scss.
```
@import 'google/styles';
```

Change the sidebar icon from Fontawesome to Material Icons.

<div class="menu-icon">
  <i class="material-icons">home</i>
</div>

Change the following variable from template_react/src/app.jsx.

...
const [appSidebarWide, setAppSidebarWide] = useState(true);    // LINE 23
const [appSidebarLight, setAppSidebarLight] = useState(true);  // LINE 24
...

Add the navbar desktop toggler to the .app-header in template_react/src/components/header.jsx.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

Change the variable from template_react/src/scss/react.scss.
```
@import 'material/styles';
```

Change the sidebar icon from Fontawesome to Material Icons.

<div class="menu-icon">
  <i class="material-icons">home</i>
</div>

Change the following variable from template_react/src/app.jsx.

...
const [appSidebarWide, setAppSidebarWide] = useState(true);    // LINE 23
...

Add the navbar desktop toggler to the .app-header in template_react/src/components/header.jsx.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Add the floating navbar form to the .app-header in template_react/src/components/header.jsx AND REMOVE the default .navbar-form.

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>

Change the .app-loader in template_react/public/index.html.

<!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

Now Vue.js version is fully scss configured. You may switch the Color Admin theme by changing the file /template_react/src/scss/react.scss.

@import 'default/styles';
 
<!-- other themes -->
@import 'apple/styles';
@import 'facebook/styles';
@import 'google/styles';
@import 'material/styles';
@import 'transparent/styles';

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/reactstrap

{
  "name": "color-admin",
  "version": "5.3.3",
  "private": true,
  "dependencies": {
    "@babel/plugin-transform-private-property-in-object": "^7.24.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@fullcalendar/bootstrap": "^6.1.11",
    "@fullcalendar/daygrid": "^6.1.11",
    "@fullcalendar/interaction": "^6.1.11",
    "@fullcalendar/list": "^6.1.11",
    "@fullcalendar/react": "^6.1.11",
    "@fullcalendar/timegrid": "^6.1.11",
    "@react-google-maps/api": "^2.19.3",
    "apexcharts": "3.47",
    "bootstrap": "^5.3.3",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.4.2",
    "codemirror": "^6.0.1",
    "flag-icons": "^7.2.1",
    "jsvectormap": "^1.5.3",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "node-sass": "^9.0.0",
    "photoswipe": "^5.4.3",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-bootstrap-daterangepicker": "^8.0.0",
    "react-calendar": "^4.8.0",
    "react-color": "^2.19.3",
    "react-countdown": "^2.3.5",
    "react-data-table-component": "^7.6.2",
    "react-datepicker": "^6.6.0",
    "react-datetime": "^3.2.0",
    "react-dom": "^18.2.0",
    "react-highlight": "^0.15.0",
    "react-input-mask": "^2.0.4",
    "react-notifications-component": "^4.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.1",
    "react-select": "^5.8.0",
    "react-tag-autocomplete": "^7.2.0",
    "simple-line-icons": "^2.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@iconify/react": "^4.1.1"
  }
}

Color Admin

A) Installation - top

B) File Structure - top

C) Page Structure - top

D) Components - top

E) Config - top

F) Dark Mode - top

G) Switch Design - top

Apple Design

Facebook Design

Transparent Design

Google Design

Material Design

H) Using SCSS - top

I) NPM Package - top