74 lines
1.2 KiB
HTML
74 lines
1.2 KiB
HTML
<nav>
|
|
<ul>
|
|
{{#each navItems as navItem}}
|
|
<li>
|
|
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
li {
|
|
margin: 10px 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
li::after {
|
|
content: '>';
|
|
margin: 0 15px;
|
|
color: var(--anchor-text);
|
|
}
|
|
|
|
li:last-child::after {
|
|
content: '';
|
|
margin-left: 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import SettingsNavItem from './SettingsNavItem.html'
|
|
|
|
const NAV_ITEMS = {
|
|
home: {
|
|
name: 'home',
|
|
href: '/settings',
|
|
label: 'Settings'
|
|
},
|
|
about: {
|
|
name: 'about',
|
|
href: '/settings/about',
|
|
label: 'About Pinafore'
|
|
},
|
|
instances: {
|
|
name: 'instances',
|
|
href: '/settings/instances',
|
|
label: 'Instances'
|
|
}
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
SettingsNavItem
|
|
},
|
|
computed: {
|
|
navItems: page => {
|
|
let res = [NAV_ITEMS.home]
|
|
if (page === 'home') {
|
|
return res
|
|
}
|
|
res.push(NAV_ITEMS[page])
|
|
return res
|
|
}
|
|
}
|
|
}
|
|
</script> |