- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
This commit is contained in:
Joris Slagter
176
components/layout/Footer.vue
Normal file
176
components/layout/Footer.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<v-footer light padless>
|
||||
<v-card class="flex my-0">
|
||||
<v-card-title>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-list dense>
|
||||
<v-subheader>Productcatalogus</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-list dense>
|
||||
<v-subheader>Diensten</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-list dense>
|
||||
<v-subheader>CATEGORY</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-list dense>
|
||||
<v-subheader>CATEGORY</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" sm="3">
|
||||
<v-list dense>
|
||||
<v-subheader>CATEGORY</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="3">
|
||||
<v-list dense>
|
||||
<v-subheader>CATEGORY</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="3">
|
||||
<v-list dense>
|
||||
<v-subheader>CATEGORY</v-subheader>
|
||||
<v-list-item-group v-model="item" color="primary">
|
||||
<v-list-item v-for="(item, i) in items" :key="i">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="3" class="d-flex flex-column">
|
||||
<v-list dense>
|
||||
<v-subheader>Betalingsmethode</v-subheader>
|
||||
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="payment in payments"
|
||||
:key="payment.name"
|
||||
class="d-flex child-flex"
|
||||
cols="2"
|
||||
>
|
||||
<v-img
|
||||
:src="require(`@/assets/img/${payment.filename}`)"
|
||||
:lazy-src="require(`@/assets/img/${payment.filename}`)"
|
||||
contain
|
||||
>
|
||||
<template v-slot:placeholder>
|
||||
<v-row class="fill-height ma-0" align="center" justify="center">
|
||||
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-list>
|
||||
|
||||
<v-list dense>
|
||||
<v-subheader>Volg ons</v-subheader>
|
||||
<v-btn v-for="icon in icons" :key="icon" class="mx-2" light icon>
|
||||
<v-icon small>{{ 'mdi-' + icon }}</v-icon>
|
||||
</v-btn>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="py-2 grey lighten-4">
|
||||
<span>© Buningh {{ new Date().getFullYear() }}</span>
|
||||
<v-spacer></v-spacer>
|
||||
<span>Alle vermelde prijzen zijn in euro's en inclusief BTW</span>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Newsletter from '~/components/Newsletter/Newsletter'
|
||||
import Disclaimer from '~/components/Info/Disclaimer'
|
||||
import Privacy from '~/components/Info/Privacy'
|
||||
import Cookies from '~/components/Info/Cookies'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Newsletter,
|
||||
Disclaimer,
|
||||
Privacy,
|
||||
Cookies
|
||||
},
|
||||
data: () => ({
|
||||
item: 99,
|
||||
payments: [
|
||||
{ name: 'Bancontact', filename: 'BC_logo_ORGNL_RGB.png' },
|
||||
{ name: 'PayPal', filename: 'PayPal.png' },
|
||||
{ name: 'Maestro', filename: 'MAES.png' },
|
||||
{ name: 'IDeal', filename: 'iDeal.png' },
|
||||
{ name: 'MasterCard', filename: 'MC.png' },
|
||||
{ name: 'Visa', filename: 'Visa.png' }
|
||||
],
|
||||
items: [
|
||||
{ text: 'Real-Time' },
|
||||
{ text: 'Audience' },
|
||||
{ text: 'Conversions' },
|
||||
{ text: 'Whatever' }
|
||||
],
|
||||
icons: ['twitter', 'facebook', 'linkedin', 'instagram'],
|
||||
disclaimer: false,
|
||||
privacy: false,
|
||||
cookies: false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
80
components/layout/Header/Header.vue
Normal file
80
components/layout/Header/Header.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div>
|
||||
<topbar />
|
||||
|
||||
<v-row align="center" justify="space-between">
|
||||
<div class="d-flex mx-4">
|
||||
<v-card class="ma-3 pa-6" outlined tile>LOGO Buningh</v-card>
|
||||
<v-row align="center" class="mx-4">
|
||||
<v-col>
|
||||
<v-btn
|
||||
text
|
||||
small
|
||||
:to="item.to"
|
||||
v-for="(item,i) in menu"
|
||||
:key="i"
|
||||
class="mx-4"
|
||||
>{{item.title}}</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="icon-search"
|
||||
label="Zoeken naar merk of product.."
|
||||
single-line
|
||||
hide-details
|
||||
outlined
|
||||
></v-text-field>
|
||||
|
||||
<v-row align="center" class="mx-4">
|
||||
<v-col>
|
||||
<v-btn icon to="/login">
|
||||
<v-icon>icon-password</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-heart</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn icon>
|
||||
<v-icon>mdi-shopping-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Topbar from '~/components/layout/Header/Topbar'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Topbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
menu: [
|
||||
{ title: 'Verlichting', to: '/' },
|
||||
{ title: 'Meubels', to: '/' },
|
||||
{ title: 'Behang', to: '/' },
|
||||
{ title: 'Stoffen', to: '/' },
|
||||
{ title: 'Accessoires', to: '/' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return `${process.env.NAME}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
53
components/layout/Header/Topbar.vue
Normal file
53
components/layout/Header/Topbar.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<v-toolbar dense flat>
|
||||
<span v-for="(item,i) in menuItems.left" :key="`x${i}`" class="mx-4 caption">
|
||||
<v-avatar color="#ffcc00" size="6" class="mx-2"></v-avatar>
|
||||
<span>{{item.label}}</span>
|
||||
</span>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<span v-for="(item,i) in menuItems.right" :key="i" class="mx-4 caption">
|
||||
{{item.label}}
|
||||
</span>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuItems: {
|
||||
left: [
|
||||
{ label: 'Gratis verzending in NL & BE' },
|
||||
{ label: 'Meer dan 500 merken' },
|
||||
{ label: '135 jaar de nieuwste trends' }
|
||||
],
|
||||
right: [
|
||||
{ label: 'Interieuradvies', to: '/interieuradvies' },
|
||||
{ label: 'Over Buningh', to: '/algemeen' },
|
||||
{ label: 'Klantenservice', to: '/klantenservice' },
|
||||
{ label: '+31 10 41 40 560' }
|
||||
]
|
||||
},
|
||||
|
||||
menu: [
|
||||
{ title: 'Verlichting', route: '/' },
|
||||
{ title: 'Meubels', route: '/' },
|
||||
{ title: 'Behang', route: '/' },
|
||||
{ title: 'Stoffen', route: '/' },
|
||||
{ title: 'Accessoires', route: '/' },
|
||||
{ title: 'Sale', route: '/' },
|
||||
{ title: 'Inspiratie', route: '/' },
|
||||
{ title: 'Merken', route: '/' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return `${process.env.NAME}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
31
components/layout/LeftMenu.vue
Normal file
31
components/layout/LeftMenu.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
|
||||
<template>
|
||||
<v-navigation-drawer v-model="drawer" app>
|
||||
<v-list dense>
|
||||
<v-list-item link>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Home</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-contact-mail</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Contact</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
drawer: false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
10
components/layout/SystemBar.vue
Normal file
10
components/layout/SystemBar.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<v-system-bar window light>
|
||||
<v-icon>mdi-message</v-icon>
|
||||
<span>10 unread messages</span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
<v-icon>icon-checkmarkbox-blank-outline</v-icon>
|
||||
<v-icon x-small>icon-close</v-icon>
|
||||
</v-system-bar>
|
||||
</template>
|
||||
Reference in New Issue
Block a user