Admin Template

Color Admin

“Laravel 10 Version” Documentation by “Sean Ngu” v5.3.3

Last Updated: 28/March/2024
By: Sean Ngu

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!

* Support email can be found via downloaded version of Color Admin

A) Installation - top

Follow the following step to install the laravel in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide 

<!-- run the following command --> 
cd /your-path-url/template_laravel
composer install
npm install --force
npm run dev
php artisan serve

<!-- browse the url --> 
http://127.0.0.1:8000/

Make sure PHP >= 8.0.0 & node.js has been installed on your localhost / server

Copy over the required image from global assets folder

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

B) File Structure - top

File structure overview for Laravel Version

template_laravel/
├── artisan
├── composer.json
├── package.json
├── phpunit.xml
├── readme.md
├── server.php
├── webpack.mix.js
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
│   ├── lang
│   └── views
│       ├── includes
│       ├── layouts
│       └── pages
├── routes/
├── storage/
└── tests/

C) Page Structure - top

We split the header, sidebar, top menu, footer and etc into few other part and include it in the base file. Base file has been located in /resources/views/layouts/default.blade.php.

@include('includes.component.page-loader')

<div id="app" class="app app-sidebar-fixed {{ $appClass }}">
  
  @includeWhen(!$appHeaderHide, 'includes.header')
  
  @includeWhen($appTopMenu, 'includes.top-menu')
  
  @includeWhen(!$appSidebarHide, 'includes.sidebar')
  
  @includeWhen($appSidebarTwo, 'includes.sidebar-right')
  
  <div id="content" class="app-content {{ $appContentClass }}">
    @yield('content')
  </div>
  
  @include('includes.component.theme-panel')
  
  @include('includes.component.scroll-top-btn')
  
</div>

@yield('outside-content')

@include('includes.page-js')

D) Page Head - top

Page head contains metadata, javascript and css files:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
  <meta charset="utf-8" />
  <title>Color Admin | @yield('title')</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
    name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />

  <!-- ================== BEGIN BASE CSS STYLE ================== -->
  <link href="/assets/css/vendor.min.css" rel="stylesheet" />
  <link href="/assets/css/app.min.css" rel="stylesheet" />
  <!-- ================== END BASE CSS STYLE ================== -->

  @stack('css')
</head>
@php
  $bodyClass = (!empty($appBoxedLayout)) ? 'boxed-layout ' : '';
  $bodyClass .= (!empty($paceTop)) ? 'pace-top ' : $bodyClass;
  $bodyClass .= (!empty($bodyClass)) ? $bodyClass . ' ' : $bodyClass;
  $appSidebarHide = (!empty($appSidebarHide)) ? $appSidebarHide : '';
  $appHeaderHide = (!empty($appHeaderHide)) ? $appHeaderHide : '';
  $appSidebarTwo = (!empty($appSidebarTwo)) ? $appSidebarTwo : '';
  $appSidebarSearch = (!empty($appSidebarSearch)) ? $appSidebarSearch : '';
  $appTopMenu = (!empty($appTopMenu)) ? $appTopMenu : '';
  
  $appClass = (!empty($appTopMenu)) ? 'app-with-top-menu ' : '';
  $appClass .= (!empty($appHeaderHide)) ? 'app-without-header ' : ' app-header-fixed ';
  $appClass .= (!empty($appSidebarEnd)) ? 'app-with-end-sidebar ' : '';
  $appClass .= (!empty($appSidebarWide)) ? 'app-with-wide-sidebar ' : '';
  $appClass .= (!empty($appSidebarHide)) ? 'app-without-sidebar ' : '';
  $appClass .= (!empty($appSidebarMinified)) ? 'app-sidebar-minified ' : '';
  $appClass .= (!empty($appSidebarTwo)) ? 'app-with-two-sidebar app-sidebar-end-toggled ' : '';
  $appClass .= (!empty($appContentFullHeight)) ? 'app-content-full-height ' : '';
  
  $appContentClass = (!empty($appContentClass)) ? $appContentClass : '';
