Sidebar Menu

is a component that can be reused in different Vue projects with configurable properties and tailwind styles

:hammer: Server requirements

• Node.js >= 14.0
• Vue.js 2.6
• Sass >= 1.32.0
• Vuex >= 3.0.0
• make sure you have a sass compiler either Webpack, Laravel-mix, Vite or Rollup

:pushpin: Installation

# git clone
git clone [email protected]:placetopay/sidebar-menu.git

For development

npm install
npm run dev 

Build package 

npm run build

:pushpin: Plugin installation

# install via npm
npm i @placetopay/sidebar-menu

:books: Plugin usage

// register the plugin on vue 
import SidebarMenu from '@placetopay/sidebar-menu'
import '@placetopay/sidebar-menu/dist/sidebar-menu.scss'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({})

//register globally
Vue.use(SidebarMenu , { store })

// add to your base template
 
//Default properties
<sidebar-menu></sidebar-menu>

//With properties
<sidebar-menu 
        :menu-items="[]"
        :sidebar-config="[]"
>
</sidebar-menu>

:notebook: Props

Sidebar menu items

{
    data: [
        // Sidebar parent menu (required)
        {
            link: '#',
            name: 'Transactions',
            icon: 'fa-cash-register',
        },
        {
            // Sidebar parent menu (required)
            link: '#',
            name: 'Dashboard',
            icon: 'fa-chart-line',
            // If you have submenus, you must declare them as follows
            submenus: [
                {
                    link: '#',
                    name: 'Generals',
                    icon: 'bx-grid-alt',
                },
                {
                    link: '#',
                    name: 'Temas personalizados',
                    icon: 'bx-grid-alt',
                }
            ]
        }
    ]
}

Sidebar menu styles

{
    data: [{
        sidebarOpenLogo: '',
        // logo sidebar cloded
        sidebarClosedLogo: '',
        // color sidebar 
        bgColor: 'white',
        // color sidebar border
        bgColorSidebarBorder: 'black',
        // color text of filter search
        colorInput: 'black',
        // background color of input
        bgColorInput: 'var(--primary-color-200)',
    }]
}