pinafore/routes/_components/settings/SettingsNav.html

74 lines
1.5 KiB
HTML
Raw Normal View History

<nav class="settings-nav">
2018-01-09 01:44:29 +00:00
<ul>
{#each navItems as navItem}
2018-01-09 01:44:29 +00:00
<li>
<SettingsNavItem {page} name={navItem.name} href={navItem.href} label={navItem.label} />
2018-01-09 01:44:29 +00:00
</li>
{/each}
2018-01-13 20:12:17 +00:00
<li>
<SettingsNavItem {page} name={page} href="/{page}" {label} />
2018-01-13 20:12:17 +00:00
</li>
2018-01-09 01:44:29 +00:00
</ul>
</nav>
<style>
.settings-nav ul {
margin: 20px 20px;
2018-01-09 01:44:29 +00:00
padding: 0;
list-style: none;
}
.settings-nav li {
margin: 5px 0;
2018-01-13 18:53:25 +00:00
font-size: 1em;
display: inline-block;
2018-01-09 01:44:29 +00:00
}
.settings-nav li::after {
2018-01-13 18:53:25 +00:00
content: '>';
margin: 0 15px;
color: var(--anchor-text);
2018-01-09 01:44:29 +00:00
}
.settings-nav li:last-child::after {
2018-01-13 18:53:25 +00:00
content: '';
margin-left: 0;
font-size: 1em;
2018-01-09 01:44:29 +00:00
}
2018-01-13 18:53:25 +00:00
</style>
<script>
import SettingsNavItem from './SettingsNavItem.html'
const NAV_ITEMS = {
2018-01-13 20:12:17 +00:00
'settings': 'Settings',
'settings/about': 'About Pinafore',
'settings/general': 'General',
2018-01-13 20:12:17 +00:00
'settings/instances': 'Instances',
2018-04-04 01:01:22 +00:00
'settings/instances/add': 'Add instance'
2018-01-13 18:53:25 +00:00
}
export default {
components: {
SettingsNavItem
},
computed: {
navItems: ({ page }) => {
2018-01-13 20:12:17 +00:00
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 += '/'
2018-01-13 18:53:25 +00:00
}
return res
}
}
}
</script>