vue-sidebar-menu-akahon

A Vue.js V2 sidebar menu component.

Demo

View demo | Sandbox

Updates

v1.0.0

• Added new props isUsedVueRouter boolean param by default false. If you are using vue-router, set the value to true.
• Otherwise, when clicking on a menu item the <a> tag will be used by default and emitted the @menu-item-clicked event with the value of item-link.

Example:

<VueSidebarMenuAkahon
  :isUsedVueRouter="false"
  @menu-item-clicked="fnRouteTo(link)"
/>

---

Install

yarn add vue-sidebar-menu-akahon

Or

npm install --save vue-sidebar-menu-akahon

Add to project

Global

// main.js
import VueSidebarMenuAkahon from "vue-sidebar-menu-akahon";
Vue.component('vue-sidebar-menu-akahon', VueSidebarMenuAkahon);

Local Usage

<template>
  <div>
      <VueSidebarMenuAkahon />
  </div>
</template>

<script>
  import VueSidebarMenuAkahon from "vue-sidebar-menu-akahon";
  
  export default {
    name: 'component.vue',
    components: {VueSidebarMenuAkahon},
    data() {
      return {}
    }
  }
</script>

Customize configuration

See Configuration Reference.

Props

You can use icons from boxicons

Menu settings

Props (Parameter)	Type	Default	Description
isMenuOpen	Boolean	true	Open/Close menu
isUsedVueRouter	Boolean	false	When clicking on a menu item, if "true", "vue-router" is used instead of the "a" tag.
menuTitle	String	'Akahon'	Menu title
menuLogo	String	-	Logo
menuIcon	String	'bxl-c-plus-plus'	Icon (boxicons)

Menu items

Props (Parameter)	Type	Default	Description
menuItems	Array	[{link: "#",name: "Dashboard", tooltip: "Dashboard", icon: "bx-grid-alt" }]	Items

Search

Props (Parameter)	Type	Default	Description
isSearch	Boolean	true	Enable/Disable search input
searchPlaceholder	String	'Search...'	Search input placeholder
searchTooltip	String	'Search'	Search input tooltip

Profile detailes

Props (Parameter)	Type	Default	Description
profileImg	String	''	Profile avatar
profileName	String	'Fayzullo Saidakbarov'	Profile full name
profileRole	String	'Frontend vue developer'	Profile role title
isExitButton	Boolean	true	Enable/Disable exit button

Styles

Props (Parameter)	Type	Default	Description
bgColor	String	'#11101d'	Background color
secondaryColor	String	'#1d1b31'	Secondary color
homeSectionColor	String	'#e4e9f7'
logoTitleColor	String	'#fff'
iconsColor	String	'#fff'
itemsTooltipColor	String	'#e4e9f7'
searchInputTextColor	String	'#fff'
menuItemsHoverColor	String	'#fff'
menuItemsTextColor	String	'#fff'
menuFooterTextColor	String	'#fff'

Events

Event	Output	Description
@menu-item-clcked	item-link	If isUsedVueRouter=false, emitted when the menu item has been clicked
@button-exit-clicked	-	Emitted when the exit button has been clicked
@search-input-emit	String	Emitted when user types in the search input

Thanks for design

Prem Shahi

License

The MIT License

Vue CLI configuration

See Configuration Reference.