navbar updated

3 years ago · f79ae65f27
--- a/package-lock.json
+++ b/package-lock.json
@ -1,5 +1,5 @@
 {
  "name": "vuexy-react-admin-dashboard",
  "name": "-react-admin-dashboard",
  "version": "6.4.0",
  "lockfileVersion": 1,
  "requires": true,
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
  "name": "vuexy-react-admin-dashboard",
  "name": "-react-admin-dashboard",
  "version": "6.4.0",
  "private": true,
  "dependencies": {
--- a/public/index.html
+++ b/public/index.html
@ -24,7 +24,7 @@
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600"
    />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" crossorigin="" />
    <title>Vuexy - React Admin Dashboard Template</title>
    <title> React Admin Dashboard Template</title>
  </head>
  <body>
    <div id="root"></div>
--- a/src/@core/auth/utils.js
+++ b/src/@core/auth/utils.js
@ -0,0 +1,27 @@
 import useJwt from '@src/@core/auth/jwt/useJwt'
 /**
 * Return if user is logged in
 * This is completely up to you and how you want to store the token in your frontend application
 * e.g. If you are using cookies to store the application please update this function
 */
 // eslint-disable-next-line arrow-body-style
 export const isUserLoggedIn = () => {
  return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName)
 }
 export const getUserData = () => JSON.parse(localStorage.getItem('userData'))
 /**
 * This function is used for demo purpose route navigation
 * In real app you won't need this function because your app will navigate to same route for each users regardless of ability
 * Please note role field is just for showing purpose it's not used by anything in frontend
 * We are checking role just for ease
 * NOTE: If you have different pages to navigate based on user ability then this function can be useful. However, you need to update it.
 * @param {String} userRole Role of user
 */
 export const getHomeRouteForLoggedInUser = userRole => {
  if (userRole === 'admin') return '/'
  if (userRole === 'client') return { name: 'access-control' }
  return { name: 'auth-login' }
 }
--- a/src/@core/layouts/HorizontalLayout.js
+++ b/src/@core/layouts/HorizontalLayout.js
@ -16,7 +16,6 @@ import { Navbar, NavItem, Button } from 'reactstrap'
 import themeConfig from '@configs/themeConfig'
 // ** Custom Components
 import Customizer from '@components/customizer'
 import NavbarComponent from './components/navbar'
 import FooterComponent from './components/footer'
@ -126,7 +125,7 @@ const HorizontalLayout = props => {
              <NavItem>
                <Link to='/' className='navbar-brand'>
                  <span className='brand-logo'>
                    <img src={themeConfig.app.appLogoImage} alt='logo'  />
                    <img src={themeConfig.app.appLogoImage} alt='logo' />
                  </span>
                  <h2 className='brand-text mb-0'>{themeConfig.app.appName}</h2>
                </Link>
--- a/src/@core/layouts/VerticalLayout.js
+++ b/src/@core/layouts/VerticalLayout.js
@ -0,0 +1,233 @@
 // ** React Imports
 import { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 // ** Store & Actions
 import { useSelector, useDispatch } from 'react-redux'
 import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout'
 // ** Third Party Components
 import classnames from 'classnames'
 import { ArrowUp } from 'react-feather'
 import ScrollToTop from 'react-scroll-up'
 import { Navbar, Button } from 'reactstrap'
 // ** Configs
 import themeConfig from '@configs/themeConfig'
 // ** Custom Components
 import Customizer from '@components/customizer'
 import FooterComponent from './components/footer'
 import NavbarComponent from './components/navbar'
 import SidebarComponent from './components/menu/vertical-menu'
 // ** Custom Hooks
 import { useRTL } from '@hooks/useRTL'
 import { useSkin } from '@hooks/useSkin'
 import { useNavbarType } from '@hooks/useNavbarType'
 import { useFooterType } from '@hooks/useFooterType'
 import { useNavbarColor } from '@hooks/useNavbarColor'
 // ** Styles
 import '@styles/base/core/menu/menu-types/vertical-menu.scss'
 import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'
 const VerticalLayout = props => {
  // ** Props
  const { children, navbar, footer, menu, routerProps, currentActiveItem } = props
  // ** Hooks
  const [skin, setSkin] = useSkin()
  const [isRtl, setIsRtl] = useRTL()
  const [navbarType, setNavbarType] = useNavbarType()
  const [footerType, setFooterType] = useFooterType()
  const [navbarColor, setNavbarColor] = useNavbarColor()
  // ** States
  const [isMounted, setIsMounted] = useState(false)
  const [menuVisibility, setMenuVisibility] = useState(false)
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
  // ** Store Vars
  const dispatch = useDispatch()
  const layoutStore = useSelector(state => state.layout)
  // ** Update Window Width
  const handleWindowWidth = () => {
    setWindowWidth(window.innerWidth)
  }
  // ** Vars
  const location = useLocation()
  const contentWidth = layoutStore.contentWidth
  const menuCollapsed = layoutStore.menuCollapsed
  const isHidden = layoutStore.menuHidden
  // ** Toggles Menu Collapsed
  const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val))
  // ** Handles Content Width
  const setContentWidth = val => dispatch(handleContentWidth(val))
  // ** Handles Content Width
  const setIsHidden = val => dispatch(handleMenuHidden(val))
  //** This function will detect the Route Change and will hide the menu on menu item click
  useEffect(() => {
    if (menuVisibility && windowWidth < 1200) {
      setMenuVisibility(false)
    }
  }, [location])
  //** Sets Window Size & Layout Props
  useEffect(() => {
    if (window !== undefined) {
      window.addEventListener('resize', handleWindowWidth)
    }
  }, [windowWidth])
  //** ComponentDidMount
  useEffect(() => {
    setIsMounted(true)
    return () => setIsMounted(false)
  }, [])
  // ** Vars
  const footerClasses = {
    static: 'footer-static',
    sticky: 'footer-fixed',
    hidden: 'footer-hidden'
  }
  const navbarWrapperClasses = {
    floating: 'navbar-floating',
    sticky: 'navbar-sticky',
    static: 'navbar-static',
    hidden: 'navbar-hidden'
  }
  const navbarClasses = {
    floating: 'floating-nav',
    sticky: 'fixed-top',
    static: 'navbar-static-top',
    hidden: 'd-none'
  }
  const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
  if (!isMounted) {
    return null
  }
  return (
    <div
      className={classnames(
        `wrapper vertical-layout ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
          footerClasses[footerType] || 'footer-static'
        }`,
        {
          // Modern Menu
          'vertical-menu-modern': windowWidth >= 1200,
          'menu-collapsed': menuCollapsed && windowWidth >= 1200,
          'menu-expanded': !menuCollapsed && windowWidth > 1200,
          // Overlay Menu
          'vertical-overlay-menu': windowWidth < 1200,
          'menu-hide': !menuVisibility && windowWidth < 1200,
          'menu-open': menuVisibility && windowWidth < 1200
        }
      )}
      {...(isHidden ? { 'data-col': '1-column' } : {})}
    >
      {!isHidden ? (
        <SidebarComponent
          skin={skin}
          menu={menu}
          menuCollapsed={menuCollapsed}
          menuVisibility={menuVisibility}
          setMenuCollapsed={setMenuCollapsed}
          setMenuVisibility={setMenuVisibility}
          routerProps={routerProps}
          currentActiveItem={currentActiveItem}
        />
      ) : null}
      <Navbar
        expand='lg'
        light={skin !== 'dark'}
        dark={skin === 'dark' || bgColorCondition}
        color={bgColorCondition ? navbarColor : undefined}
        className={classnames(
          `header-navbar navbar align-items-center ${navbarClasses[navbarType] || 'floating-nav'} navbar-shadow`
        )}
      >
        <div className='navbar-container d-flex content'>
          {navbar ? (
            navbar({ setMenuVisibility, skin, setSkin })
          ) : (
            <NavbarComponent setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />
          )}
        </div>
      </Navbar>
      {children}
      {/* Vertical Nav Menu Overlay */}
      <div
        className={classnames('sidenav-overlay', {
          show: menuVisibility
        })}
        onClick={() => setMenuVisibility(false)}
      ></div>
      {/* Vertical Nav Menu Overlay */}
      {themeConfig.layout.customizer === true ? (
        <Customizer
          skin={skin}
          setSkin={setSkin}
          footerType={footerType}
          setFooterType={setFooterType}
          navbarType={navbarType}
          setNavbarType={setNavbarType}
          navbarColor={navbarColor}
          setNavbarColor={setNavbarColor}
          isRtl={isRtl}
          setIsRtl={setIsRtl}
          layout={props.layout}
          setLayout={props.setLayout}
          isHidden={isHidden}
          setIsHidden={setIsHidden}
          contentWidth={contentWidth}
          setContentWidth={setContentWidth}
          menuCollapsed={menuCollapsed}
          setMenuCollapsed={setMenuCollapsed}
          transition={props.transition}
          setTransition={props.setTransition}
          themeConfig={themeConfig}
        />
      ) : null}
      <footer
        className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
          'd-none': footerType === 'hidden'
        })}
      >
        {footer ? (
          footer({ footerType, footerClasses })
        ) : (
          <FooterComponent footerType={footerType} footerClasses={footerClasses} />
        )}
      </footer>
      {themeConfig.layout.scrollTop === true ? (
        <div className='scroll-to-top'>
          <ScrollToTop showUnder={300} style={{ bottom: '5%' }}>
            <Button className='btn-icon' color='primary'>
              <ArrowUp size={14} />
            </Button>
          </ScrollToTop>
        </div>
      ) : null}
    </div>
  )
 }
 export default VerticalLayout
