VRISTO - Multipurpose Tailwind CSS Admin Template

Documentation

Preview Buy Now

Installation process

The following process will be used to install admin dashboard using package manager.

Server Requirements: https://book.cakephp.org/4/en/installation.html
Install php package manager Composer : Please install latest version of composer from https://getcomposer.org
This project is using CakePHP version 4.x. https://book.cakephp.org/4/en/installation.html
Install Node.js : Please install latest version of Node.js from: https://nodejs.org
Copy cakephp folder from vristo-cakephp and extract to your suitable directory or folder.
Open terminal or command prompt with installation directory/folder.
Install PHP dependencies: composer install
Install node dependencies: npm install
Run command npm run dev to start designing.
Run command npm run build to build for production.
Run command bin/cake server to start php server which will run cakephp server or if you are using other server apps like WAMP, XAMPP or MAMP, you can follow that guide.

In case if you have any problems or query then please contact us

File Sturcture

The arrangement below describes our file structure.

Vristo
- config
  - routes.php - routes file
- src
  - Controller
    - all controller files and folders
- templates
  - index.php and all other app pages
- webroot
  - assets
    - css
      - all the css files and folders
    - images
      - all the image files
    - js
      - all the js files and folders
- .gitignore
- composer.json
- index.php
- package.json
- tailwind.config.js

Code Structure

This section will give you a brief description of our code.

1. Header Section : This is the default navbar section. It contains :

Sidebar Toggle button.
Quick access button for calendar.
Quick access button for todolist.
Quick access button for chat.
Search Bar
Theme toggle button.
Language Dropdown
Message Dropdown
Notification Dropdown
User Profile with Dropdown
Horizontal Menu

Note:- These categories are defined by us and you can modify as per your needs :)

<!--  BEGIN NAVBAR  -->
<header :class="{'dark' : $store.app.semidark && $store.app.menu === 'horizontal'}">
  <div class="shadow-sm">
      <div class="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">
          ..............................
      </div>

      <!-- horizontal menu -->
      <ul
          class="horizontal-menu hidden border-t border-[#ebedf2] bg-white py-1.5 px-6 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
      >
          ..............................
      </ul>
  </div>
</header>
<!--  END NAVBAR  -->

2. Main Container Section : The main container section includes header, footer and main content section.

Sidebar Section
Header Section
Main Content Section
Footer Section

<!--  BEGIN MAIN CONTAINER  -->
<body
  x-data="main"
  class="relative overflow-x-hidden font-nunito text-sm font-normal antialiased"
  :class="[ $store.app.sidebar ? 'toggle-sidebar' : '', $store.app.theme, $store.app.menu, $store.app.layout,$store.app.rtlClass]"
>
  ..............................
</body>
<!-- END MAIN CONTAINER -->

3. Sidebar : This is the sidebar code.

<!--  BEGIN SIDEBAR  -->
<div :class="{'dark text-white-dark' : $store.app.semidark}">
  <nav x-data="sidebar" class="sidebar fixed top-0 bottom-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300">
      ..............................
  </nav>
</div>
<!--  END SIDEBAR  -->

4. Main Content : This is the Main Content code section.

This is the root structure where you can create widgets, charts, tables etc.

<!--  BEGIN CONTENT PART  -->
<div class="main-content">
  ..............................
</div>

<!--  END CONTENT PART  -->

5. Footer : This is the Footer code.

<!--  BEGIN FOOTER  -->
<p class="pt-6 text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">
  ..............................
</p>
<!--  END FOOTER  -->

The Combined Code

Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above.

<!--  BEGIN MAIN CONTAINER  -->
<body
  x-data="main"
  class="relative overflow-x-hidden font-nunito text-sm font-normal antialiased"
  :class="[ $store.app.sidebar ? 'toggle-sidebar' : '', $store.app.theme, $store.app.menu, $store.app.layout,$store.app.rtlClass]"