@endphp
<body class="{{ $bodyClass }}">

E) Top Menu - top

@php
  $appHeaderAttr = (!empty($appHeaderInverse)) ? ' data-bs-theme=dark' : '';
  $appHeaderMenu = (!empty($appHeaderMenu)) ? $appHeaderMenu : '';
  $appHeaderMegaMenu = (!empty($appHeaderMegaMenu)) ? $appHeaderMegaMenu : ''; 
  $appHeaderTopMenu = (!empty($appHeaderTopMenu)) ? $appHeaderTopMenu : '';
@endphp

<!-- BEGIN #header -->
<div id="header" class="app-header"{{ $appHeaderAttr }}>
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    @if ($appSidebarTwo)
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-end-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @endif
    <a href="/" class="navbar-brand"><span class="navbar-logo"></span> <b>Color</b> Admin</a>
    @if ($appHeaderMegaMenu && !$appSidebarTwo)
    <button type="button" class="navbar-mobile-toggler" data-bs-toggle="collapse" data-bs-target="#top-navbar">
      <span class="fa-stack fa-lg">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
    @endif
    @if($appTopMenu && !$appSidebarHide && !$appSidebarTwo)
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-top-menu-mobile">
      <span class="fa-stack fa-lg">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
    @endif
    @if($appTopMenu && $appSidebarHide && !$appSidebarTwo)
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-top-menu-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @endif
    @if (!$appSidebarHide)
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @endif
  </div>
  
  @includeWhen($appHeaderMegaMenu, 'includes.component.header-mega-menu')
  
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item navbar-form">
      <form action="" method="POST" name="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter keyword" />
          <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
        </div>
      </form>
    </div>
    <div class="navbar-item dropdown">
      <a href="#" data-bs-toggle="dropdown" class="navbar-link dropdown-toggle icon">
        <i class="fa fa-bell"></i>
        <span class="badge">5</span>
      </a>
      @include('includes.component.header-dropdown-notification')
    </div>
    
    @isset($appHeaderLanguageBar)
      @include('includes.component.header-language-bar')
    @endisset
    
    <div class="navbar-item navbar-user dropdown">
      <a href="#" class="navbar-link dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown">
        <img src="/assets/img/user/user-13.jpg" alt="" /> 
        <span>
          <span class="d-none d-md-inline">Adam Schwartz</span>
          <b class="caret"></b>
        </span>
      </a>
      @include('includes.component.header-dropdown-profile')
    </div>
    
    @if($appSidebarTwo)
    <div class="navbar-divider d-none d-md-block"></div>
    <div class="navbar-item d-none d-md-block">
      <a href="javascript:;" data-toggle="app-sidebar-end" class="navbar-link icon">
        <i class="fa fa-th"></i>
      </a>
    </div>
    @endif
  </div>
  <!-- END header-nav -->
</div>
<!-- END #header -->

F) Sidebar - top

@php
  $appSidebarClass = (!empty($appSidebarTransparent)) ? 'app-sidebar-transparent' : '';
  $appSidebarAttr  = (!empty($appSidebarLight)) ? '' : ' data-bs-theme=dark';
@endphp
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar {{ $appSidebarClass }}" {{ $appSidebarAttr }}>
  <!-- BEGIN scrollbar -->
  <div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
    <div class="menu">
      @if (!$appSidebarSearch)
        ...
      @endif
      
      @if ($appSidebarSearch)
        ...
      @endif
      
      <div class="menu-header">Navigation</div>
      @php
        $currentUrl = (Request::path() != '/') ? '/'. Request::path() : '/';
        
        foreach (config('sidebar.menu') as $key => $menu) {
          ...
        }
      @endphp
      
      <!-- BEGIN minify-button -->
      <div class="menu-item d-flex">
        <a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify"><i class="fa fa-angle-double-left"></i></a>
      </div>
      <!-- END minify-button -->
    </div>
    <!-- END menu -->
  </div>
  <!-- END scrollbar -->
