Pinafore-Web-Client-Frontend/routes/settings/_components/SettingsNav.html

74 lines
1.5 KiB
HTML
Raw Normal View History

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