74 lines
1.4 KiB
HTML
74 lines
1.4 KiB
HTML
<nav>
|
|
<ul>
|
|
{{#each navItems as navItem}}
|
|
<li>
|
|
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
|
|
</li>
|
|
{{/each}}
|
|
<li>
|
|
<SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
|
|
</li>
|
|
</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 = {
|
|
'settings': 'Settings',
|
|
'settings/about': 'About Pinafore',
|
|
'settings/instances': 'Instances',
|
|
'settings/instances/add': 'Add an instance',
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
SettingsNavItem
|
|
},
|
|
computed: {
|
|
navItems: page => {
|
|
let res = []
|
|
let breadcrumbs = page.split('/')
|
|
let path = ''
|
|
for (let i = 0; i < breadcrumbs.length - 1; i++) {
|
|
let currentPage = breadcrumbs[i]
|
|
path += currentPage
|
|
res.push({
|
|
label: NAV_ITEMS[path],
|
|
href: `/${path}`,
|
|
name: path
|
|
})
|
|
path += '/'
|
|
}
|
|
return res
|
|
}
|
|
}
|
|
}
|
|
</script> |