vue-mg-sidebar-standard v1.1.1

vue-mg-sidebar-standard

Installation

npm install --save vue-mg-sidebar-standard

Usage

app.js

import SidebarStandard from 'vue-mg-sidebar-standard'
Vue.component('SidebarStandard', SidebarStandard)

Example:

<template>
<div>
    <SidebarStandard v-model="show" :option="option" :routes="routes"/>
    <transition name="view" mode="out-in">
        <router-view :key="$route.fullPath" :class="{ slide_right: show }"/>
    </transition>
</div>
</template>

<script>
export default {
    data() {
        return {
            show: true,
            option: {
                top_height: '75px',
                tab_height: '75px',
            }
            routes : [
              {
                name: 'home',
                path: '/',
                icon: 'fas fa-home',
              },
              {
                name: 'report',
                path: '/report',
                icon: 'far fa-edit',
              },
            ]
        }
    },
}
</script>

<style scope>
@media ( min-width: 576px ) {
    .slide_right {
        padding-left: 200px;
    }
}
</style>

If there is a header

.header {
    z-index: 5;
}

Please specify style in global

.router_link:hover {
  background: rgba($primary, 0.5);
}
.active-link {
  background: $primary;
}

※Include Font Awesome icons in your project if you want to include icons