Introduction


Mendy Admin is a popular open source WebApp template for admin dashboards and control panels. Mendy Admin is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Mendy Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Installation


This is the simple static HTML template so no need any headech to install it. just double click on any html (html/ltr/) file and you can access it.


Just simple steps to follow if you are using npm for package manager:


1) Install Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.

2) NPM Packages: You can do this by running npm install from the root of your project to install all the necessary dependencies.

Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of Mendy Admin admin comes it does not affect your code.
For compiling scss & js:

We used gulp for compiling scss and js file so if you are also using scss then try our gulp task manager to compile scss

If you never work with gulp then you need to get starterd from here: https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md

1. Install gulp globally:

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

$ npm install --global gulp-cli

2. Install gulp in your project devDependencies:

$ npm install --save-dev gulp

3. We already created gulpfile.js at the root of the project:
if you want any other task you can add that

4. Run gulp:

$ gulp



How to Install npm dependencies?

In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder, after that you need to run this command gulp copy to include dependencies in assets/libs folder.

Layout options


With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 3 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

You can find app.init.js file from here:

                                    
                                        dist/js/app.init.js
                                    
                                
                                    
                                        Layout: 'vertical',
                                        LogoBg: 'skin2', // You can change the Value to be skin1/skin2/skin3
                                        NavbarBg: 'skin3', // You can change the Value to be skin1/skin2/skin3
                                        SidebarType: 'full', // You can change it full / mini-sidebar
                                        SidebarColor: 'skin2', // You can change the Value to be skin1/skin2/skin3
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to apply Minisidebar(Collapse) Sidebar ?

For Collapse sidebar, you can change SidebarType: 'mini-sidebar' in place of SidebarType: 'full'.

                                    
                                        SidebarType: 'mini-sidebar', // You can change it full / mini-sidebar / iconbar / overlay
                                    
                                
How to apply Full Sidebar ?

For Full sidebar, you can change SidebarType: 'full'.

                                    
                                        SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
                                    
                                
How to apply Fixed Sidebar ?

For Fixed sidebar, you can change SidebarPosition: true, in place of SidebarPosition: false,.

                                    
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to apply Fixed Header ?

For Fixed Header, you can change HeaderPosition: true, in place of HeaderPosition: false.

                                    
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                

For the Horizontal Demo Version


You can find app.init.horizontal.js file from here:

                                    
                                        dist/js/app.init.horizontal.js
                                    
                                

For Horizontal sidebar, you can change Layout: 'horizontal'.

                                    
                                        Layout: 'horizontal',
                                        LogoBg: 'skin2', // You can change the Value to be skin1/skin2/skin3
                                        NavbarBg: 'skin3', // You can change the Value to be skin1/skin2/skin3
                                        SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
                                        SidebarColor: 'skin2', // You can change the Value to be skin1/skin2/skin3
                                        SidebarPosition: false, // it can be true / false ( true means Fixed and false means absolute )
                                        HeaderPosition: false, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                

Color Variations

With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 3 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:

                                    
                                        Layout: 'vertical',
                                        LogoBg: 'skin2', // You can change the Value to be skin1/skin2/skin3
                                        NavbarBg: 'skin3', // You can change the Value to be skin1/skin2/skin3
                                        SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
                                        SidebarColor: 'skin2', // You can change the Value to be skin1/skin2/skin3
                                        SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                        HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
                                    
                                
How to Change Sidebar Color?
To change a sidebar color, choose any of the following options.

To apply dark color of sidebar

                                    
                                        SidebarColor: 'skin1' //To apply dark color of sidebar
                                    
                                

To apply purple color of sidebar

                                    
                                        SidebarColor: 'skin2' //To apply purple color of sidebar
                                    
                                

To apply white color of sidebar

                                    
                                        SidebarColor: 'skin3' //To apply white color of sidebar
                                    
                                
How to Change Navbar Color?
To change a navbar color, choose any of the following options.

To apply dark color of navbar

                                    
                                        NavbarBg: 'skin1' //To apply dark color of navbar
                                    
                                

To apply purple color of navbar

                                    
                                        NavbarBg: 'skin2' //To apply purple color of navbar
                                    
                                

To apply white color of navbar

                                    
                                        NavbarBg: 'skin3' //To apply white color of navbar
                                    
                                
How to Change Logo Background Color?
To change a logo background color, choose any of the following options.

