stoneC0der / vue-sidebar-menu-akahon

Vue sidebar menu akahon

vue-sidebar-menu-akahon

A Vue.js sidebar menu component.

Demo

View demo | Sandbox

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>

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

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
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	'@/assets/img/photo.jpg'	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
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.