pinafore/routes/settings/_components/SettingsNav.html

74 lines
1.2 KiB
HTML
Raw Normal View History

2018-01-09 02:44:29 +01:00
<nav>
<ul>
2018-01-13 19:53:25 +01:00
{{#each navItems as navItem}}
2018-01-09 02:44:29 +01:00
<li>
2018-01-13 19:53:25 +01:00
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
2018-01-09 02:44:29 +01:00
</li>
2018-01-13 19:53:25 +01:00
{{/each}}
2018-01-09 02:44:29 +01:00
</ul>
</nav>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
li {
2018-01-13 19:53:25 +01:00
margin: 10px 0;
font-size: 1em;
2018-01-09 02:44:29 +01:00
}
2018-01-13 19:53:25 +01:00
li::after {
content: '>';
margin: 0 15px;
color: var(--anchor-text);
2018-01-09 02:44:29 +01:00
}
2018-01-13 19:53:25 +01:00
li:last-child::after {
content: '';
margin-left: 0;
font-size: 1em;
2018-01-09 02:44:29 +01:00
}
2018-01-13 19:53:25 +01:00
</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>