To apply dark background-color of logo

                                    
                                        LogoBg: 'skin1' //To apply dark background-color of logo
                                    
                                

To apply purple background-color of logo

                                    
                                        LogoBg: 'skin2' //To apply purple background-color of logo
                                    
                                

To apply white background-color of logo

                                    
                                        LogoBg: 'skin3' //To apply white background-color of logo
                                    
                                

Folder Structure


we follow simple structure for the template

                                    
                                            Mendy Admin
                                              |
                                              |
                                              |
                                              |── html
                                              |     └── ltr/
                                              |         └── All HTML Files
                                              |
                                              |     └── mini-sidebar/
                                              |         └── All HTML Files
                                              |
                                              |     └── horizontal/
                                              |         └── All HTML Files
                                              |
                                              |── assets
                                              |     └── extra-libs/
                                              |          └── plugins which is not available on npm
                                              |
                                              |     └── images/
                                              |         └── All Theme images
                                              |
                                              |     └── libs/
                                              |         └── All Required plugins files
                                              |
                                              |── dist
                                              |     └── css/
                                              |          └── All css files
                                              |
                                              |     └── js/
                                              |         └── All Js files
                                              |
                                              |── src
                                              |     └── scss/
                                              |          └── All scss files
                                              |
                                              |── package.json
                                              |
                                              |
                                              |── gulpfile.js
                                              |
                                    
                                

Plugins (Find Js and CSS Path)


You can find plugins from here as per page requirements

Select Plugin
jQuery Block-UI
CSS Files
                                        
                                            No CSS available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/blockUI/jquery.blockUI.js" type="text/javascript"></script>
                                        
                                    
Bootstrap Colorpicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap datepicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
                                        
                                    
Bootstrap touchspin
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
                                        
                                    
chart-js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/chart-js/dist/Chart.min.js" type="text/javascript"></script>
                                        
                                    
chartist
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/chartist/dist/chartist.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/chartist/dist/chartist.min.js" type="text/javascript"></script>
                                        
                                    
chartist-plugin-tooltips
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js" type="text/javascript"></script>
                                        
                                    
clockpicker
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/clockpicker/dist/bootstrap-clockpicker.min.css" />

                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/clockpicker/dist/jquery-clockpicker.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/clockpicker/dist/bootstrap-clockpicker.min.js" type="text/javascript"></script>

                                        <script src="../../assets/libs/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>
                                        
                                    
cropper
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/cropper/dist/cropper.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/cropper/dist/cropper.min.js" type="text/javascript"></script>
                                        
                                    
datatables
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/datatables/media/css/jquery.dataTables.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
                                        
                                    
dragula
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/dragula/dist/dragula.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/dragula/dist/dragula.min.js" type="text/javascript"></script>
                                        
                                    
dropzone
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/dropzone/dist/dropzone.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/dropzone/dist/dropzone.js" type="text/javascript"></script>
                                        
                                    
fullcalendar
CSS Files
                                        
                                        <link rel="stylesheet" type="text/css" href="../../assets/libs/fullcalendar/dist/fullcalendar.min.css" />
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js" type="text/javascript"></script>
                                        
                                    
gmaps
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/gmaps/dist/gmaps.min.js" type="text/javascript"></script>
                                        
                                    
jquery
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
                                        
                                    
jvectormap
CSS Files
                                        
                                        <script src="../../assets/libs/jvectormap/jquery-jvectormap.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/jvectormap/jquery-jvectormap.min.js" type="text/javascript"></script>
                                        
                                    
magnific-popup
CSS Files
                                        
                                        <script src="../../assets/libs/magnific-popup/dist/magnific-popup.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
                                        
                                    
moment
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/moment/moment.js" type="text/javascript"></script>
                                        
                                    
perfect-scrollbar
CSS Files
                                        
                                        <script src="../../assets/libs/perfect-scrollbar/css/perfect-scrollbar.min.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/perfect-scrollbar/js/perfect-scrollbar.min.js" type="text/javascript"></script>
                                        
                                    
popper.js
CSS Files
                                        
                                        css not available
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/popper.js/dist/popper.min.js" type="text/javascript"></script>
                                        
                                    
select2
CSS Files
                                        
                                        <script src="../../assets/libs/select2/dist/css/select2.min.cssquot; type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/select2/dist/js/select2.min.js" type="text/javascript"></script>
                                        
                                    
summernote
CSS Files
                                        
                                        <script src="../../assets/libs/summernote/dist/summernote.css" type="text/javascript"></script>
                                        
                                    