--- a/src/@core/layouts/components/BuyNow.js
+++ b/src/@core/layouts/components/BuyNow.js
@ -4,7 +4,7 @@ import { Button } from 'reactstrap'
 const BuyNow = () => {
  return (
    <div className='buy-now'>
      <Button tag='a' color='danger' href='https://1.envato.market/vuexy_admin' target='_blank'>
      <Button tag='a' color='danger'  target='_blank'>
        Buy Now
      </Button>
    </div>
--- a/src/@core/layouts/components/navbar/NavbarBookmarks.js
+++ b/src/@core/layouts/components/navbar/NavbarBookmarks.js
@ -171,14 +171,13 @@ const NavbarBookmarks = props => {
    <Fragment>
      <ul className='nav navbar-nav bookmark-icons'>
      <NavItem className='d-none d-lg-block'>
        <div style={{display:'flex', alignItems:'center', justifyContent:'center'}}>
          <NavLink className='nav-link-style' id="switchtheme">
            <ThemeToggler />
            <Tooltip placement="bottom" isOpen={swthemetpOpen} target="switchtheme" toggle={switchThemetoggle}>
              Switch Theme
            </Tooltip>
          </NavLink>
        </NavItem>
      <div>
          <span style={{ padding: '6px' }} id="TooltipExample">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ficon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
            <Tooltip placement="bottom" isOpen={tooltipOpen} target="TooltipExample" toggle={toggle}>
@ -221,7 +220,8 @@ const NavbarBookmarks = props => {
              LinkedIn
            </Tooltip>
          </span>
        </div>
          </div>
        </NavItem>
        {renderExtraBookmarksDropdown()}
        <NavItem className='nav-item d-none d-lg-block'>
          <div className={classnames('bookmark-input search-input', { show: openSearch })}>
--- a/src/@core/layouts/components/navbar/NavbarSearch.js
+++ b/src/@core/layouts/components/navbar/NavbarSearch.js
@ -93,7 +93,7 @@ const NavbarSearch = () => {
            filterKey='title'
            filterHeaderKey='groupTitle'
            grouped={true}
            placeholder='Explore Vuexy...'
            placeholder='Explore...'
            autoFocus={true}
            onSuggestionItemClick={handleSuggestionItemClick}
            externalClick={handleExternalClick}
--- a/src/@core/layouts/components/navbar/index.js
+++ b/src/@core/layouts/components/navbar/index.js
@ -31,8 +31,6 @@ const ThemeNavbar = props => {
          </NavItem>
        </ul>
        <NavbarBookmarks setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />
        <div className='bookmark-wrapper d-flex align-items-center'>
        </div>
      </div>
      <ul className='nav navbar-nav align-items-center ml-auto'>
--- a/src/@core/scss/base/bootstrap-extended.scss
+++ b/src/@core/scss/base/bootstrap-extended.scss
@ -3,7 +3,7 @@
 //  Description: List of modified Bootstrap files. This is an actual copy of bootstrap.scss
 //                excluding files that have not been modified.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_helper.scss
+++ b/src/@core/scss/base/bootstrap-extended/_helper.scss
@ -2,7 +2,7 @@
 // 	File Name: helper.scss
 // 	Description: Helper classes provides template related customization.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_include.scss
+++ b/src/@core/scss/base/bootstrap-extended/_include.scss
@ -2,7 +2,7 @@
 //  File Name: include.scss
 //  Description: Common components file to include all theme specific custom components.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_list-group.scss
+++ b/src/@core/scss/base/bootstrap-extended/_list-group.scss
@ -2,7 +2,7 @@
  File Name: list-group.scss
  Description: Contain list item, list group related extended SCSS.
  ----------------------------------------------------------------------------------------------
  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
  Author: PIXINVENT
  Author URL: http://www.themeforest.net/user/pixinvent
 ================================================================================================*/
--- a/src/@core/scss/base/bootstrap-extended/_mixins.scss
+++ b/src/@core/scss/base/bootstrap-extended/_mixins.scss
@ -2,7 +2,7 @@
 //  File Name: mixins.scss
 //  Description: Extended mixins file with new mixins features.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 //  ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_navbar.scss
+++ b/src/@core/scss/base/bootstrap-extended/_navbar.scss
@ -3,7 +3,7 @@
    Description: Contain header navigation bar, vertical main navigation bar and
    horiznotal main navigation bar related SCSS.
    ----------------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ================================================================================================*/
--- a/src/@core/scss/base/bootstrap-extended/_progress.scss
+++ b/src/@core/scss/base/bootstrap-extended/_progress.scss
@ -2,7 +2,7 @@
  File Name: progress.scss
  Description: Extended bootstrap progress bar scss.
  ----------------------------------------------------------------------------------------
  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
  Author: PIXINVENT
  Author URL: http://www.themeforest.net/user/pixinvent
  ----------------------------------------------------------------------------------------
--- a/src/@core/scss/base/bootstrap-extended/_tables.scss
+++ b/src/@core/scss/base/bootstrap-extended/_tables.scss
@ -2,7 +2,7 @@
 //     File Name: tables.scss
 //     Description: Tables pages custom scss
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_type.scss
+++ b/src/@core/scss/base/bootstrap-extended/_type.scss
@ -2,7 +2,7 @@
 //     File Name: type.scss
 //     Description: Type pages custom scss
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_utilities.scss
+++ b/src/@core/scss/base/bootstrap-extended/_utilities.scss
@ -3,7 +3,7 @@
 // 	Description: Utility classes provides color, width, position & background etc..
 // 				 related customization.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/bootstrap-extended/_variables.scss
+++ b/src/@core/scss/base/bootstrap-extended/_variables.scss
@ -2,7 +2,7 @@
 //  File Name: variables.scss
 //  Description: Custom overrides of Bootstrap variables
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 //  ================================================================================================
--- a/src/@core/scss/base/bootstrap.scss
+++ b/src/@core/scss/base/bootstrap.scss
@ -2,7 +2,7 @@
 //  File Name: bootstrap.scss
 //  Description: Include bootstrap core from node_modules
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/colors.scss
+++ b/src/@core/scss/base/colors.scss
@ -3,7 +3,7 @@
 //  Description: Common color file to include color paletter and colors file, its qiore good to
 //  have all color classes in a separate file as it's quite heavy.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/components.scss
+++ b/src/@core/scss/base/components.scss
@ -2,7 +2,7 @@
 //  File Name: components.scss
 //  Description: Common components file to includ all theme specific custom components.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/components/_include.scss
+++ b/src/@core/scss/base/components/_include.scss
@ -2,7 +2,7 @@
 //  File Name: include.scss
 //  Description: Common components file to includ all theme specific custom components.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/components/_variables-dark.scss
+++ b/src/@core/scss/base/components/_variables-dark.scss
@ -2,14 +2,14 @@
 //  File Name: variables-dark.scss
 //  Description: Custom dark theme variables
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 //  ================================================================================================
 //  ================================================================================================
 //  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
 //  THIS FILE WILL GET OVERWRITTEN WITH EACH VUEXY HTML TEMPLATE RELEASE.
 //  THIS FILE WILL GET OVERWRITTEN WITH EACH  HTML TEMPLATE RELEASE.
 //  TIP:
 //  We suggest you to use this (assets/scss/variables/_variables-components.scss) file for overriding components variables.
 //  ================================================================================================
--- a/src/@core/scss/base/components/_variables.scss
+++ b/src/@core/scss/base/components/_variables.scss
@ -2,14 +2,14 @@
 //  File Name: variables.scss
 //  Description: Custom component variable
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 //  ================================================================================================
 //  ================================================================================================
 //  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
 //  THIS FILE WILL GET OVERWRITTEN WITH EACH VUEXY HTML TEMPLATE RELEASE.
 //  THIS FILE WILL GET OVERWRITTEN WITH EACH  HTML TEMPLATE RELEASE.
 //  TIP:
 //  We suggest you to use this (assets/scss/variables/_variables-components.scss) file for overriding components variables.
 //  ================================================================================================
--- a/src/@core/scss/base/components/avatar.scss
+++ b/src/@core/scss/base/components/avatar.scss
@ -2,7 +2,7 @@
 //   File Name: avatar.scss
 //   Description: Avatar style.
 //   ----------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ==========================================================================================
--- a/src/@core/scss/base/components/customizer.scss
+++ b/src/@core/scss/base/components/customizer.scss
@ -2,7 +2,7 @@
 	File Name: customizer.scss
 	Description: CSS used for demo purpose only. Remove this css from your project.
 	----------------------------------------------------------------------------------------
 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 	Author: PIXINVENT
 	Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/components/demo.scss
+++ b/src/@core/scss/base/components/demo.scss
@ -2,7 +2,7 @@
    File Name: demo.scss
    Description: CSS used for demo purpose only. Remove this css from your project.
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/components/search.scss
+++ b/src/@core/scss/base/components/search.scss
@ -2,7 +2,7 @@
 	File Name: search.scss
 	Description: Search  functionality.
 	----------------------------------------------------------------------------------------
 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 	Author: PIXINVENT
 	Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/components/timeline.scss
+++ b/src/@core/scss/base/components/timeline.scss
@ -2,7 +2,7 @@
 //   File Name: timeline.scss
 //   Description: Timeline style.
 //   ----------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ==========================================================================================
--- a/src/@core/scss/base/core/colors/_palette.scss
+++ b/src/@core/scss/base/core/colors/_palette.scss
@ -2,14 +2,14 @@
 //   File Name: pallette.scss
 //   Description: Custom color system styles, includes background, border and text colors
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
 //  ================================================================================================
 //  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
 //  THIS FILE WILL GET OVERWRITTEN WITH EACH Vuexy HTML TEMPLATE RELEASE.
 //  THIS FILE WILL GET OVERWRITTEN WITH EACH  HTML TEMPLATE RELEASE.
 //  TIP:
 //  We suggest you to use this (assets/scss/colors/palette.scss) file for overriding color variables.
 //  ================================================================================================
--- a/src/@core/scss/base/core/colors/palette-gradient.scss
+++ b/src/@core/scss/base/core/colors/palette-gradient.scss
@ -2,7 +2,7 @@
 //   File Name: pallette-gradient.scss
 //   Description: gradient color system styles
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/core/colors/palette-noui.scss
+++ b/src/@core/scss/base/core/colors/palette-noui.scss
@ -2,7 +2,7 @@
 //   File Name: pallette-noui.scss
 //   Description: noui color system styles
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/core/layouts/_content.scss
+++ b/src/@core/scss/base/core/layouts/_content.scss
@ -2,7 +2,7 @@
 //     File Name: content.scss
 //     Description: Page content level SCSS for different screen size, layout and device.
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Authuseror URL: http://www.themeforest.net//pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/core/layouts/_footer.scss
+++ b/src/@core/scss/base/core/layouts/_footer.scss
@ -2,7 +2,7 @@
 //     File Name: Footer.scss
 //     Description: *  Main footer styles.
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/core/layouts/_sidebar.scss
+++ b/src/@core/scss/base/core/layouts/_sidebar.scss
@ -2,7 +2,7 @@
    File Name: sidebar.scss
    Description: content sidebar specific scss.
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/core/menu/_navigation.scss
+++ b/src/@core/scss/base/core/menu/_navigation.scss
@ -2,7 +2,7 @@
    File Name: navigation.scss
    Description: Common mixin for menus, contain dark and light version scss.
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/core/menu/menu-types/horizontal-menu.scss
+++ b/src/@core/scss/base/core/menu/menu-types/horizontal-menu.scss
@ -4,7 +4,7 @@
 	It support light & dark version, flipped layout, right side icons, borders menu for
 	item separation.
 	----------------------------------------------------------------------------------------
 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard TemplateTheme
 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard TemplateTheme
 	Author: PIXINVENT
 	Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/core/menu/menu-types/vertical-menu.scss
+++ b/src/@core/scss/base/core/menu/menu-types/vertical-menu.scss
@ -4,7 +4,7 @@
    light & dark version, flipped layout, right side icons, native scroll and borders menu
    item separation.
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/core/menu/menu-types/vertical-overlay-menu.scss
+++ b/src/@core/scss/base/core/menu/menu-types/vertical-overlay-menu.scss
@ -4,7 +4,7 @@
    light & dark version, filpped layout, right side icons, native scroll and borders menu
    item seperation.
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/core/mixins/main-menu-mixin.scss
+++ b/src/@core/scss/base/core/mixins/main-menu-mixin.scss
@ -2,7 +2,7 @@
 // File Name: main-menu-mixin.scss
 // Description: Common mixin for menus, contain dark and light version scss.
 // ----------------------------------------------------------------------------------------
 // Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // Author: PIXINVENT
 // Author URL: http://www.themeforest.net/user/pixinvent
 //==========================================================================================
--- a/src/@core/scss/base/custom-rtl.scss
+++ b/src/@core/scss/base/custom-rtl.scss
@ -2,7 +2,7 @@
 //  File Name: custom-rtl.scss
 //  Description: RTL support SCSS file.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-chat-list.scss
+++ b/src/@core/scss/base/pages/app-chat-list.scss
@ -2,7 +2,7 @@
 //   File Name: app-chat-area.scss
 //   Description: SCC file for chat area application page.
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-chat.scss
+++ b/src/@core/scss/base/pages/app-chat.scss
@ -2,7 +2,7 @@
 //   File Name: app-chat.scss
 //   Description: SCC file for chat application page.
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-ecommerce-details.scss
+++ b/src/@core/scss/base/pages/app-ecommerce-details.scss
@ -2,7 +2,7 @@
 //  File Name: app-ecommerce-details.scss
 //  Description: App Ecommerce Details SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-ecommerce.scss
+++ b/src/@core/scss/base/pages/app-ecommerce.scss
@ -2,7 +2,7 @@
 // 	File Name: app-ecommerce.scss
 // 	Description: SCSS file for ecommerce shop, wishlist and checkout page.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-email.scss
+++ b/src/@core/scss/base/pages/app-email.scss
@ -2,7 +2,7 @@
 // 	File Name: app-email.scss
 // 	Description: SCC file for email application page.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-file-manager.scss
+++ b/src/@core/scss/base/pages/app-file-manager.scss
@ -2,7 +2,7 @@
 // 	File Name: app-file-manager.scss
 // 	Description: SCC file for email application page.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/app-invoice-list.scss
+++ b/src/@core/scss/base/pages/app-invoice-list.scss
@ -2,7 +2,7 @@
 //  File Name: app-invoice-list.scss
 //  Description: Invoice Layout page layouts SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy HTML Admin Template
 //  Item Name:  HTML Admin Template
 //  Version: 1.0
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
--- a/src/@core/scss/base/pages/app-invoice-print.scss
+++ b/src/@core/scss/base/pages/app-invoice-print.scss
@ -2,7 +2,7 @@
 //  File Name: app-invoice-print.scss
 //  Description: Invoice Layout page layouts SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy HTML Admin Template
 //  Item Name:  HTML Admin Template
 //  Version: 1.0
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
--- a/src/@core/scss/base/pages/app-invoice.scss
+++ b/src/@core/scss/base/pages/app-invoice.scss
@ -2,7 +2,7 @@
 //  File Name: app-invoice.scss
 //  Description: Invoice Layout page layouts SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy HTML Admin Template
 //  Item Name:  HTML Admin Template
 //  Version: 1.0
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
--- a/src/@core/scss/base/pages/app-user.scss
+++ b/src/@core/scss/base/pages/app-user.scss
@ -2,7 +2,7 @@
 //  File Name: app-users.scss
 //  Description: Invoice Layout page layouts SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy HTML Admin Template
 //  Item Name:  HTML Admin Template
 //  Version: 1.0
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
--- a/src/@core/scss/base/pages/dashboard-ecommerce.scss
+++ b/src/@core/scss/base/pages/dashboard-ecommerce.scss
@ -2,7 +2,7 @@
 //   File Name: aggrid.scss
 //   Description: SCC file for Aggrid.
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-blog.scss
+++ b/src/@core/scss/base/pages/page-blog.scss
@ -2,7 +2,7 @@
 //  File Name: blog.scss
 //  Description: blog related pages layouts SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-coming-soon.scss
+++ b/src/@core/scss/base/pages/page-coming-soon.scss
@ -2,7 +2,7 @@
 //     File Name: coming-soon.scss
 //     Description: Coming Soon pages custom scss
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-faq.scss
+++ b/src/@core/scss/base/pages/page-faq.scss
@ -2,7 +2,7 @@
 //  File Name: page-faq.scss
 //  Description: FAQ Page Content SCSS
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-knowledge-base.scss
+++ b/src/@core/scss/base/pages/page-knowledge-base.scss
@ -2,7 +2,7 @@
 //  File Name: knowledge-base.scss
 //  Description: Knowledge Base Page Content SCSS
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-misc.scss
+++ b/src/@core/scss/base/pages/page-misc.scss
@ -2,7 +2,7 @@
 //     File Name: page-misc.scss
 //     Description: Coming Soon pages custom scss
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-pricing.scss
+++ b/src/@core/scss/base/pages/page-pricing.scss
@ -2,7 +2,7 @@
 //  File Name: pricing.scss
 //  Description: pricing Page Content SCSS
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/page-profile.scss
+++ b/src/@core/scss/base/pages/page-profile.scss
@ -2,7 +2,7 @@
 // 	File Name: page-profile.scss
 // 	Description: Page content different types of users page layouts SCSS.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/pages/ui-colors.scss
+++ b/src/@core/scss/base/pages/ui-colors.scss
@ -2,7 +2,7 @@
 //  File Name: colors.scss
 //  Description: Colors Page Content SCSS
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/plugins/extensions/ext-component-media-player.scss
+++ b/src/@core/scss/base/plugins/extensions/ext-component-media-player.scss
@ -2,7 +2,7 @@
 //  File Name: ext-component-media-player.scss
 //  Description: Media Player SCSS.
 //  ----------------------------------------------------------------------------------------------
 //  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //  Author: PIXINVENT
 //  Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/plugins/extensions/ext-component-swiper.scss
+++ b/src/@core/scss/base/plugins/extensions/ext-component-swiper.scss
@ -2,7 +2,7 @@
    File Name: ext-component-swiper.scss
    Description: swiper plugin scss.
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
 ==========================================================================================*/
--- a/src/@core/scss/base/plugins/maps/map-leaflet.scss
+++ b/src/@core/scss/base/plugins/maps/map-leaflet.scss
@ -2,7 +2,7 @@
 //     File Name: leaflet.scss
 //     Description: Leaflet map custom scss
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/plugins/tables/_datatables.scss
+++ b/src/@core/scss/base/plugins/tables/_datatables.scss
@ -2,7 +2,7 @@
 //     File Name: datatables.scss
 //     Description: Datatables pages custom scss
 //     ----------------------------------------------------------------------------------------------
 //     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //     Author: PIXINVENT
 //     Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/plugins/tables/table-ag-grid.scss
+++ b/src/@core/scss/base/plugins/tables/table-ag-grid.scss
@ -2,7 +2,7 @@
 //   File Name: aggrid.scss
 //   Description: SCC file for Aggrid.
 //   ----------------------------------------------------------------------------------------------
 //   Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 //   Author: PIXINVENT
 //   Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/themes/bordered-layout.scss
+++ b/src/@core/scss/base/themes/bordered-layout.scss
@ -2,7 +2,7 @@
 // 	File Name: bordered-layout.scss
 // 	Description: SCSS file for Bordered layout.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/themes/dark-layout.scss
+++ b/src/@core/scss/base/themes/dark-layout.scss
@ -2,7 +2,7 @@
 // 	File Name: dark-layout.scss
 // 	Description: SCSS file for dark layout.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/base/themes/semi-dark-layout.scss
+++ b/src/@core/scss/base/themes/semi-dark-layout.scss
@ -2,7 +2,7 @@
 // 	File Name: semi-dark-layout.scss
 // 	Description: SCSS file for semi dark layout.
 // 	----------------------------------------------------------------------------------------------
 // 	Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Item Name:   - Vuejs, HTML & Laravel Admin Dashboard Template
 // 	Author: PIXINVENT
 // 	Author URL: http://www.themeforest.net/user/pixinvent
 // ================================================================================================
--- a/src/@core/scss/core.scss
+++ b/src/@core/scss/core.scss
@ -33,4 +33,6 @@
    display: flex;
    justify-content: space-between;
 }
 .main-menu .navbar-header .navbar-brand .brand-logo img {
    max-width: 130px !important;
 }
--- a/src/assets/scss/style-rtl.scss
+++ b/src/assets/scss/style-rtl.scss
@ -1,5 +1,5 @@
 /*================================================================================
 	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
 	Item Name:  - Vuejs, HTML & Laravel Admin Dashboard Template
 	Version: 2.0
 	Author: PIXINVENT
 	Author URL: http://www.themeforest.net/user/pixinvent
--- a/src/layouts/VerticalLayout.js
+++ b/src/layouts/VerticalLayout.js
@ -0,0 +1,20 @@
 // !Do not remove the Layout import
 import Layout from '@layouts/VerticalLayout'
 // ** Components
 // import CustomMenu from './components/Menu'
 // import CustomNavbar from './components/Navbar'
 // import CustomFooter from './components/Footer'
 const VerticalLayout = props => (
  <Layout
    // menu={props => <CustomMenu {...props} />}
    // navbar={props => <CustomNavbar {...props} />}
    // footer={props => <CustomFooter {...props} />}
    {...props}
  >
    {props.children}
  </Layout>
 )
 export default VerticalLayout
--- a/src/navigation/vertical/apps.js
+++ b/src/navigation/vertical/apps.js
@ -0,0 +1,13 @@
 import { Mail, Edit, MessageSquare, CheckSquare, Calendar, FileText, Circle, ShoppingCart, User } from 'react-feather'
 export default [
  {
    header: 'Apps & Pages'
  },
  {
    id: 'task',
    title: 'All Tasks',
    icon: <Edit/>,
    navLink: '/apps/todo'
  }
 ]
--- a/src/navigation/vertical/dashboards.js
+++ b/src/navigation/vertical/dashboards.js
@ -0,0 +1,10 @@
 import { Home, Circle } from 'react-feather'
 export default [
  {
    id: 'home',
    title: 'Home',
    icon: <Home />,
    navLink: '/home'
  }
 ]
--- a/src/navigation/vertical/index.js
+++ b/src/navigation/vertical/index.js
@ -0,0 +1,8 @@
 // ** Navigation sections imports
 import apps from './apps'
 import dashboards from './dashboards'
 // ** Merge & Export
 export default [...dashboards, ...apps]
--- a/src/router/Router.js
+++ b/src/router/Router.js
@ -19,6 +19,7 @@ import { DefaultRoute, Routes } from './routes'
 // ** Layouts
 import BlankLayout from '@layouts/BlankLayout'
 import VerticalLayout from '@src/layouts/VerticalLayout'
 import HorizontalLayout from '@src/layouts/HorizontalLayout'
 const Router = () => {
@ -30,10 +31,10 @@ const Router = () => {
  const ability = useContext(AbilityContext)
  // ** Default Layout
  const DefaultLayout = 'HorizontalLayout' 
  const DefaultLayout = layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout'
  // ** All of the available layouts
  const Layouts = { BlankLayout, HorizontalLayout }
  const Layouts = { BlankLayout, VerticalLayout, HorizontalLayout }
  // ** Current Active Item
  const currentActiveItem = null
--- a/src/views/apps/invoice/add/AddCard.js
+++ b/src/views/apps/invoice/add/AddCard.js
@ -182,7 +182,7 @@ const AddCard = () => {
                    </g>
                  </g>
                </svg>
                <h3 className='text-primary invoice-logo'>Vuexy</h3>
                <h3 className='text-primary invoice-logo'></h3>
              </div>
              <p className='card-text mb-25'>Office 149, 450 South Brand Brooklyn</p>
              <p className='card-text mb-25'>San Diego County, CA 91905, USA</p>
--- a/src/views/apps/invoice/edit/EditCard.js
+++ b/src/views/apps/invoice/edit/EditCard.js
@ -98,7 +98,7 @@ const InvoiceEditCard = ({ data }) => {
                  </g>
                </g>
              </svg>
              <h3 className='text-primary invoice-logo'>Vuexy</h3>
              <h3 className='text-primary invoice-logo'></h3>
            </div>
            <p className='card-text mb-25'>Office 149, 450 South Brand Brooklyn</p>
            <p className='card-text mb-25'>San Diego County, CA 91905, USA</p>
--- a/src/views/apps/invoice/preview/PreviewCard.js
+++ b/src/views/apps/invoice/preview/PreviewCard.js
@ -58,7 +58,7 @@ const PreviewCard = ({ data }) => {
                  </g>
                </g>
              </svg>
              <h3 className='text-primary invoice-logo'>Vuexy</h3>
              <h3 className='text-primary invoice-logo'></h3>
            </div>
            <CardText className='mb-25'>Office 149, 450 South Brand Brooklyn</CardText>
            <CardText className='mb-25'>San Diego County, CA 91905, USA</CardText>
--- a/src/views/apps/invoice/print/index.js
+++ b/src/views/apps/invoice/print/index.js
@ -65,7 +65,7 @@ const Print = () => {
                </g>
              </g>
            </svg>
            <h3 className='text-primary font-weight-bold ml-1'>Vuexy</h3>
            <h3 className='text-primary font-weight-bold ml-1'></h3>
          </div>
          <p className='mb-25'>Office 149, 450 South Brand Brooklyn</p>
          <p className='mb-25'>San Diego County, CA 91905, USA</p>
--- a/src/views/pages/authentication/ForgotPassword.js
+++ b/src/views/pages/authentication/ForgotPassword.js
@ -64,7 +64,7 @@ const ForgotPassword = () => {
                </g>
              </g>
            </svg>
            <h2 className='brand-text text-primary ml-1'>Vuexy</h2>
            <h2 className='brand-text text-primary ml-1'></h2>
          </Link>
          <Col className='d-none d-lg-flex align-items-center p-5' lg='8' sm='12'>
            <div className='w-100 d-lg-flex align-items-center justify-content-center px-5'>
--- a/src/views/pages/authentication/Login.js
+++ b/src/views/pages/authentication/Login.js
@ -38,7 +38,7 @@ const ToastContent = ({ name, role }) => (
      </div>
    </div>
    <div className='toastify-body'>
      <span>You have successfully logged in as an {role} user to Vuexy. Now you can start to explore. Enjoy!</span>
      <span>You have successfully logged in as an {role} user to . Now you can start to explore. Enjoy!</span>
    </div>
  </Fragment>
 )
--- a/src/views/pages/authentication/Register.js
+++ b/src/views/pages/authentication/Register.js
@ -136,7 +136,7 @@ const Register = () => {
              </g>
            </g>
          </svg>
          <h2 className='brand-text text-primary ml-1'>Vuexy</h2>
          <h2 className='brand-text text-primary ml-1'></h2>
        </Link>
        <Col className='d-none d-lg-flex align-items-center p-5' lg='8' sm='12'>
          <div className='w-100 d-lg-flex align-items-center justify-content-center px-5'>
--- a/src/views/pages/authentication/ResetPasswordV1.js
+++ b/src/views/pages/authentication/ResetPasswordV1.js
@ -59,7 +59,7 @@ const ResetPasswordV1 = () => {
                  </g>
                </g>
              </svg>
              <h2 className='brand-text text-primary ml-1'>Vuexy</h2>
              <h2 className='brand-text text-primary ml-1'></h2>
            </Link>
            <CardTitle tag='h4' className='mb-1'>
              Reset Password 🔒
--- a/src/views/pages/misc/ComingSoon.js
+++ b/src/views/pages/misc/ComingSoon.js
@ -55,7 +55,7 @@ const ComingSoon = () => {
            </g>
          </g>
        </svg>
        <h2 className='brand-text text-primary ml-1'>Vuexy</h2>
        <h2 className='brand-text text-primary ml-1'></h2>
      </a>
      <div className='misc-inner p-2 p-sm-3'>
        <div className='w-100 text-center'>
--- a/src/views/pages/misc/Maintenance.js
+++ b/src/views/pages/misc/Maintenance.js
@ -55,7 +55,7 @@ const Maintenance = () => {
            </g>
          </g>
        </svg>
        <h2 className='brand-text text-primary ml-1'>Vuexy</h2>
        <h2 className='brand-text text-primary ml-1'></h2>
      </a>
      <div className='misc-inner p-2 p-sm-3'>
        <div className='w-100 text-center'>
--- a/src/views/pages/misc/NotAuthorized.js
+++ b/src/views/pages/misc/NotAuthorized.js
@ -7,57 +7,6 @@ import '@styles/base/pages/page-misc.scss'
 const NotAuthorized = () => {
  return (
    <div className='misc-wrapper'>
      <a className='brand-logo' href='/'>
        <svg viewBox='0 0 139 95' version='1.1' height='28'>
          <defs>
            <linearGradient x1='100%' y1='10.5120544%' x2='50%' y2='89.4879456%' id='linearGradient-1'>
              <stop stopColor='#000000' offset='0%'></stop>
              <stop stopColor='#FFFFFF' offset='100%'></stop>
            </linearGradient>
            <linearGradient x1='64.0437835%' y1='46.3276743%' x2='37.373316%' y2='100%' id='linearGradient-2'>
              <stop stopColor='#EEEEEE' stopOpacity='0' offset='0%'></stop>
              <stop stopColor='#FFFFFF' offset='100%'></stop>
            </linearGradient>
          </defs>
          <g id='Page-1' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
            <g id='Artboard' transform='translate(-400.000000, -178.000000)'>
              <g id='Group' transform='translate(400.000000, 178.000000)'>
                <path
                  d='M-5.68434189e-14,2.84217094e-14 L39.1816085,2.84217094e-14 L69.3453773,32.2519224 L101.428699,2.84217094e-14 L138.784583,2.84217094e-14 L138.784199,29.8015838 C137.958931,37.3510206 135.784352,42.5567762 132.260463,45.4188507 C128.736573,48.2809251 112.33867,64.5239941 83.0667527,94.1480575 L56.2750821,94.1480575 L6.71554594,44.4188507 C2.46876683,39.9813776 0.345377275,35.1089553 0.345377275,29.8015838 C0.345377275,24.4942122 0.230251516,14.560351 -5.68434189e-14,2.84217094e-14 Z'
                  id='Path'
                  className='text-primary'
                  style={{ fill: 'currentColor' }}
                ></path>
                <path
                  d='M69.3453773,32.2519224 L101.428699,1.42108547e-14 L138.784583,1.42108547e-14 L138.784199,29.8015838 C137.958931,37.3510206 135.784352,42.5567762 132.260463,45.4188507 C128.736573,48.2809251 112.33867,64.5239941 83.0667527,94.1480575 L56.2750821,94.1480575 L32.8435758,70.5039241 L69.3453773,32.2519224 Z'
                  id='Path'
                  fill='url(#linearGradient-1)'
                  opacity='0.2'
                ></path>
                <polygon
                  id='Path-2'
                  fill='#000000'
                  opacity='0.049999997'
                  points='69.3922914 32.4202615 32.8435758 70.5039241 54.0490008 16.1851325'
                ></polygon>
                <polygon
                  id='Path-2'
                  fill='#000000'
                  opacity='0.099999994'
                  points='69.3922914 32.4202615 32.8435758 70.5039241 58.3683556 20.7402338'
                ></polygon>
                <polygon
                  id='Path-3'
                  fill='url(#linearGradient-2)'
                  opacity='0.099999994'
                  points='101.428699 0 83.0667527 94.1480575 130.378721 47.0740288'
                ></polygon>
              </g>
            </g>
          </g>
        </svg>
        <h2 className='brand-text text-primary ml-1'>Vuexy</h2>
      </a>
      <div className='misc-inner p-2 p-sm-3'>
        <div className='w-100 text-center'>
          <h2 className='mb-1'>You are not authorized! 🔐</h2>
--- a/src/views/ui-elements/page-layouts/BoxedLayout.js
+++ b/src/views/ui-elements/page-layouts/BoxedLayout.js
@ -13,7 +13,7 @@ const BoxedLayout = () => {
          <span>
            Please check the{' '}
            <a
              href='https://pixinvent.com/demo/vuexy-react-admin-dashboard-template/documentation/development/page-layouts'
              href='https://pixinvent.com/demo/-react-admin-dashboard-template/documentation/development/page-layouts'
              target='_blank'
            >
              Layout boxed documentation
--- a/src/views/ui-elements/page-layouts/CollapsedMenu.js
+++ b/src/views/ui-elements/page-layouts/CollapsedMenu.js
@ -17,7 +17,7 @@ const CollapsedMenu = () => {
          <span>
            Use this layout to set menu (navigation) default collapsed. Please check{' '}
            <a
              href='https://pixinvent.com/demo/vuexy-react-admin-dashboard-template/documentation/development/page-layouts'
              href='https://pixinvent.com/demo/-react-admin-dashboard-template/documentation/development/page-layouts'
              target='_blank'
            >
              the Layout collapsed menu documentation
--- a/src/views/ui-elements/page-layouts/LayoutBlank.js
+++ b/src/views/ui-elements/page-layouts/LayoutBlank.js
@ -13,7 +13,7 @@ const LayoutBlank = () => {
              <span>
                This layout is used in Authentication & Miscellaneous page. Please check the{' '}
                <a
                  href='https://pixinvent.com/demo/vuexy-react-admin-dashboard-template/documentation/development/page-layouts'
                  href='https://pixinvent.com/demo/-react-admin-dashboard-template/documentation/development/page-layouts'
                  target='_blank'
                >
                  Layout blank documentation
--- a/src/views/ui-elements/page-layouts/LayoutEmpty.js
+++ b/src/views/ui-elements/page-layouts/LayoutEmpty.js
@ -13,7 +13,7 @@ const LayoutEmpty = () => {
          <span>
            This layout can be useful for getting started with empty content section. Please check the{' '}
            <a
              href='https://pixinvent.com/demo/vuexy-react-admin-dashboard-template/documentation/development/page-layouts'
              href='https://pixinvent.com/demo/-react-admin-dashboard-template/documentation/development/page-layouts'
              target='_blank'
            >
              Layout empty documentation
--- a/src/views/ui-elements/page-layouts/WithoutMenu.js
+++ b/src/views/ui-elements/page-layouts/WithoutMenu.js
@ -17,7 +17,7 @@ const WithoutMenu = () => {
          <span>
            Please check the{' '}
            <a
              href='https://pixinvent.com/demo/vuexy-react-admin-dashboard-template/documentation/development/page-layouts'
              href='https://pixinvent.com/demo/-react-admin-dashboard-template/documentation/development/page-layouts'
              target='_blank'
            >
              Layout without menu documentation
--- a/src/views/ui-elements/typography/BlockquoteStyling.js
+++ b/src/views/ui-elements/typography/BlockquoteStyling.js
@ -10,7 +10,7 @@ const BlockquoteStyling = () => {
      <CardBody>
        <CardText>
          Add a <code className='highlighter-rouge'>.border-[left / right]-[color] .border-[left / right]-3</code>{' '}
          helper classes, where color can be any color from Vuexy Admin color palette.
          helper classes, where color can be any color from  Admin color palette.
        </CardText>
        <blockquote className='blockquote pl-1 border-left-primary border-left-3'>
          <CardText className='mb-0'>