>
  <!-- BEGIN SIDEBAR MENU OVERLAY -->
  <div x-cloak class="fixed inset-0 z-50 bg-[black]/60 lg:hidden" :class="{'hidden' : !$store.app.sidebar}" @click="$store.app.toggleSidebar()"></div>
  <!-- END SIDEBAR MENU OVERLAY -->

  <!-- BEGIN SCREEN LOADER -->
  <div class="screen_loader animate__animated fixed inset-0 z-[60] grid place-content-center bg-[#fafafa] dark:bg-[#060818]">
      <svg>...</svg>
  </div>
  <!-- END SCREEN LOADER -->

  <!-- BEGIN SCROLL TO TOP BUTTON -->
  <div class="fixed bottom-6 z-50 ltr:right-6 rtl:left-6" x-data="scrollToTop">
      <template x-if="showTopButton">
          <button type="button" class="btn btn-outline-primary animate-pulse rounded-full bg-[#fafafa] p-2 dark:bg-[#060818] dark:hover:bg-primary" @click="goToTop">
              <svg>...</svg>
          </button>
      </template>
  </div>
  <!-- END SCROLL TO TOP BUTTON -->

  <!-- BEGIN APP SETTING LAUNCHER -->
  <div>...</div>
  <!-- END APP SETTING LAUNCHER -->

  <div class="main-container min-h-screen text-black dark:text-white-dark" :class="[$store.app.navbar]">
      <!--  BEGIN SIDEBAR  -->
      <div :class="{'dark text-white-dark' : $store.app.semidark}">
          <nav x-data="sidebar" class="sidebar fixed top-0 bottom-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300">
              ..............................
          </nav>
      </div>
      <!--  END SIDEBAR  -->

      <!--  BEGIN CONTENT AREA  -->
      <div class="main-content">
          <!--  BEGIN NAVBAR  -->
          <header :class="{'dark' : $store.app.semidark && $store.app.menu === 'horizontal'}">
              <div class="shadow-sm">
                  <div class="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">..............................</div>

                  <!-- horizontal menu -->
                  <ul
                      class="horizontal-menu hidden border-t border-[#ebedf2] bg-white py-1.5 px-6 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
                  >
                      ..............................
                  </ul>
              </div>
          </header>
          <!--  END NAVBAR  -->

          <div class="animate__animated p-6" :class="[$store.app.animation]">
              <!--  BEGIN PAGE CONTENT  -->
              <div>..............................</div>
              <!--  END PAGE CONTENT  -->

              <!-- BEGIN FOOTER -->
              <p class="pt-6 text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">..............................</p>
              <!-- END FOOTER -->
          </div>
      </div>
      <!--  END CONTENT AREA  -->
  </div>
</body>
<!--  END MAIN CONTAINER  -->

Admin JS Code Structure

This section will give you a brief description of our admin template JS code.

1. webroot/assets/js/custom.js : This is primary js file. It is necessary for the layout to work. It contains the code as follows :-

Set default layout
Set Navigation Position
Set Navbar Type
Set Router Animation
Theme change funtionality
Direction change funtionality

(function () {
const $themeConfig = {
    locale: "en", // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
    theme: "light", // light, dark, system
    menu: "vertical", // vertical, collapsible-vertical, horizontal
    layout: "full", // full, boxed-layout
    rtlClass: "ltr", // rtl, ltr
    animation: "", // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
    navbar: "navbar-sticky", // navbar-sticky, navbar-floating, navbar-static
    semidark: false,
};

document.addEventListener("alpine:init", () => {
    Alpine.store("app", {
        // theme
        theme: Alpine.$persist($themeConfig.theme),
        toggleTheme(val) {
            if (!val) {
                val = this.theme || $themeConfig.theme; // light|dark|system
            }

            this.theme = val;
        },

        // navigation menu
        menu: Alpine.$persist($themeConfig.menu),
        toggleMenu(val) {
            if (!val) {
                val = this.menu || $themeConfig.menu; // vertical, collapsible-vertical, horizontal
            }
            this.sidebar = false; // reset sidebar state
            this.menu = val;
        },

        // layout
        layout: Alpine.$persist($themeConfig.layout),
        toggleLayout(val) {
            if (!val) {
                val = this.layout || $themeConfig.layout; // full, boxed-layout
            }

            this.layout = val;
        },

        // rtl support
        rtlClass: Alpine.$persist($themeConfig.rtlClass),
        toggleRTL(val) {
            if (!val) {
                val = this.rtlClass || $themeConfig.rtlClass; // rtl, ltr
            }

            this.rtlClass = val;
            this.setRTLLayout();
        },

        setRTLLayout() {
            document.querySelector("html").setAttribute("dir", this.rtlClass || $themeConfig.rtlClass);
        },

        // animation
        animation: Alpine.$persist($themeConfig.animation),
        toggleAnimation(val) {
            if (!val) {
                val = this.animation || $themeConfig.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInLeft, animate__fadeInRight
            }

            this.animation = val;
        },

        // navbar type
        navbar: Alpine.$persist($themeConfig.navbar),
        toggleNavbar(val) {
            if (!val) {
                val = this.navbar || $themeConfig.navbar; // navbar-sticky, navbar-floating, navbar-static
            }

            this.navbar = val;
        },

        // semidark
        semidark: Alpine.$persist($themeConfig.semidark),
        toggleSemidark(val) {
            if (!val) {
                val = this.semidark || $themeConfig.semidark;
            }

            this.semidark = val;
        },

        // multi language
        locale: Alpine.$persist($themeConfig.locale),
        toggleLocale(val) {
            if (!val) {
                val = this.locale || $themeConfig.locale;
            }

            this.locale = val;
        },

        // sidebar
        sidebar: false,
        toggleSidebar() {
            this.sidebar = !this.sidebar;
        },
    });
});
})();