@craydel/craydel-sidebar-menu

CraydelSidebarMenu

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-sidebar-menu

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelSidebarMenu from '@craydel/craydel-sidebar-menu/src/CraydelSidebarMenu.vue'

const Components = {
  CraydelSidebarMenu,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
show-menu	boolean	false	Controls whether the component is visible or hidden.
menu-items	array	[]	Array of objects that will look for the keys text, icon (mdi icons), link, target (default href target options) and if required sub_menu array with text and link keys.

 

Events

Name	Description
hideMenu	Emitted when the menu is closed.

 

Slots

Name	Description
header	A slot at the top of the menu.
default	The default Vue slot. Used for any content that will appear after the menu items.

 

Usage

An example showing a sidebar menu. The sidebar menu has a header and default slot that is visible only on mobile.

<v-btn @click="show_menu = true" v-if="$vuetify.breakpoint.mobile">Open menu</v-btn>

<craydel-sidebar-menu
        :show-menu="show_menu"
        :menu-items="menu_items"
        @hideMenu="show_menu = false"
>
  <template v-slot:header v-if="$vuetify.breakpoint.mobile">
    <div class="pa-4">Navigation</div>
  </template>

  <div v-if="$vuetify.breakpoint.mobile">© Copyright 2023. All Rights Reserved.</div>
</craydel-sidebar-menu>

data()
{
  return {
    show_menu: false,
    menu_items: [
      {
        text: 'Home',
        icon: 'mdi-home',
        link: '/',
      },
      {
        text: 'About Us',
        icon: 'mdi-account-group',
        link: '',
        sub_menu: [
          {
            text: 'Our Team',
            link: '#'
          },
          {
            text: 'Our History',
            link: '#'
          }
        ]
      },
      {
        text: 'Contacts',
        icon: 'mdi-phone',
        link: '/contacts',
        target: '_blank'
      },
    ]
  }
}