Quantum v1.0

Bootstrap 5 responsive admin template

documented by Sean Ngu

Updated on: 30/July/2024
By: Sean Ngu

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!

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

File structure overview for Laravel Version

quantum_laravel_v1.0/
├──template_laravel_startup/      // version without demo pages
└──template_laravel/              // version include all demo pages
    ├── artisan
    ├── composer.json
    ├── package.json
    ├── phpunit.xml
    ├── server.php
    ├── webpack.mix.js
    ├── app/
    ├── bootstrap/
    ├── config/
    ├── database/
    ├── public/
    ├── resources/
    │   ├── lang
    │   ├── js
    │   ├── scss
    │   └── views
    │       ├── errors
    │       ├── layout
    │       ├── pages             
    │       └── partial
    ├── routes/
    ├── storage/
    └── tests/

We split the header, sidebar, 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.

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}"{{ (!empty($htmlAttribute)) ? $htmlAttribute : '' }}>
<head>
  @include('partial.head')
</head>
<body class="{{ (!empty($bodyClass)) ? $bodyClass : '' }}">
  @include('partial.loader')
  
  <!-- BEGIN #app -->
  <div id="app" class="app {{ (!empty($appClass)) ? $appClass : '' }}">
    @includeWhen(empty($appHeaderHide), 'partial.header')
    @includeWhen(empty($appSidebarHide), 'partial.sidebar')
    @includeWhen(!empty($appTopNav), 'partial.top-nav')

    @if (empty($appContentHide))
      <!-- BEGIN #content -->
      <div id="content" class="app-content  {{ (!empty($appContentClass)) ? $appContentClass : '' }}">
        @yield('content')
      </div>
      <!-- END #content -->
    @else
      @yield('content')
    @endif

    @includeWhen(!empty($appFooter), 'partial.footer')
  </div>
  <!-- END #app -->

  @yield('outter_content')
  @include('partial.scroll-top-btn')
  @include('partial.theme-panel')
  @include('partial.scripts')
</body>
</html>

Below is the list of supported variable / setting in view file.

Variable Usage
@extends('layout.default', ['htmlAttribute' => '']) Set the attribute for html tag
@extends('layout.default', ['bodyClass' => '']) Set the css class for body tag
@extends('layout.default', ['appClass' => '']) Set the app class for div#app tag
@extends('layout.default', ['appContentClass' => '']) Set the app content class for div#app-content tag
@extends('layout.default', ['appHeaderHide' => true]) Flag to exclude header from your page
@extends('layout.default', ['appSidebarHide' => true]) Flag to exclude sidebar from your page
@extends('layout.default', ['appContentHide' => true]) Flag to place your page content outside #app-content container
@extends('layout.default', ['appFooter' => true]) Flag to include footer in your page
@extends('layout.default', ['appTopNav' => true]) Flag to include top nav in your page

Using laravel stacks to add css / js by page level.

// example for how to add page level css
@push('css')
  <link href="/assets/plugins/photoswipe/dist/photoswipe.css" rel="stylesheet" />
  ...
@endpush

// example for how to add page level js
@push('js')
  <script src="/assets/plugins/photoswipe/dist/photoswipe-ui-default.min.js"></script>
  ...
@endpush

The default sidebar menu generator will set the .menu-item as active stat if the current url match with the pre-defined url for sidebar menu. Below is an example for custom active stat for those dynamic url like /product/edit/124.

// set the menu as active stat from .blade file without matching the url
@php
  config(['sidebar.activeUrl' => '/pos/kitchen-order']);
@endphp

All the css files used in Studio Larvel has been compiled into two files app.min.css and vendor.min.css by laravel mix. You may change the color scheme from /resources/scss/_variables.scss.

vendor.min.css
  1. FontAwesome
  2. Bootstrap Icons
  3. jQuery UI
  4. Animate.css
  5. Perfect Scrollbar
app.min.css
  1. Bootstrap
  2. Quantum Core CSS

This theme compiles 5 javascript library into two files app.min.js and vendor.min.js by laravel mix.

vendor.min.js
  1. jQuery
  2. jQuery UI
  3. Bootstrap
  4. Perfect Scrollbar
  5. JavaScript Cookie
app.min.js
  1. Quantum Core Javascript

Sidebar collapsed:

