image

Installation process

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

  • This project is using Ruby on Rails version 7.x. https://guides.rubyonrails.org/getting_started.html
  • This project is using Ruby version 3.1.3. It can be installed using "rbenv" https://phoenixnap.com/kb/install-ruby-ubuntu#ftoc-heading-2
  • sudo gem install rails OR gem install rails to install rails on your device
  • rbenv install 3.1.3 to install ruby version 3.1.3 on your device
  • rbenv global 3.1.3 to set ruby version 3.1.3 global in your device
  • Install Node.js : Please install latest version of Node.js from: https://nodejs.org
  • Copy ruby folder from vristo-ruby and extract to your suitable directory or folder.
  • Open terminal or command prompt with installation directory/folder.
  • Install node dependencies: npm install
  • Run command npm run dev to start vite development.
  • Run command npm run build to build for production.
  • Run command bin/rails server to start ruby server which will run rails 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
    • app
      • controllers
      • views
    • config
    • public
      • assets
        • css
        • images
        • js
    • .gitignore
    • .gitattributes
    • Gemfile
    • 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. public/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;
        },
    });
});
})();