82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<template>
|
|
<q-layout>
|
|
<Topbar :drawer="drawer" />
|
|
<q-drawer
|
|
v-model="drawer"
|
|
show-if-above
|
|
:mini="miniState"
|
|
@mouseover="miniState = false"
|
|
@mouseout="miniState = true"
|
|
mini-to-overlay
|
|
:width="200"
|
|
:breakpoint="500"
|
|
>
|
|
<q-scroll-area class="fit">
|
|
<q-list padding>
|
|
<q-item clickable v-ripple :to="{ path: '/dashboard' }" active-class="text-orange">
|
|
<q-item-section avatar>
|
|
<q-icon name="dashboard" />
|
|
</q-item-section>
|
|
<q-item-section> Dashboard</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple :to="{ path: '/customer' }" active-class="text-orange">
|
|
<q-item-section avatar>
|
|
<q-icon name="people" />
|
|
</q-item-section>
|
|
<q-item-section> Customers </q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple>
|
|
<q-item-section avatar>
|
|
<q-icon name="receipt" />
|
|
</q-item-section>
|
|
|
|
<q-item-section> Invoice Out </q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-ripple>
|
|
<q-item-section avatar>
|
|
<q-icon name="shopping_cart" />
|
|
</q-item-section>
|
|
|
|
<q-item-section> Catalog </q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<q-item clickable v-ripple>
|
|
<q-item-section avatar>
|
|
<q-icon name="drafts" />
|
|
</q-item-section>
|
|
|
|
<q-item-section> Drafts </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
<q-page-container>
|
|
<router-view></router-view>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from 'vue-class-component';
|
|
import Topbar from '@/components/Topbar.vue';
|
|
|
|
@Options({
|
|
components: {
|
|
Topbar,
|
|
},
|
|
})
|
|
export default class Main extends Vue {
|
|
drawer = false;
|
|
miniState = true;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg-darker {
|
|
background-color: $darker;
|
|
}
|
|
</style>
|