JavaScript Files
                                        
                                        <script src="../../assets/libs/summernote/dist/summernote.min.js" type="text/javascript"></script>
                                        
                                    

Page Structure


Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

                                    
                                        <!DOCTYPE html>
                                        <html lang="en">

                                        <head>
                                            <meta charset="utf-8">
                                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                            <!-- Tell the browser to be responsive to screen width -->
                                            <meta name="viewport" content="width=device-width, initial-scale=1">
                                            <meta name="description" content="">
                                            <meta name="author" content="">
                                            <!-- Favicon icon -->
                                            <link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
                                            <title>Mendy Admin admin Template - The Ultimate Multipurpose admin template</title>
                                            <!-- Custom CSS -->
                                            <link href="dist/css/style.min.css" rel="stylesheet">
                                            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
                                            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                                            <!--[if lt IE 9]>
                                            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                                            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
                                        <![endif]-->
                                        </head>
                                    
                                

Preloader (spinner)


This is for the loader when page load

                                    
                                        <!-- ============================================================== -->
                                        <!-- Preloader - style you can find in spinners.css -->
                                        <!-- ============================================================== -->
                                        <div class="preloader">
                                            <div class="lds-ripple">
                                                <div class="lds-pos"></div>
                                                <div class="lds-pos"></div>
                                            </div>
                                        </div>
                                        <!-- ============================================================== -->
                                        <!-- Preloader end -->
                                        <!-- ============================================================== -->
                                    
                                

Logo


This is for Brand identity means logo - we have separated logo icon and logo text both dark and light version you can upload

                                    
                                        <!-- ============================================================== -->
                                        <!-- Logo -->
                                        <!-- ============================================================== -->
                                        <a class="navbar-brand" href="index.html">
                                            <!-- Logo icon -->
                                            <b class="logo-icon">
                                                <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                                <!-- Dark Logo icon -->
                                                <img src="../../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                                                <!-- Light Logo icon -->
                                                <img src="../../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
                                            </b>
                                            <!--End Logo icon -->
                                            <!-- Logo text -->
                                            <span class="logo-text">
                                                 <!-- dark Logo text -->
                                                 <img src="../../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
                                                 <!-- Light Logo text -->
                                                 <img src="../../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
                                            </span>
                                        </a>
                                        <!-- ============================================================== -->
                                        <!-- End Logo -->
                                        <!-- ============================================================== -->
                                    
                                

Left Sidebar


