mirror of https://github.com/vuejs/vitepress
feat: navlinks in sidebar (#80)
* feat: make navBarLinks component * feat: show nav contents in sidebar when mobile * feat: nav links style in mobilepull/81/head
parent
5dfddb86da
commit
a20bcf3cd7
@ -1,24 +1,14 @@
|
|||||||
import { computed } from 'vue'
|
|
||||||
import { withBase } from '../utils'
|
import { withBase } from '../utils'
|
||||||
import { useSiteDataByRoute } from 'vitepress'
|
import NavBarLinks from './NavBarLinks.vue'
|
||||||
import NavBarLink from './NavBarLink.vue'
|
|
||||||
import NavDropdownLink from './NavDropdownLink.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
NavBarLink,
|
NavBarLinks
|
||||||
NavDropdownLink
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
withBase,
|
withBase
|
||||||
navData:
|
|
||||||
process.env.NODE_ENV === 'production'
|
|
||||||
? // navbar items do not change in production
|
|
||||||
useSiteDataByRoute().value.themeConfig.nav
|
|
||||||
: // use computed in dev for hot reload
|
|
||||||
computed(() => useSiteDataByRoute().value.themeConfig.nav)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,22 @@
|
|||||||
|
import { computed } from 'vue'
|
||||||
|
import { useSiteDataByRoute } from 'vitepress'
|
||||||
|
import NavBarLink from './NavBarLink.vue'
|
||||||
|
import NavDropdownLink from './NavDropdownLink.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
NavBarLink,
|
||||||
|
NavDropdownLink
|
||||||
|
},
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
navData:
|
||||||
|
process.env.NODE_ENV === 'production'
|
||||||
|
? // navbar items do not change in production
|
||||||
|
useSiteDataByRoute().value.themeConfig.nav
|
||||||
|
: // use computed in dev for hot reload
|
||||||
|
computed(() => useSiteDataByRoute().value.themeConfig.nav)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="nav-links" v-if="navData">
|
||||||
|
<template v-for="item of navData">
|
||||||
|
<NavDropdownLink v-if='item.items' :item="item"/>
|
||||||
|
<NavBarLink v-else :item="item"/>
|
||||||
|
</template>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./NavBarLinks"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 35px;
|
||||||
|
list-style-type: none;
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 719px) {
|
||||||
|
.nav-links {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue