{"id":116,"date":"2019-08-31T06:47:23","date_gmt":"2019-08-31T06:47:23","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=116"},"modified":"2019-10-19T06:59:17","modified_gmt":"2019-10-19T06:59:17","slug":"adding-menu-in-different-layouts","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/adding-menu-in-different-layouts\/","title":{"rendered":"Adding Menu In Different Layouts"},"content":{"rendered":"\n

Adding a new menu element<\/h4>\n\n\n\n

You can add new menu items in the Vuely<\/strong> template by adding the item you want, in the src->store->modules->sidebar->data.js<\/code> file. The example of this is given below: <\/p>\n\n\n\n

 export const menus = {
     'message.general': [
         {
             action: 'zmdi-view-dashboard', \/\/icon
             title: 'message.dashboard', \/\/ menu title
             active: true, \/\/ set active menu
             items: [
                 { title: 'message.ecommerce', path: '\/default\/dashboard\/ecommerce', exact: true },
                 { title: 'message.webAnalytics', path: '\/mini\/dashboard\/web-analytics', exact: true },
                 { title: 'message.magazine', path: '\/horizontal\/dashboard\/magazine', exact: true },
                 { title: 'message.news', path: '\/boxed-v2\/dashboard\/news', exact: true },
                 { title: 'message.agency', path: '\/boxed\/dashboard\/agency', exact: true },
                 { title: 'message.saas', path: '\/horizontal\/dashboard\/saas', exact: true }
             ] \/\/ childrens
         },
         {
             action: 'zmdi-widgets',
             title: 'message.widgets',
             active: false,
             items: [
                 { title: 'message.user', path: '\/widgets\/user-widgets' },
                 { title: 'message.charts', path: '\/widgets\/chart-widgets' }
             ]
         }
     ], \/\/ categories
     'message.modules': [
         {
             action: 'zmdi-email',
             title: 'message.inbox',
             active: false,
             items: null,
             path: '\/inbox'
         },
         {
             action: 'zmdi-comments',
             title: 'message.chat',
             active: false,
             items: null,
             path: '\/chat'
         }
     ]
 }<\/pre>\n\n\n\n
Change\/Edit icons of the menu items<\/h5>\n\n\n\n
 You can change or edit the icons of the menu items by just changing the value of the action<\/strong> key in the above example. <\/p>\n\n\n\n
Change\/Edit icons of the parent menu items in Horizontal Layout<\/h5>\n\n\n\n
All the other layouts use the above mentioned method for the icons but the parent menu items in the horizontal layout uses some different approach. To add icons for parent menu items in horizontal layout open src->components->AppHorizontalMenus.vue<\/code> file, and name the icons for each category as defined below:- <\/p>\n\n\n\n
 
export default {
  data() {
    return {
      categories: 
        {
         'message.general': \"zmdi zmdi-view-dashboard\",
         'message.modules': \"zmdi zmdi-widgets\",
         'message.components':\"zmdi zmdi-view-carousel\",
         'message.applications': \"zmdi zmdi-assignment-check\",
         'message.features':\"zmdi zmdi-wrench\",
         'message.extensions':\"zmdi zmdi-file\"
       }
    }
  }
} <\/pre>\n\n\n\n
Note:<\/strong> Sub Menu(Child) items in the horizontal layout uses the same approach as other layouts are using. The above approach is only for the parent menu items not for the child menu items. <\/p><\/blockquote>\n\n\n\n
\n\n\n\n
Adding route of the added element in different layouts<\/h4>\n\n\n\n
Default Layout<\/h6>\n\n\n\n
\"\"<\/a>
Default Layout<\/figcaption><\/figure>\n\n\n\n
You need to define the route of newly added element in the src->router->default.js<\/code> file. You can add the element in the children array. You can find the example below: <\/p>\n\n\n\n
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
         }
      }
   ]
} <\/pre>\n\n\n\n
Mini Sidebar<\/h5>\n\n\n\n
\"\"<\/a>
Mini Sidebar<\/figcaption><\/figure>\n\n\n\n
You need to define the route of newly added element in the src->router->mini.js<\/code> file. You can add the element in the children array. You can find the example below:<\/p>\n\n\n\n
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'
         }
      }
   ]
}<\/pre>\n\n\n\n
Horizontal Menu<\/h5>\n\n\n\n
\"\"<\/a>
Horizontal Menu<\/figcaption><\/figure>\n\n\n\n
You need to define the route of newly added element in the src->router->horizontal.js<\/code> file. You can add the element in the children array. You can find the example below:<\/p>\n\n\n\n
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'
         }
      }
   ]
}<\/pre>\n\n\n\n
Boxed<\/h5>\n\n\n\n
There are two versions for boxed layout: One is Boxed Agency Version, another is Boxed News Version. Below are the screenshots for both the boxed versions & the steps that needs to be followed to add new menu item in boxed versions.<\/p>\n\n\n\n
Boxed Agency Version<\/h5>\n\n\n\n
\"\"<\/a>
Boxed Agency Version<\/figcaption><\/figure>\n\n\n\n
You need to define the route of newly added element in the src->router->boxed.js<\/code> file. You can add the element in the children array. You can find the example below:<\/p>\n\n\n\n
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'
         }
      }
   ]
}<\/pre>\n\n\n\n
Boxed News Version<\/h5>\n\n\n\n
\"\"<\/a>
Boxed News Version<\/figcaption><\/figure>\n\n\n\n
You need to define the route of newly added element in the src->router->boxed-v2.js<\/code> file. You can add the element in the children array. You can find the example below:<\/p>\n\n\n\n
import BoxedLayout from 'Container\/BoxedV2';
 
\/\/ dashboard components
const Ecommerce = () => import('Views\/dashboard\/Ecommerce');
 
export default {
   path: '\/boxed-v2',
   component: BoxedLayout,
   redirect: '\/boxed-v2\/dashboard\/ecommerce',
   children: [
      {
         component: Ecommerce,
         path: '\/boxed-v2\/dashboard\/ecommerce',
         meta: {
            requiresAuth: true,
            title: 'message.ecommerce',
            breadcrumb: null
         }
      }
   ]
}<\/pre>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    2    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Adding a new menu element You can add new menu items in the Vuely template by adding the item you want, in the src->store->modules->sidebar->data.js file. The example of this is given below: export const menus = { ‘message.general’: [ { action: ‘zmdi-view-dashboard’, \/\/icon title: ‘message.dashboard’, \/\/ menu title active: true, \/\/ set active menu items: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/116"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":16,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/116\/revisions"}],"predecessor-version":[{"id":821,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/116\/revisions\/821"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}