admin-layout-vue
Version:
Admin layout Vue component with sidebar and navbar.
185 lines (168 loc) • 6.51 kB
Markdown
# Admin Layout - Vue JS component
[](https://www.npmjs.com/package/admin-layout-vue)
## Requirements:
- Bootstrap 5.2
- Vue router (for `<router-link>`)
- Vue 3
## Install:
```bash
npm install admin-layout-vue
```
## Parameters:
| **Property** | **Type** | **Required** |
|------------------------------------------------------|------------------|--------------|
| brandName | String | No |
| leftItemsByGroups | Array | Yes |
| leftItemsByGroups[].heading | String | No |
| leftItemsByGroups[].items | Array | Yes |
| leftItemsByGroups[].items[].label | String | Yes |
| leftItemsByGroups[].items[].iconClass | String | No |
| leftItemsByGroups[].items[].route | Object | No |
| leftItemsByGroups[].items[].route.name | String | Yes |
| leftItemsByGroups[].items[].visible | Bool | No |
| leftItemsByGroups[].items[].subItems | Array | No |
| leftItemsByGroups[].items[].relatedRoutes | Array | No |
| leftItemsByGroups[].items[].subItems[].label | String | Yes |
| leftItemsByGroups[].items[].subItems[].route | Object | Yes |
| leftItemsByGroups[].items[].subItems[].route.name | Object | Yes |
| leftItemsByGroups[].items[].subItems[].visible | Bool | No |
| leftItemsByGroups[].items[].subItems[].relatedRoutes | Array | No |
| topItems | Array | Yes |
| topItems[].label | String | No |
| topItems[].iconClass | String | No |
| topItems[].callable | Callable | No |
| topItems[].showBadge | Bool | No |
| topItems[].subItems[] | Array | No |
| topItems[].subItems[].label | String | Yes |
| topItems[].subItems[].class | String | No |
| topItems[].subItems[].iconClass | String | No |
| topItems[].subItems[].callable | Callable | Yes |
| topNavClass | String | No |
| leftNavClass | [String, Object] | No |
| leftNavBgClass | [String, Object] | No |
| dataBsThemeTop | String | No |
| dataBsThemeLeft | String | No |
| strictActiveRoute | Boolean | No |
## Example
```vue
<template>
<admin-layout
brand-name="Brand"
:left-items-by-groups="leftItemsByGroups"
:top-items="topItems"
>
<template #topEnd>
<div class="badge bg-info me-3">
Example
</div>
</template>
<router-view />
</admin-layout>
</template>
<script>
import AdminLayout from 'admin-layout-vue'
export default {
name: 'ExampleComponent',
components: {
AdminLayout,
},
data() {
return {
/**
* Sidebar menu items
*/
leftItemsByGroups: [
{
items: [
{
label: 'Home',
iconClass: 'bi bi-house-door-fill',
route: {
name: 'home',
},
},
],
},
{
heading: 'First heading',
items: [
{
label: 'People',
iconClass: 'bi bi-people-fill',
route: {
name: 'people',
},
relatedRoutes: [
'peopleCreate',
],
},
{
label: 'Briefcase',
iconClass: 'bi bi-briefcase-fill',
subItems: [
{
label: 'Option 1',
route: {
name: 'option',
query: {
status: '1',
},
},
relatedRoutes: [
'relatedOption',
],
},
{
label: 'Option 2',
route: {
name: 'option',
query: {
status: '2',
},
},
},
],
},
],
},
{
items: [
{
label: 'Coin',
iconClass: 'bi bi-coin',
route: {
name: 'coin',
},
},
],
},
],
/**
* Top navbar items
*/
topItems: [
{
iconClass: 'bi bi-person-circle',
subItems: [
{
label: this.$t('logout.submit'),
callable: this.onLogoutClick,
},
],
showBadge: false,
},
{
iconClass: 'bi bi-bell-fill',
callable: this.showNotifications,
showBadge: this.notificationsTotalCount > 0,
},
],
}
}
}
</script>
```
## Screenshots
<img width="1132" alt="Screenshot 2022-12-01 at 15 19 19" src="https://user-images.githubusercontent.com/39522338/205076785-d5b4acd2-8a40-40c0-b033-458bf9999fc5.png">
<img width="1132" alt="Screenshot 2022-12-01 at 15 19 37" src="https://user-images.githubusercontent.com/39522338/205076815-27532683-a0c0-4335-a13a-9b5951c35fb0.png">
<img width="572" alt="Screenshot 2022-12-01 at 15 18 55" src="https://user-images.githubusercontent.com/39522338/205076863-98b33cf8-260f-44a3-b162-e55cd7a4c2a4.png">