Nodejs Structure | Hybrix - HTML5 Admin & Dashboard Template Documentation

Structure

Extract the zip file you received after purchase and you would find the exact below files and folders:

├── Admin
    ├── controllers
    ├── i18n
        ├── ar.json
        ├── ch.json
        ├── en.json
        ├── fr.json
        ├── gr.json
        ├── it.json
        ├── ru.json
        └── sp.json
    ├── models
    ├── public
      └── assets
             ├── css
             ├── fonts
             ├── images
             ├── js
             ├── json
             ├── lang
             ├── All Other Folder
             └── All Other Files
    ├── routes
        └── routes.js
    ├── src
    ├── utils
    ├── views
        ├── auth
        ├── layouts
        ├── partials
        └── all ejs files will be here.
    ├── app.js  
    ├── config.env
    ├── package.json
    ├── package-libs-config.json
    ├── package-lock.json
    └── webpack.config.js

File structure

We have used ejs files.

<%- include ('../partials/main') %>
<head>
<%- include ('../partials/title-meta') %>
<%- HeaderCss %>
<%- include ('../partials/head-css') %>
</head>
<body>
    <div id="layout-wrapper">
        <%- include ('../partials/menu') %>
        <%- include ('../partials/sidebar') %>
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    <%- include ('../partials/page-title') %>
                    <%- body%>
                </div><!-- container-fluid -->
            </div><!-- End Page-content -->
            <%- include ('../partials/footer') %>
        </div><!-- end main content-->
    </div><!-- END layout-wrapper -->
    <%- include ('../partials/customizer') %>
    <%- include ('../partials/vendor-scripts') %>
    <%- FooterJs %>
    <!-- App js -->
    <script src="assets/js/app.js">
</body>
</html>

Theme Setup

You can set the theme in the views/layout/main.ejs file in the html tag.


                                <html data-theme="default">

data-theme="default"	To set default theme
data-theme="Material"	To set material theme
data-theme="Creative"	To set creative theme
data-theme="Minimal"	To set minimal theme
data-theme="Modern"	To set modern theme
data-theme="Interaction"	To set interaction theme

Layout setup

You can set the default layout in the views/layout/main.ejs file in the html tag.


                                <html data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg">

data-layout="vertical"	To set default layout as Vertical
data-layout="horizontal"	To set default layout as Horizontal
data-layout="twocolumn"	To set default layout as Two column
data-layout-mode="light"	To set Light layout mode.
data-layout-mode="dark"	To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid"	To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed"	To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed"	To set layout position Fixed.
data-layout-position="scrollable"	To set layout position Scrollable.
data-topbar="light"	To set the Light color of Topbar.
data-topbar="dark"	To set the dark color of Topbar.
data-sidebar-size="lg"	To set the Large left sidebar.
data-sidebar-size="md"	To set the Compact left sidebar.
data-sidebar-size="sm"	To set the Icon view left sidebar.
data-sidebar-size="sm-hover"	To set the Icon hover left sidebar.
data-layout-style="default"	To set the Default layout.
data-layout-style="detached"	To set the Detached layout.
data-sidebar="light"	To set the Light color of left Sidebar.
data-sidebar="dark"	To set the Dark color of left Sidebar.
data-sidebar="gradient"	To set the Gradient color of left Sidebar.
data-sidebar="gradient-2"	To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3"	To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4"	To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none"	To Disable image on left Sidebar.
data-sidebar-image="img-1"	To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2"	To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3"	To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4"	To set the img-4 Image of left Sidebar.
data-preloader="enable"	To enable the preloader on the Page.
data-preloader="disable"	To disable the preloader on the Page.