pinafore/routes/settings/_components/SettingsNav.html

73 lines
1.5 KiB
HTML

<nav class="settings-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>
.settings-nav ul {
margin: 20px 20px;
padding: 0;
list-style: none;
}
.settings-nav li {
margin: 5px 0;
font-size: 1em;
display: inline-block;
}
.settings-nav li::after {
content: '>';
margin: 0 15px;
color: var(--anchor-text);
}
.settings-nav 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>