We have created leftsidebar with the following code.

                                            
                                                <!-- ============================================================== -->
                                                <!-- Left Sidebar - style you can find in sidebar.scss  -->
                                                <!-- ============================================================== -->
                                                <aside class="left-sidebar">
                                                    <!-- Sidebar scroll-->
                                                    <div class="scroll-sidebar">
                                                    <!-- Sidebar navigation-->
                                                    <nav class="sidebar-nav">
                                                    <ul id="sidebarnav">
                                                    <li class="mt-3">
                                                    <a href="javascript:void(0)" class="btn create-btn text-white no-wrap d-flex
                                                    align-items-center">
                                                    <i data-feather="plus"></i>
                                                    <span class="hide-menu ml-2 text-uppercase">Create New</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="home" class="mr-2"></i>
                                                    <span class="hide-menu">Dashboard </span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="index.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dashboard 1 </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="index2.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dashboard 2 </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="index3.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dashboard 3 </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="index4.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dashboard 4 </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="index5.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dashboard 5 </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="index6.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dashboard 6 </span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="mail" class="mr-2"></i>
                                                    <span class="hide-menu">Apps</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="inbox-email.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Email </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="inbox-email-detail.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Email Detail </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="inbox-email-compose.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Email Compose </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="app-calendar.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Calendar </span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="sun" class="mr-2"></i>
                                                    <span class="hide-menu">Ui Elements </span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="ui-buttons.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Buttons</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-modals.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Modals</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-tab.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Tab</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-cards.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Card</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-tooltip-popover.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Tooltip & Popover</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-notification.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Notification</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-progressbar.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Progressbar</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-typography.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Typography</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-bootstrap.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Bootstrap Ui</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-breadcrumb.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Breadcrumb</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-list-media.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> List Media</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-grid.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Grid</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-carousel.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Carousel</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-scrollspy.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Scrollspy</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-spinner.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Spinner</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="ui-toasts.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Toasts</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="clipboard" class="mr-2"></i>
                                                    <span class="hide-menu">Forms</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="form-basic.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Basic Forms</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-horizontal.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Form Horizontal</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-bootstrap-touchspin.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Bootstrap Touchspin</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-select2.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Select2</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-img-cropper.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Image Cropper</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-dropzone.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Dropzone</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-radio-checkbox.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Radio & Checkbox</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-picker-colorpicker.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Form Colorpicker</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-picker-bootstrap-rangepicker.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Form Bootstrap Rangepicker</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="form-picker-bootstrap-datepicker.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Form Bootstrap Datepicker</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="layout" class="mr-2"></i>
                                                    <span class="hide-menu">Tables</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="table-bootstrap.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Bootstrap Table </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="table-basic.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Basic Table </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="table-layout-coloured.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Coloured Table Layout</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="table-datatable-basic.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Data Table</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="table-responsive.html"
                                                    aria-expanded="false">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Table Responsive</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="pie-chart" class="mr-2"></i>
                                                    <span class="hide-menu">Charts</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="chart-c3-axis.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">C3 Charts</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="chart-chart-js.html"
                                                    aria-expanded="false">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Chart.js Charts</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="chart-sparkline.html"
                                                    aria-expanded="false">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Sparkline Charts</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="chart-chartist.html"
                                                    aria-expanded="false">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Chartist Charts</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="shopping-bag" class="mr-2"></i>
                                                    <span class="hide-menu">Ecommerce Pages</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="eco-products.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Products</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="eco-products-cart.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Products Cart</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="eco-products-edit.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Products Edit</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="eco-products-detail.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Product Details</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="eco-products-orders.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Product Orders</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="eco-products-checkout.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Products Checkout</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="file" class="mr-2"></i>
                                                    <span class="hide-menu">Sample Pages </span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="Starter-kit.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Starterkit</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-profile.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Profile</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-animation.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Animation</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-search-result.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Search Result</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-gallery.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Gallery</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-treeview.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Treeview</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-block-ui.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Block UI</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-session-timeout.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Session Timeout</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-session-idle-timeout.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Session Idle Timeout</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-utility-classes.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Helper Classes</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="pages-maintenance.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Maintenance Page</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="lock" class="mr-2"></i>
                                                    <span class="hide-menu">Authentication</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="authentication-login1.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Login </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="authentication-register1.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Register</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="authentication-lockscreen.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Lockscreen</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="authentication-recover-password.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Recover password</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="map-pin" class="mr-2"></i>
                                                    <span class="hide-menu">Maps</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="map-google.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Google Map </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="map-vector.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Vector Map</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="feather" class="mr-2"></i>
                                                    <span class="hide-menu">Icons</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="icon-fontawesome.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Fontawesome Icons</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="icon-weather.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Weather Icons</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="alert-triangle" class="mr-2"></i>
                                                    <span class="hide-menu">Error Pages</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="error-400.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Error 400 </span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="error-403.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Error 403</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="error-404.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Error 404</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="error-500.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Error 500</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="error-503.html" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu"> Error 503</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)"
                                                    aria-expanded="false">
                                                    <i data-feather="layers" class="mr-2"></i>
                                                    <span class="hide-menu">Multi Level DD</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse first-level">
                                                    <li class="sidebar-item">
                                                    <a href="javascript:void(0)" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Link 1</span>
                                                    </a>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a class="has-arrow sidebar-link" href="javascript:void(0)" aria-expanded="false">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Link 2</span>
                                                    </a>
                                                    <ul aria-expanded="false" class="collapse second-level">
                                                    <li class="sidebar-item">
                                                    <a href="javascript:void(0)" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Link 2 Sub</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    <li class="sidebar-item">
                                                    <a href="javascript:void(0)" class="sidebar-link">
                                                    <i data-feather="droplet" class="mr-2"></i>
                                                    <span class="hide-menu">Link 3</span>
                                                    </a>
                                                    </li>
                                                    </ul>
                                                    </li>
                                                    </ul>
                                                    </nav>
                                                    <!-- End Sidebar navigation -->
                                                    </div>
                                                    <!-- End Sidebar scroll-->
                                                </aside>

                                                <!-- ============================================================== -->
                                                <!-- End Left Sidebar - style you can find in sidebar.scss  -->
                                                <!-- ============================================================== -->
                                            
                                        

Page Content, Right Sidebar and Footer


