Use | Notion

Using Addon

To make use of the MainLayout in your project just go to the App.vue file and add the following code:

<template>
  **<OcMainLayout>**
    <router-view />
  **</OcMainLayout>**
</template>

If you need to hide the side menu you can make use of the isMenu prop.

<template>
  <OcMainLayout :isMenu="false">
    <router-view />
  </OcMainLayout>
</template>

If you need to add items from the menu, change the url icon or set your doLogout function, you can use the config prop.

<template>
  <OcMainLayout **config="config"**>
    <router-view />
  </OcMainLayout>
</template>


export default {
  data() {
    return {
      config: {
        menu: {
          title: 'Email T',
          items: [
            {
              path: '/Sms/SmsSending', // path or url
              description: 'Envío',
            },
            {
              path: '/Sms/Reports',
              description: 'Reportes',
              langKey: 'reports', // to use internationalization
            },
          ],
        },
        urlLogo: '<https://domain.com/logo.png>',
				doLogout: myDoLogoutFunction, // a custom function, by default the addon 
																		// uses the Security function
      },
    };
  },
}

Api

Props

Property	Type	Description	Default
isHeader	Boolean	Determines if the header is visible	true
isNavbar	Boolean	Determines if the navbar is visible	true
isMenu	Boolean	Determines if the menu is visible	true
internationalization	Boolean	Determines if the internationalization control is visible	true
config	Object	Allows you to configure the menu, logo and the doLogout function	{}
navbar	Array	Allows you to modify the navbar options	@ocean/security addon store navbar property
selectedMenu	Number	Allows you to modify the selected item of the navbar	@ocean/security addon store selectedMenu property
userName	String	Allows you to modify the username	@ocean/security addon store userName property

Slots

Name	Description
menuTitle	Slot located at the top of the menu to display the title
menuItems	Slot located in the middle part of the menu to show the menu items