@extends('layout.default', [
  'appClass' => 'app-sidebar-collapsed'
])

Full height:

@extends('layout.default', [
  'appClass' => 'app-content-full-height'
])

Full width:

@extends('layout.default', [
  'appClass' => 'app-content-full-width'
])

Fixed footer:

@extends('layout.default', [
  'appFooter' => 'true'
])

Boxed Layout

@extends('layout.default', [
  'appClass' => 'app-boxed-layout'
])

Top Nav

@extends('layout.default', [
  'appSidebarHide' => 'true',
  'appTopNav' => 'true',
  'appClass' => 'app-without-sidebar'
])

Without Sidebar

@extends('layout.default', [
  'appClass' => 'app-without-sidebar',
  'appSidebarHide' => 'true'
])

Without Header

@extends('layout.default', [
  'appClass' => 'app-without-header',
  'appHeaderHide' => 'true'
])

Add the theme class to the <body> tag in order to change the theme color.

Available Theme Options

<body class="theme-red">...</body>
<body class="theme-pink">...</body>
<body class="theme-orange">...</body>
<body class="theme-yellow">...</body>
<body class="theme-lime">...</body>
<body class="theme-green">...</body>
<body class="theme-teal">...</body>
<body class="theme-cyan">...</body>
<body class="theme-blue">...</body>
<body class="theme-purple">...</body>
<body class="theme-indigo">...</body>
<body class="theme-black">...</body>
<body class="theme-gray-100">...</body>
<body class="theme-gray-200">...</body>
<body class="theme-gray-300">...</body>
<body class="theme-gray-400">...</body>
<body class="theme-gray-500">...</body>
<body class="theme-gray-600">...</body>
<body class="theme-gray-700">...</body>
<body class="theme-gray-800">...</body>
<body class="theme-gray-900">...</body>

To enable RTL mode, follow these steps:

  1. Navigate to the /src/_variables.scss file in your code editor.
  2. Find the $enable-rtl variable and change its value to true:
    $enable-rtl: true;
    
    This will enable RTL mode for your application.
  3. Save the changes to the file.
  4. Open your terminal or command prompt and navigate to the root directory of your project.
  5. Run the following command to regenerate the app.min.css file:
    npm run dev
    
    This will regenerate the app.min.css file with the changes you made to the $enable-rtl variable.

Global Variables

The /resources/scss/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /resources/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.

<!-- global variable -->
/resources/scss/_variables.scss

I've used the following images, icons or other files as listed.

jQuery Plugins

  1. animate.css: https://daneden.github.io/animate.css/
  2. ApexCharts: https://apexcharts.com/
  3. jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/
  4. Bootstrap: http://getbootstrap.com/
  5. Bootstrap Icons: https://icons.getbootstrap.com/
  6. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  7. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  8. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  9. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  10. Bootstrap Table: https://bootstrap-table.com/
  11. Chart.js: https://chartjs.org
  12. DataTables: https://datatables.net/
  13. FontAwesome: https://fontawesome.com/
  14. Fullcalendar: https://fullcalendar.io/
  15. Iconify: https://icon-sets.iconify.design/
  16. jQuery: https://jquery.com/
  17. jQuery UI: https://jqueryui.com/
  18. jQuery Typeahead: http://www.runningcoder.org/jquerytypeahead/
  19. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  20. Javascript Cookie: https://github.com/js-cookie/js-cookie
  21. jszip: https://github.com/Stuk/jszip
  22. jVectormap: http://jvectormap.com/
  23. Lity: https://sorgalla.com/lity/
  24. Tag-It: http://aehlke.github.io/tag-it/
  25. Selectpicker: https://picker.uhlir.dev/
  26. Spectrum: https://seballot.github.io/spectrum/
  27. kbw-countdown: https://github.com/kbwood/countdown
  28. moment: http://momentjs.com/
  29. Pace: https://github.com/HubSpot/pace
  30. pdfmake: https://github.com/bpampuch/pdfmake
  31. Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
  32. PhotoSwipe: https://photoswipe.com/
  33. PicMo: https://picmojs.com/
  34. Popper.js: https://popper.js.org/
  35. Summernote: https://github.com/summernote/summernote

Photos

  1. Unsplash: https://unsplash.com/
  2. Freepik: https://www.freepik.com/