Below is the code for the page content wrapper, you can start your content here

                                    
                                        <!-- ============================================================== -->
                                        <!-- Page wrapper  -->
                                        <!-- ============================================================== -->
                                        <div class="page-wrapper">
                                            <!-- ============================================================== -->
                                            <!-- Bread crumb and right sidebar toggle -->
                                            <!-- ============================================================== -->
                                            <div class="page-breadcrumb">
                                                <div class="row">
                                                    <div class="col-7 align-self-center">
                                                        <div class="d-flex align-items-center">
                                                            <nav aria-label="breadcrumb">
                                                                <ol class="breadcrumb">
                                                                    <li class="breadcrumb-item">
                                                                        <a href="#" class="link">Home</a>
                                                                    </li>
                                                                    <li class="breadcrumb-item active" aria-current="page">Calendar</li>
                                                                </ol>
                                                            </nav>
                                                        </div>
                                                        <h4 class="page-title">Calendar</h4>
                                                    </div>
                                                    <div class="col-5 align-self-center text-right">
                                                        <ul class="list-inline mb-0">
                                                            <li class="list-inline-item"><i data-feather="refresh-cw"></i></li>
                                                            <li class="list-inline-item"><i data-feather="settings"></i></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- ============================================================== -->
                                            <!-- End Bread crumb and right sidebar toggle -->
                                            <!-- ============================================================== -->
                                            <!-- ============================================================== -->
                                            <!-- Container fluid  -->
                                            <!-- ============================================================== -->
                                            <div class="container-fluid">
                                                <!-- ============================================================== -->
                                                <!-- Start Page Content -->
                                                <!-- ============================================================== -->
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                This is some text within a card block.

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- ============================================================== -->
                                                <!-- End PAge Content -->
                                                <!-- ============================================================== -->
                                                <!-- ============================================================== -->
                                                <!-- Right sidebar -->
                                                <!-- ============================================================== -->
                                                <!-- .right-sidebar -->
                                                <!-- ============================================================== -->
                                                <!-- End Right sidebar -->
                                                <!-- ============================================================== -->
                                            </div>
                                            <!-- ============================================================== -->
                                            <!-- End Container fluid  -->
                                            <!-- ============================================================== -->
                                            <!-- ============================================================== -->
                                            <!-- footer -->
                                            <!-- ============================================================== -->
                                            <footer class="footer">
                                                © All Rights Reserved by Jthemes Studio.
                                            </footer>
                                            <!-- ============================================================== -->
                                            <!-- End footer -->
                                            <!-- ============================================================== -->
                                        </div>
                                        <!-- ============================================================== -->
                                        <!-- End Page wrapper  -->
                                        <!-- ============================================================== -->
                                        <!-- ============================================================== -->
                                        <!-- End Wrapper -->
                                        <!-- ============================================================== -->
                                        <!-- ============================================================== -->
                                        <!-- customizer Panel -->
                                        <!-- ============================================================== -->
                                        <aside class="customizer">
                                        <a href="javascript:void(0)" class="service-panel-toggle"><i class="fa fa-spin
                                        fa-cog"></i></a>
                                        <div class="customizer-body">
                                        <ul class="nav customizer-tab" role="tablist">
                                        <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                        href="#pills-home" role="tab"
                                        aria-controls="pills-home" aria-selected="true"><i class="mdi mdi-wrench
                                        font-20"></i></a>
                                        </li>
                                        <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#chat"
                                        role="tab" aria-controls="chat"
                                        aria-selected="false"><i class="mdi mdi-message-reply font-20"></i></a>
                                        </li>
                                        <li class="nav-item">
                                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill"
                                        href="#pills-contact" role="tab"
                                        aria-controls="pills-contact" aria-selected="false"><i class="mdi mdi-star-circle
                                        font-20"></i></a>
                                        </li>
                                        </ul>
                                        <div class="tab-content" id="pills-tabContent">
                                        <!-- Tab 1 -->
                                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                        aria-labelledby="pills-home-tab">
                                        <div class="p-15 border-bottom">
                                        <!-- Sidebar -->
                                        <h5 class="font-medium m-b-10 m-t-10">Layout Settings</h5>
                                        <div class="custom-control custom-checkbox m-t-10">
                                        <input type="checkbox" class="custom-control-input sidebartoggler"
                                        name="collapssidebar" id="collapssidebar">
                                        <label class="custom-control-label" for="collapssidebar">Collapse Sidebar</label>
                                        </div>
                                        <div class="custom-control custom-checkbox m-t-10">
                                        <input type="checkbox" class="custom-control-input" name="sidebar-position"
                                        id="sidebar-position">
                                        <label class="custom-control-label" for="sidebar-position">Fixed Sidebar</label>
                                        </div>
                                        <div class="custom-control custom-checkbox m-t-10">
                                        <input type="checkbox" class="custom-control-input" name="header-position"
                                        id="header-position">
                                        <label class="custom-control-label" for="header-position">Fixed Header</label>
                                        </div>
                                        </div>
                                        <div class="p-15 border-bottom">
                                        <!-- Logo BG -->
                                        <h5 class="font-medium m-b-10 m-t-10">Logo Backgrounds</h5>
                                        <ul class="theme-color">
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-logobg="skin1"></a></li>
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-logobg="skin2"></a></li>
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-logobg="skin3"></a></li>
                                        </ul>
                                        <!-- Logo BG -->
                                        </div>
                                        <div class="p-15 border-bottom">
                                        <!-- Navbar BG -->
                                        <h5 class="font-medium m-b-10 m-t-10">Navbar Backgrounds</h5>
                                        <ul class="theme-color">
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-navbarbg="skin1"></a></li>
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-navbarbg="skin2"></a></li>
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-navbarbg="skin3"></a></li>
                                        </ul>
                                        <!-- Navbar BG -->
                                        </div>
                                        <div class="p-15 border-bottom">
                                        <!-- Logo BG -->
                                        <h5 class="font-medium m-b-10 m-t-10">Sidebar Backgrounds</h5>
                                        <ul class="theme-color">
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-sidebarbg="skin1"></a></li>
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-sidebarbg="skin2"></a></li>
                                        <li class="theme-item"><a href="javascript:void(0)" class="theme-link"
                                        data-sidebarbg="skin3"></a></li>
                                        </ul>
                                        <!-- Logo BG -->
                                        </div>
                                        </div>
                                        <!-- End Tab 1 -->
                                        <!-- Tab 2 -->
                                        <div class="tab-pane fade" id="chat" role="tabpanel"
                                        aria-labelledby="pills-profile-tab">
                                        <ul class="mailbox list-style-none m-t-20">
                                        <li>
                                        <div class="message-center chat-scroll">
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_1' data-user-id='1'>
                                        <span class="user-img"> <img src="../../assets/images/users/1.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status online pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the
                                        my admin!</span> <span class="time">9:30 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_2' data-user-id='2'>
                                        <span class="user-img"> <img src="../../assets/images/users/2.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status busy pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Sonu Nigam</h5> <span class="mail-desc">I've sung a
                                        song! See you at</span> <span class="time">9:10 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_3' data-user-id='3'>
                                        <span class="user-img"> <img src="../../assets/images/users/3.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status away pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Arijit Sinh</h5> <span class="mail-desc">I am a
                                        singer!</span> <span class="time">9:08 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_4' data-user-id='4'>
                                        <span class="user-img"> <img src="../../assets/images/users/4.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status offline pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Nirav Joshi</h5> <span class="mail-desc">Just see the
                                        my admin!</span> <span class="time">9:02 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_5' data-user-id='5'>
                                        <span class="user-img"> <img src="../../assets/images/users/5.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status offline pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Sunil Joshi</h5> <span class="mail-desc">Just see the
                                        my admin!</span> <span class="time">9:02 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_6' data-user-id='6'>
                                        <span class="user-img"> <img src="../../assets/images/users/6.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status offline pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Akshay Kumar</h5> <span class="mail-desc">Just see
                                        the my admin!</span> <span class="time">9:02 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_7' data-user-id='7'>
                                        <span class="user-img"> <img src="../../assets/images/users/7.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status offline pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Pavan kumar</h5> <span class="mail-desc">Just see the
                                        my admin!</span> <span class="time">9:02 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        <!-- Message -->
                                        <a href="javascript:void(0)" class="message-item" id='chat_user_8' data-user-id='8'>
                                        <span class="user-img"> <img src="../../assets/images/users/8.jpg" alt="user"
                                        class="rounded-circle">
                                        <span class="profile-status offline pull-right"></span> </span>
                                        <div class="mail-contnet">
                                        <h5 class="message-title">Varun Dhavan</h5> <span class="mail-desc">Just see
                                        the my admin!</span> <span class="time">9:02 AM</span>
                                        </div>
                                        </a>
                                        <!-- Message -->
                                        </div>
                                        </li>
                                        </ul>
                                        </div>
                                        <!-- End Tab 2 -->
                                        <!-- Tab 3 -->
                                        <div class="tab-pane fade p-15" id="pills-contact" role="tabpanel"
                                        aria-labelledby="pills-contact-tab">
                                        <h6 class="m-t-20 m-b-20">Activity Timeline</h6>
                                        <div class="steamline">
                                        <div class="sl-item">
                                        <div class="sl-left bg-success"> <i class="ti-user"></i></div>
                                        <div class="sl-right">
                                        <div class="font-medium">Meeting today <span class="sl-date">
                                        5pm</span></div>
                                        <div class="desc">you can write anything </div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left bg-info"><i class="fas fa-image"></i></div>
                                        <div class="sl-right">
                                        <div class="font-medium">Send documents to Clark</div>
                                        <div class="desc">Lorem Ipsum is simply </div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left"> <img class="rounded-circle" alt="user"
                                        src="../../assets/images/users/2.jpg">
                                        </div>
                                        <div class="sl-right">
                                        <div class="font-medium">Go to the Doctor <span class="sl-date">5 minutes
                                        ago</span></div>
                                        <div class="desc">Contrary to popular belief</div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left"> <img class="rounded-circle" alt="user"
                                        src="../../assets/images/users/1.jpg">
                                        </div>
                                        <div class="sl-right">
                                        <div><a href="javascript:void(0)">Stephen</a> <span class="sl-date">5
                                        minutes ago</span></div>
                                        <div class="desc">Approve meeting with tiger</div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left bg-primary"> <i class="ti-user"></i></div>
                                        <div class="sl-right">
                                        <div class="font-medium">Meeting today <span class="sl-date">
                                        5pm</span></div>
                                        <div class="desc">you can write anything </div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left bg-info"><i class="fas fa-image"></i></div>
                                        <div class="sl-right">
                                        <div class="font-medium">Send documents to Clark</div>
                                        <div class="desc">Lorem Ipsum is simply </div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left"> <img class="rounded-circle" alt="user"
                                        src="../../assets/images/users/4.jpg">
                                        </div>
                                        <div class="sl-right">
                                        <div class="font-medium">Go to the Doctor <span class="sl-date">5 minutes
                                        ago</span></div>
                                        <div class="desc">Contrary to popular belief</div>
                                        </div>
                                        </div>
                                        <div class="sl-item">
                                        <div class="sl-left"> <img class="rounded-circle" alt="user"
                                        src="../../assets/images/users/6.jpg">
                                        </div>
                                        <div class="sl-right">
                                        <div><a href="javascript:void(0)">Stephen</a> <span class="sl-date">5
                                        minutes ago</span></div>
                                        <div class="desc">Approve meeting with tiger</div>
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        <!-- End Tab 3 -->
                                        </div>
                                        </div>
                                        </aside>
                                    
                                

