Skip to content

Commit

Permalink
feat: update sidebar ui (#257)
Browse files Browse the repository at this point in the history
* update sidebar ui

* fix dark theme

* Update docs

* Update style

* Refactor

* Remove unused style

* Update style
  • Loading branch information
saltysugar authored and egoist committed Jul 31, 2019
1 parent 94b8168 commit cec2af2
Show file tree
Hide file tree
Showing 11 changed files with 236 additions and 128 deletions.
59 changes: 59 additions & 0 deletions src/components/PageToc.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<div
class="PageToc"
v-if="
!$store.state.fetchingFile &&
link.toc !== false &&
link.link === $route.path &&
$store.state.page.headings &&
$store.state.page.headings.length > 0
"
>
<router-link
class="PageTocHeading"
:to="{hash: heading.slug}"
:data-level="heading.level"
v-for="heading in $store.state.page.headings"
:key="heading.slug"
v-html="heading.text"
></router-link>
</div>
</template>

<script>
export default {
props: {
link: {
type: Object,
required: true
}
}
}
</script>

<style scoped>
.PageToc {
border-left: 1px solid var(--border-color);
margin-left: 16px;
margin-top: 10px;
}
.PageTocHeading {
display: flex;
line-height: 1;
position: relative;
&:not(:last-child) {
margin-bottom: 8px;
}
&[data-level='2'] {
margin-left: 16px;
}
&.router-link-exact-active {
font-weight: bold;
color: var(--sidebar-link-active-color);
}
}
</style>
24 changes: 17 additions & 7 deletions src/components/Sidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
v-for="(item, index) in $store.getters.sidebar"
:key="index"
:item="item"
:open="currentOpenIndex === index"
@toggle="openSidebar(index)"
:open="openItems.indexOf(index) !== -1"
@toggle="toggleItem(index)"
/>
</div>

Expand All @@ -35,23 +35,33 @@ export default {
},
data() {
return {
currentOpenIndex: 0
openItems: []
}
},
watch: {
'$route.path': {
handler() {
this.currentOpenIndex = this.getCurrentIndex(
const index = this.getCurrentIndex(
this.$route.path,
this.$store.getters.sidebar
)
this.openItem(index)
},
immediate: true
}
},
methods: {
openSidebar(index) {
this.currentOpenIndex = this.currentOpenIndex === index ? -1 : index
openItem(index) {
if (this.openItems.indexOf(index) === -1) {
this.openItems.push(index)
}
},
toggleItem(index) {
if (this.openItems.indexOf(index) === -1) {
this.openItems.push(index)
} else {
this.openItems = this.openItems.filter(v => v !== index)
}
},
getCurrentIndex(currentPath, sidebarItems) {
for (let idx = 0; idx < sidebarItems.length; idx++) {
Expand All @@ -63,7 +73,7 @@ export default {
return idx
}
}
return -1
return 0
},
getChildren(item) {
return item.children || item.links || []
Expand Down
183 changes: 101 additions & 82 deletions src/components/SidebarItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,60 +2,66 @@
<div :class="['SidebarItem', item.title && 'hasTitle']">
<div
class="ItemTitle"
v-if="item.title"
:collapsable="item.collapsable"
:class="{collapsable: item.collapsable}"
:class="{collapsable: item.collapsable !== false}"
v-if="item.title && children"
@click="$emit('toggle')"
>
{{ item.title }}
<span
v-if="item.collapsable"
class="arrow"
:class="open ? 'down' : 'right'"
></span>
<span v-if="item.collapsable !== false" class="arrow" :class="{open}">
<svg
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.4 8.56L4.67 5M1.4 1.23L4.66 4.7"
stroke="currentColor"
stroke-linecap="square"
/>
</svg>
</span>
<span>{{ item.title }}</span>
</div>
<uni-link
class="ItemLink"
:class="{active: $route.path === item.link}"
v-if="item.title && item.link"
:to="item.link"
>{{ item.title }}</uni-link
>
<div class="ItemLinkToc" v-if="item.title && item.link">
<PageToc :link="item" />
</div>
<template v-if="!item.collapsable || open">
<template v-for="(link, index) of children">

<div
class="ItemChildren"
v-if="children && (open || item.collapsable === false)"
>
<div class="ItemChild" v-for="(link, index) of children" :key="index">
<uni-link
class="ItemLink"
:key="index"
class="ItemChildLink"
:class="{active: $route.path === link.link}"
:to="link.link"
:openInNewTab="link.openInNewTab"
:prefetchFiles="getPrefetchFiles(link.link)"
>{{ link.title }}</uni-link
>
<div
class="LinkToc"
v-if="
!$store.state.fetchingFile &&
link.toc !== false &&
link.link === $route.path &&
$store.state.page.headings &&
$store.state.page.headings.length > 0
"
:key="`toc-${index}`"
>
<router-link
class="TocHeading"
:to="{hash: heading.slug}"
:data-level="heading.level"
v-for="heading in $store.state.page.headings"
:key="heading.slug"
v-html="heading.text"
></router-link>
</div>
</template>
</template>
<PageToc :link="link" />
</div>
</div>
</div>
</template>

<script>
import {isExternalLink, getFileUrl, getFilenameByPath} from '../utils'
import UniLink from './UniLink.vue'
import PageToc from './PageToc.vue'
export default {
components: {
UniLink
UniLink,
PageToc
},
props: {
item: {
Expand All @@ -75,7 +81,7 @@ export default {
},
computed: {
children() {
return this.item.children || this.item.links || []
return this.item.children || this.item.links
}
},
methods: {
Expand Down Expand Up @@ -105,66 +111,81 @@ export default {
<style scoped>
.SidebarItem {
&:not(:last-child) {
margin-bottom: 1.2rem;
margin-bottom: 10px;
}
&.hasTitle {
& .ItemLink {
font-size: 0.9rem;
}
}
font-size: 0.875rem;
&.hasTitle >>> .TocHeading {
font-size: 0.9rem;
& a {
color: var(--sidebar-link-color);
&:hover {
color: var(--sidebar-link-active-color);
}
}
}
.ItemTitle {
font-size: 1rem;
padding: 0 20px;
margin-bottom: 10px;
position: relative;
color: var(--sidebar-section-title-color);
text-transform: uppercase;
color: var(--sidebar-link-color);
user-select: none;
font-size: 0;
&.collapsable {
&:hover {
cursor: pointer;
}
&.collapsable:hover {
cursor: pointer;
color: var(--sidebar-link-active-color);
}
& span {
font-size: 0.9rem;
}
}
.ItemLink {
padding: 2px 20px;
margin: 0 20px;
display: flex;
font-size: 1.1rem;
position: relative;
align-items: center;
&:before {
content: '';
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--sidebar-link-arrow-color);
margin-right: 8px;
}
&.active {
color: var(--sidebar-link-active-color);
font-weight: bold;
}
}
.TocHeading {
display: flex;
line-height: 1.4;
margin: 5px 0;
position: relative;
.ItemLinkToc {
margin: 0 8px;
}
&[data-level='2'] {
padding: 0 20px;
&:before {
content: '-';
margin-right: 5px;
color: #979797;
}
}
.ItemChildren {
border-left: 1px solid var(--border-color);
margin: 0 20px;
}
&[data-level='3'] {
padding: 0 20px 0 40px;
.ItemChild {
&:not(:last-child) {
margin-bottom: 10px;
}
}
.ItemChildLink {
padding-left: 16px;
display: flex;
position: relative;
line-height: 1;
&.router-link-exact-active {
&.active {
font-weight: bold;
}
}
Expand All @@ -175,20 +196,18 @@ a {
}
.arrow {
width: 16px;
display: inline-block;
position: relative;
top: -0.1em;
left: 0.5em;
&.right {
border-left: 6px solid #ccc;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
color: var(--sidebar-link-arrow-color);
& svg {
transition: all 0.15s ease;
}
&.down {
border-top: 6px solid #ccc;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
&.open {
& svg {
transform: rotate(90deg);
}
}
}
</style>
2 changes: 2 additions & 0 deletions src/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ body {
margin: 0;
color: var(--text-color);
background: var(--page-background);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

Expand Down
Loading

0 comments on commit cec2af2

Please sign in to comment.