<template>
<o-navigation :links="links">
<template slot="links" props="link">
<nuxt-link :to="link.href">{{link.text}}</nuxt-link>
</template>
<template slot="footer-link">
<nuxt-link to="/refer">Refer & Earn</nuxt-link>
</template>
<template slot="footer-link">
<nuxt-link to="/support">Support</nuxt-link>
</template>
<template slot="footer-link">
<nuxt-link to="/account">Account</nuxt-link>
</template>
<template slot="footer-link">
<o-select :options="[
{
label: 'Tesla Diamonds 1',
value: '1',
},
{
label: 'Tesla Diamonds 2',
value: '2',
},
]" />
</template>
</o-navigation>
</template>
<script>
import { ONavigation } from 'orbit/components/Navigation';
export default {
components: {
ONavigation,
},
data() {
links: [
{
text: 'Home',
href: '/',
},
{
text: 'Stats',
href: '/stats',
},
{
text: 'Store',
href: '/store',
navigation: [
{
text: 'Products'
href: '/store/products',
children: [
{
text: 'Categories',
href: '/store/categories',
},
{
text: 'Options',
href: '/store/options',
},
],
},
{
text: 'Orders',
href: '/store/orders',
},
{
text: 'Coupons',
href: '/store/coupons',
},
{
text: 'Settings',
href: '/store/settings',
},
],
},
{
text: 'Marketing',
href: '/marketing',
},
{
text: 'Customers',
href: '/customers',
},
]
},
};
</script>
Since the Logo needs to exist in both the Navigation and the Page components, and since the Page component will always be a parent of the Navigation, it will be declared in the Page component and passed down via provide/inject.
footer-linkslots can we have one that contains all the markup for the footer-links?