Settings in custom js


Below js code is used for theme setting , fix header , toggle sidebar and right sidebar open close.

                                    
                                        // this is for close icon when navigation open in mobile view
                                        $(".nav-toggler").on('click', function() {
                                            $("#main-wrapper").toggleClass("show-sidebar");
                                            $(".nav-toggler i").toggleClass("ti-menu");
                                        });
                                        $(".search-box a, .search-box .app-search .srh-btn").on('click', function() {
                                            $(".app-search").toggle(200);
                                            $(".app-search input").focus();
                                        });

                                        // ==============================================================
                                        // Right sidebar options
                                        // ==============================================================
                                        $(function() {
                                            $(".service-panel-toggle").on('click', function() {
                                               $(".customizer").toggleClass('show-service-panel');

                                            });
                                            $('.page-wrapper').on('click', function() {
                                                $(".customizer").removeClass('show-service-panel');
                                            });
                                        });
                                    
                                

How to change Font Family


You can change fonts globally as per your requirements, for that need to change in variable.scss file. you will find these file from here:

                                    
                                        src/scss/variable.scss
                                    
                                

We have used google fonts for the template you can change whatever font you wish

                                    
                                        // Variables
                                        @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
                                        $font-family-sans-serif: 'Roboto', sans-serif !default;
                                    
                                