</div>
<div class="app-sidebar-bg" data-bs-theme="dark"></div>
<div class="app-sidebar-mobile-backdrop">
  <a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
</div>
<!-- END #sidebar -->

G) Page Content - top

Content block display the data from the single page 

<div id="content" class="app-content {{ $appContentClass }}">
  @yield('content')
</div>

H) End of Page (Javascript) - top

Javascript files loaded in the end of page. This will reduce page load time. 

  <!-- ================== BEGIN core-js ================== -->
  <script src="/assets/js/vendor.min.js"></script>
  <script src="/assets/js/app.min.js"></script>
  <!-- ================== END core-js ================== -->

  @stack('scripts')
</body>
</html>

I) Page Options - top

Here is the general option for the each case of page options. You may set the option in your view file.

Option List

@extends('layouts.default', [
  'bodyClass' = > '',
  'appClass' = > '',
  'appTopMenu' => true,
  'appSidebarEnd' => true,
  'appSidebarLight' => true,
  'appSidebarWide' => true,
  'appSidebarHide' => true,
  'appSidebarTransparent' => true,
  'appSidebarMinified' => true,
  'appSidebarTwo' => true,,
  'appSidebarSearch' => true,
  'appContentClass' => '',
  'appContentFullHeight' => true
])

J) Dark Mode - top

Add the data-bs-theme="dark" attribute to <html> in template_laravel/resources/views/layouts/default.blade.php order to enable the dark mode.

If you have pre-select the dark-mode option in theme panel, do not forget to clear the browser cookie or remove the theme panel so that it won't affect the dark-mode class while page load. 
<html lang="en" data-bs-theme="dark">

K) Switch Design - top

Apple Design

  1. Change the following variable from template_laravel/webpack.mix.js.
    var theme = 'apple';
  2. Add the following css link to template_laravel/resources/views/includes/head.blade.php.
    <link href="/assets/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" />
  3. 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

  1. Change the following variable from template_laravel/webpack.mix.js.
    var theme = 'facebook';
  2. Add the attribute [data-bs-theme="dark"] to the .app-header container in template_laravel/resources/views/includes/header.blade.php.
    <div id="header" class="app-header" data-bs-theme="dark">
  ...
</div>

Transparent Design

  1. Change the following variable from template_laravel/webpack.mix.js.
    var theme = 'transparent';
  2. Add the .app-cover next to the <body> tag in template_laravel/resources/views/layouts/default.blade.php.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the following variable from template_laravel/webpack.mix.js.
    var theme = 'google';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_laravel/resources/views/layouts/default.blade.php.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_laravel/resources/views/includes/header.blade.php.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change the following variable from template_laravel/webpack.mix.js.
    var theme = 'material';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_laravel/resources/views/includes/sidebar.blade.php.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_laravel/resources/views/includes/header.blade.php.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_laravel/resources/views/includes/header.blade.php 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="#" data-toggle="app-header-floating-form" 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" data-dismiss="app-header-floating-form">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_laravel/resources/views/includes/component/page-loader.blade.php.
    <!-- 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 -->

L) Using SCSS - top

Laravel version now is fully scss configured. You may switch the Color Admin theme by changing the variable name in webpack.mix.js.

const theme = 'default';
 
<!-- theme option -->
const theme = 'apple';
const theme = 'facebook';
const theme = 'google';
const theme = 'material';
const theme = 'transparent';

