Admin Template

Color Admin

“Laravel 11 Version” Documentation by “Sean Ngu” v5.4.2

Updated on: 27/November/2024
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

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
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 script to template_laravel/resources/views/includes/head.blade.php.
    <script src="/assets/plugins/ionicons/dist/ionicons/ionicons.js"></script>
  3. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <ion-icon name="pulse-outline" class="bg-gradient-blue"></ion-icon>
</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.7.7",
    "husky": "^9.1.7",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.21",
    "postcss": "^8.4.49",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.77.8",
    "sass-loader": "^14.2.1",
    "vue": "^3.5.13",
    "webpack": "^5.96.1"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^43.3.1",
    "@fortawesome/fontawesome-free": "^6.7.1",
    "@fullcalendar/bootstrap": "^6.1.15",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@highlightjs/cdn-assets": "^11.10.0",
    "abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
    "angular": "^1.8.3",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-router": "^1.0.30",
    "animate.css": "^4.1.1",
    "apexcharts": "4.0",
    "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.6",
    "clipboard": "^2.0.11",
    "d3": "^3.5.17",
    "datatables.net": "^2.1.8",
    "datatables.net-autofill": "^2.7.0",
    "datatables.net-autofill-bs5": "^2.7.0",
    "datatables.net-bs5": "^2.1.8",
    "datatables.net-buttons": "^3.2.0",
    "datatables.net-buttons-bs5": "^3.2.0",
    "datatables.net-colreorder": "^2.0.4",
    "datatables.net-colreorder-bs5": "^2.0.4",
    "datatables.net-fixedcolumns": "^5.0.4",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",
    "datatables.net-fixedheader": "^4.0.1",
    "datatables.net-fixedheader-bs5": "^4.0.1",
    "datatables.net-keytable": "^2.12.1",
    "datatables.net-keytable-bs5": "^2.12.1",
    "datatables.net-responsive": "^3.0.3",
    "datatables.net-responsive-bs5": "^3.0.3",
    "datatables.net-rowreorder": "^1.5.0",
    "datatables.net-rowreorder-bs5": "^1.5.0",
    "datatables.net-scroller": "^2.4.3",
    "datatables.net-scroller-bs5": "^2.4.3",
    "datatables.net-select": "^2.1.0",
    "datatables.net-select-bs5": "^2.1.0",
    "datepickk": "^1.4.1",
    "dropzone": "^5.9.3",
    "flag-icons": "^7.2.3",
    "flot": "^4.2.6",
    "gritter": "^1.7.4",
    "intro.js": "^7.2.0",
    "ion-rangeslider": "^2.3.1",
    "ionicons": "^7.4.0",
    "isotope-layout": "^3.0.6",
    "jquery": "^3.7.1",
    "jquery-knob": "^1.2.11",
    "jquery-migrate": "^3.5.2",
    "jquery-mockjax": "^2.6.1",
    "jquery-sparkline": "^2.4.0",
    "jquery-ui-dist": "^1.13.3",
    "jquery.maskedinput": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jstree": "^3.3.17",
    "jszip": "^3.10.1",
    "jvectormap-content": "^0.1.0",
    "jvectormap-next": "^3.1.1",
    "kbw-countdown": "^2.1.1",
    "lightbox2": "^2.11.5",
    "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.15",
    "perfect-scrollbar": "^1.5.6",
    "photoswipe": "^5.4.4",
    "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.9.1",
    "sweetalert": "^2.1.2",
    "swiper": "^11.1.15",
    "switchery": "github:abpetkov/switchery",
    "tag-it": "^2.0.0",
    "x-editable-bs4": "^1.5.6"
  }
}