scss & css


Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it

                                    

                                            //(Required file)
                                            @import 'variable';

                                            // Import Bootstrap source files (Required file)
                                            @import 'bootstrap/bootstrap';

                                            //This is for the components (Required file)
                                            @import 'components';

                                            //This is for the pages (if you are not using some pages you can remove that style from pages folder)
                                            @import 'pages';

                                            //This is for the widgets (Required file)
                                            @import 'widgets/widgets';

                                            //This is for the horizontal version if you are not using horizontal version you can remove this
                                            @import 'horizontal/horizontal';

                                            //This is for the responsive (Required file)
                                            @import 'responsive';

                                            //In This scss you can write your scss
                                            @import 'custom';

                                            //This is for the icons (Required file)
                                            @import 'icons/font-awesome/css/fontawesome-all.css';
                                            @import 'icons/simple-line-icons/css/simple-line-icons.css';
                                            @import 'icons/weather-icons/css/weather-icons.min.css';
                                            @import 'icons/themify-icons/themify-icons.css';
                                            @import 'icons/flag-icon-css/flag-icon.min.css';
                                            @import 'icons/material-design-iconic-font/css/materialdesignicons.min.css';
                                            @import 'icons/crypto-icons/cryptocoins.css';


                                    
                                
Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Mendy Admin admin comes it does not affect your code.

