Layouts

Last updated 5 months ago

Vuely comes with four handcrafted layout. Read the documentation carefully to use following layouts in your app.

Default Layout

default

Follow these steps to use default layout in your app:-

You need to define your each route under the src->router->default.js file.

default.js
import Full from 'Container/Full'
// dashboard components
const Ecommerce = () => import('Views/dashboard/Ecommerce');
export default {
path: '/',
component: Full,
redirect: '/default/dashboard/ecommerce',
children: [
{
path: '/default/dashboard/ecommerce', // path
component: Ecommerce, // component
meta: {
requiresAuth: true, // to protect page
title: 'message.ecommerce', // page title
breadcrumb: 'Dashboard / Ecommerce' // page breadcrumbs
}
}
]
}

To add new menu in the sidebar open src->components->Sidebar->SidebarLinks.js file, and follow the structure given below:-

SidebarLinks.js
// Sidebar Routers
export const category1 = [
// if menu has childrens
{
action: 'zmdi-view-dashboard', // icon
title: 'message.dashboard', // menu title
items: [
{ title: 'message.ecommerce', path: '/dashboard/ecommerce' }
]
},
// if menu has not childrens
{
action: 'zmdi-view-dashboard', // icon
title: 'message.ecommerce', // menu title
path: '/dashboard/ecommerce', // menu path
items: null // childrens
}
]

Mini Sidebar

mini sidebar

Follow these steps to use mini sidebar layout in your app:-

You need to define your each route under the src->router->mini.js file.

mini.js
import MiniSidebarLayout from 'Container/MiniSidebarLayout'
// dashboard components
const Ecommerce = () => import('Views/dashboard/Ecommerce');
export default {
path: '/mini',
component: MiniSidebarLayout,
redirect: '/mini/dashboard/ecommerce',
children: [
{
component: Ecommerce,
path: '/mini/dashboard/ecommerce',
meta: {
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'Dashboard / Ecommerce'
}
}
]
}

To add new menu in the sidebar do the same process as in the default layout.

Horizontal Menu

horizontal menu

Follow these steps to use horizontal menu layout in your app:-

You need to define your each route under the src->router->horizontal.js file.

horizontal.js
import HorizontalLayout from 'Container/HorizontalLayout'
// dashboard components
const Ecommerce = () => import('Views/dashboard/Ecommerce');
export default {
path: '/horizontal',
component: HorizontalLayout,
redirect: '/horizontal/dashboard/ecommerce',
children: [
{
component: Ecommerce,
path: '/horizontal/dashboard/ecommerce',
meta: {
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'Dashboard / Ecommerce'
}
}
]
}

To add new menu in horizontal menu open src->components->AppHorizontalMenus->AppLinks.js file, and follow the structure given below:-

AppLinks.js
// Sidebar Routers
export const category1 = [
// if item has childrens
{
action: 'zmdi-view-dashboard',
title: 'message.dashboard',
items: [
{ title: 'message.ecommerce', path: '/dashboard/ecommerce' }
]
},
// if item has no childrens
{
action: 'zmdi-view-dashboard',
title: 'message.dashboard',
path: '/dashboard/ecommerce',
items: null
}
]

Boxed

boxed

Follow these steps to use boxed layout in your app:-

You need to define your each route under the src->router->boxed.js file.

boxed.js
import BoxedLayout from 'Container/Boxed';
// dashboard components
const Ecommerce = () => import('Views/dashboard/Ecommerce');
export default {
path: '/boxed',
component: BoxedLayout,
redirect: '/boxed/dashboard/ecommerce',
children: [
{
component: Ecommerce,
path: '/boxed/dashboard/ecommerce',
meta: {
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'Dashboard / Ecommerce'
}
}
]
}

To add new menu in this layout do the same process as in horizontal menu layout.

Dark Mode

To enable dark mode in your app open src->store->modules->settings->index.js file add set the darkMode value true as shown in below:-

index.js
/**
* Settings Module
*/
import {
languages,
sidebarBackgroundImages,
sidebarFilters,
routerAnimations,
themes,
headerFilters
} from "./data";
const state = {
darkMode: false, // set true to enable dark mode
..
}
...