M) NPM Package - top

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/laravel-mix 

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "devDependencies": {
    "axios": "^1.6.8",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.21",
    "postcss": "^8.4.38",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.72.0",
    "sass-loader": "^14.1.1",
    "vue": "^3.4.21",
    "webpack": "^5.91.0"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^41.2.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@fullcalendar/bootstrap": "^6.1.11",
    "@fullcalendar/core": "^6.1.11",
    "@fullcalendar/daygrid": "^6.1.11",
    "@fullcalendar/interaction": "^6.1.11",
    "@fullcalendar/list": "^6.1.11",
    "@fullcalendar/timegrid": "^6.1.11",
    "@highlightjs/cdn-assets": "^11.9.0",
    "abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
    "angular": "^1.8.2",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-router": "^1.0.30",
    "animate.css": "^4.1.1",
    "apexcharts": "3.47",
    "blueimp-file-upload": "^10.32.0",
    "blueimp-gallery": "^3.4.0",
    "bootstrap": "^5.3.3",
    "bootstrap-datepicker": "^1.10.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-datetime-picker": "^2.4.4",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "bootstrap-timepicker": "^0.5.2",
    "bootstrap3-wysihtml5-bower": "^0.3.3",
    "chart.js": "^4.4.2",
    "clipboard": "^2.0.11",
    "d3": "^3.5.17",
    "datatables.net": "^2.0.3",
    "datatables.net-autofill": "^2.7.0",
    "datatables.net-autofill-bs5": "^2.7.0",
    "datatables.net-bs5": "^2.0.3",
    "datatables.net-buttons": "^3.0.1",
    "datatables.net-buttons-bs5": "^3.0.1",
    "datatables.net-colreorder": "^2.0.0",
    "datatables.net-colreorder-bs5": "^2.0.0",
    "datatables.net-fixedcolumns": "^5.0.0",
    "datatables.net-fixedcolumns-bs5": "^5.0.0",
    "datatables.net-fixedheader": "^4.0.1",
    "datatables.net-fixedheader-bs5": "^4.0.1",
    "datatables.net-keytable": "^2.12.0",
    "datatables.net-keytable-bs5": "^2.12.0",
    "datatables.net-responsive": "^3.0.1",
    "datatables.net-responsive-bs5": "^3.0.1",
    "datatables.net-rowreorder": "^1.5.0",
    "datatables.net-rowreorder-bs5": "^1.5.0",
    "datatables.net-scroller": "^2.4.1",
    "datatables.net-scroller-bs5": "^2.4.1",
    "datatables.net-select": "^2.0.0",
    "datatables.net-select-bs5": "^2.0.0",
    "datepickk": "^1.4.1",
    "dropzone": "^5.9.3",
    "flag-icons": "^7.2.1",
    "flot": "^4.2.6",
    "gritter": "^1.7.4",
    "intro.js": "^7.2.0",
    "ion-rangeslider": "^2.3.1",
    "ionicons": "^7.3.0",
    "isotope-layout": "^3.0.6",
    "jquery": "^3.7.1",
    "jquery-knob": "^1.2.11",
    "jquery-migrate": "^3.4.1",
    "jquery-mockjax": "^2.6.1",
    "jquery-sparkline": "^2.4.0",
    "jquery-ui-dist": "^1.13.2",
    "jquery.maskedinput": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jstree": "^3.3.16",
    "jszip": "^3.10.1",
    "jvectormap-content": "^0.1.0",
    "jvectormap-next": "^3.1.1",
    "kbw-countdown": "^2.1.1",
    "lightbox2": "^2.11.4",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "nvd3": "^1.8.6",
    "oclazyload": "^1.1.0",
    "pace-js": "^1.2.4",
    "parsleyjs": "^2.9.2",
    "pdfmake": "^0.2.10",
    "perfect-scrollbar": "^1.5.5",
    "photoswipe": "^5.4.3",
    "raphael": "^2.3.0",
    "select-picker": "^0.3.2",
    "select2": "^4.0.13",
    "simple-line-icons": "^2.5.5",
    "spectrum-colorpicker2": "^2.0.10",
    "summernote": "^0.8.20",
    "sweetalert": "^2.1.2",
    "swiper": "^11.0.7",
    "switchery": "github:abpetkov/switchery",
    "tag-it": "^2.0.0",
    "x-editable-bs4": "^1.5.6"
  }
}