Grid Options


See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Icons


Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="fa fa-icon-name"></i>
Weather Icons <i class="wi wi-icon-name"></i>
Feather Icons <i data-feather="name_of_the_icon"></i>

Charts


Below is the table of pages which includes charts and where you can find the script related to it.

Page Where to find it's JS Where to find it's CSS
chart-c3-axis.html ../../assets/extra-libs/c3/c3.min.js ../../assets/extra-libs/c3/c3.min.css
chart-chart-js.html ../../assets/libs/chart.js/dist/Chart.min.js No CSS Available
chart-sparkline.html ../../dist/js/pages/sparkline/jquery.charts-sparkline.js No CSS Available
chart-chartist.html ../../assets/libs/chartist/dist/chartist.min.js ../../assets/libs/chartist/dist/chartist.min.css

Form


Below is the basic form structure.

                                    
                                        <form>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">User Name</label>
                                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Email address</label>
                                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
                                            </div>
                                            <div class="form-group">
                                                <div class="checkbox checkbox-success">
                                                    <input id="checkbox1" type="checkbox">
                                                    <label for="checkbox1"> Remember me </label>
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-success waves-effect waves-light m-r-10">Submit</button>
                                            <button type="submit" class="btn btn-dark waves-effect waves-light">Cancel</button>
                                        </form>
                                    
                                

Table


Below is the basic table structure.

                                    
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                    <th>Role</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>Deshmukh</td>
                                                    <td>Prohaska</td>
                                                    <td>@Genelia</td>
                                                    <td><span class="label label-danger">admin</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>Deshmukh</td>
                                                    <td>Gaylord</td>
                                                    <td>@Ritesh</td>
                                                    <td><span class="label label-info">member</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>3</td>
                                                    <td>Sanghani</td>
                                                    <td>Gusikowski</td>
                                                    <td>@Govinda</td>
                                                    <td><span class="label label-warning">developer</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>4</td>
                                                    <td>Roshan</td>
                                                    <td>Rogahn</td>
                                                    <td>@Hritik</td>
                                                    <td><span class="label label-success">supporter</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>5</td>
                                                    <td>Joshi</td>
                                                    <td>Hickle</td>
                                                    <td>@Maruti</td>
                                                    <td><span class="label label-info">member</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>6</td>
                                                    <td>Nigam</td>
                                                    <td>Eichmann</td>
                                                    <td>@Sonu</td>
                                                    <td><span class="label label-success">supporter</span> </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    
                                

Js Files


File Description
custom.js, custom.min.js This is a main function js file. it contain sidebar and other basic js
sidebarmenu.js This file contains sidebarnavigation js
app.js This is for setting plugin for the theme customizer.
app.init.js You can modify the settings though this.
app-style-switcher.js It contains the customizer functions apply to the theme by clicking on customizer panel.
app.init.horizontal.js You can modify the settings of horizontal demo.
app-style-switcher.horizontal.js It contains the customizer functions apply to the horizontal theme by clicking on customizer panel.
waves.js This is for wave effects on buttons and other elements
perfect-scrollbar.jquery.min.js This is for scroll.
dashboard1.js to dashboard6.js This is for all dashboards setting.
Thank you