pinafore/routes/_components/settings/SettingsNav.html
Nolan Lawson 42be854521
upgrade to svelte 2.0 (#251)
* upgrade to svelte 2.0

* update svelte-loader to 2.9.0
2018-05-01 17:05:36 -07:00

74 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/general': 'General',
'settings/instances': 'Instances',
'settings/instances/add': 'Add 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>