docs: enable linkGroups to have links, too

This commit is contained in:
Hans Pagel
2021-04-06 23:47:12 +02:00
parent 3f3ce1d8d4
commit 85556fc428
3 changed files with 59 additions and 35 deletions

View File

@@ -0,0 +1,4 @@
# Community
* GitHub https://github.com/ueberdosis/tiptap-next
* Discord https://discord.gg/WtJ49jGshW
* Twitter https://twitter.com/tiptap_editor

View File

@@ -57,42 +57,52 @@
<portal :to="sidebarPortal" v-if="showSidebar"> <portal :to="sidebarPortal" v-if="showSidebar">
<nav class="app__sidebar-menu"> <nav class="app__sidebar-menu">
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i"> <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
<div class="app__link-group-title"> <template v-if="linkGroup.link && !linkGroup.items">
{{ linkGroup.title }} <g-link
</div> class="app__link-group__link"
<ul class="app__link-list"> :to="linkGroup.redirect || linkGroup.link"
<li v-for="(item, j) in linkGroup.items" :key="j"> >
<g-link {{ linkGroup.title }}
:class="{ </g-link>
'app__link': true, </template>
'app__link--exact': $router.currentRoute.path === item.link, <template v-else>
'app__link--active': $router.currentRoute.path.startsWith(item.link), <div class="app__link-group-title">
[`app__link--${item.type}`]: item.type !== null, {{ linkGroup.title }}
'app__link--with-children': !!item.items </div>
}" <ul class="app__link-list">
:to="item.redirect || item.link" <li v-for="(item, j) in linkGroup.items" :key="j">
> <g-link
{{ item.title }} :class="{
</g-link> 'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
[`app__link--${item.type}`]: item.type !== null,
'app__link--with-children': !!item.items
}"
:to="item.redirect || item.link"
>
{{ item.title }}
</g-link>
<ul v-if="item.items" class="app__link-list"> <ul v-if="item.items" class="app__link-list">
<li v-for="(item, k) in item.items" :key="k"> <li v-for="(item, k) in item.items" :key="k">
<g-link <g-link
:class="{ :class="{
'app__link': true, 'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link, 'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link), 'app__link--active': $router.currentRoute.path.startsWith(item.link),
[`app__link--${item.type}`]: item.type !== null, [`app__link--${item.type}`]: item.type !== null,
}" }"
:to="item.link" :to="item.link"
exact exact
> >
{{ item.title }} {{ item.title }}
</g-link> </g-link>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</template>
</div> </div>
</nav> </nav>
</portal> </portal>

View File

@@ -1,3 +1,13 @@
# - title: Documentation
# link: introduction
# - title: Examples
# link: /examples
# redirect: /examples/default
# - title: Community
# link: community
# - title: Sponsor
# link: https://github.com/ueberdosis/sponsor
- title: Overview - title: Overview
items: items:
- title: Installation - title: Installation