CraydelSidebarMenu

Installation

Get the latest version by NPM:

$ npm i @craydel-v3/craydel-sidebar-menu

Component Import

Import the module chosen directly in your component

<script>
  import CraydelSidebarMenu from "@craydel-v3/craydel-sidebar-menu/src/CraydelSidebarMenu.vue";

  export default {
  components: {CraydelSidebarMenu}
}
</script>

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 | |-------|:---------------------------------| | close | 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.

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

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

  <div v-if="$vuetify.display.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'
      },
    ]
  }
}