Upvex - Responsive Admin Dashboard Template

Vertical Layouts

You can change or customize the left side navigation very easily. Following guide would help you to do that.

How to add new menu items/change menu items?

In order to add, change or remove menu items from the left side navigation, simply edit in file src/html/partials/left-sidebar.html. The change would reflect in all the html files automatically. We are using gulp-file-include which would actually take care of including the left-sidebar.html file content in all the html pages.

How to change width?

In order to change the width of left side navigation bar, open a file src/scss/_variables.scss and change the value of variable $leftbar-width. The default value is set to 240px.

How to change background or menu text color?

In order to change the background color, open a file src/scss/scss/_variables.scss and change the value of variable $bg-leftbar-light the default light value is set to #ffffff, $bg-leftbar-dark the default dark value is set to #3d454e.

When you change the background color, you might want to change the color of menu accordingly. To change the color of menu item, change the variable $menu-item (Default is set to #8391a0). Similarly, change the value of variables $menu-item-hover and $menu-item-active.

You can change other styles by making modifications in src/scss/custom/structure/_left-menu.scss.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform:

Small Sidebar

Keep your body element with class left-side-menu-sm E.g. <body class="left-side-menu-sm"> to have small sidebar.

Light Sidebar

Keep your body element with class left-side-menu-light E.g. <body class="left-side-menu-dark"> to have dark sidebar.

Dark Topbar

Add @@include('./partials/topbar-dark.html') in your html to have dark styled topbar. Keep your body element with class topbar-dark

Collapsed Sidebar

Keep your body element with class enlarged and data attribute data-keep-enlarged="true" E.g. <body class="enlarged" data-keep-enlarged="true"> to have collapsed sidebar.

Boxed layout

Keep your body element with class enlarged boxed-layout and data attribute data-keep-enlarged="true" E.g. <body class="enlarged boxed-layout" data-keep-enlarged="true"> to have boxed layout.

Preloader

In order to add pre-loader in your page, include following html after body element.

 
                                                    <div id="preloader">
                                                        <div id="status">
                                                            <div class="spinner">Loading...</div>
                                                        </div>
                                                    </div>