diff --git a/src/assets/images/icon-arrow.svg b/src/assets/images/icon-arrow.svg
new file mode 100644
index 000000000..c81a1c528
--- /dev/null
+++ b/src/assets/images/icon-arrow.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="icon-arrow" width="11px" height="20px" viewBox="0 0 11 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+ <title>arrow_back_ios</title>
+ <desc>Created with Sketch.</desc>
+ <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Rounded" transform="translate(-548.000000, -3434.000000)">
+ <g id="Navigation" transform="translate(100.000000, 3378.000000)">
+ <g id="-Round-/-Navigation-/-arrow_back_ios" transform="translate(442.000000, 54.000000)">
+ <g>
+ <polygon id="Path" opacity="0.87" points="0 0 24 0 24 24 0 24"></polygon>
+ <path d="M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z" id="🔹-Icon-Color" fill="#1D1D1D"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/src/assets/style/sidebar.scss b/src/assets/style/sidebar.scss
index a0e735d69..e7cb9c049 100644
--- a/src/assets/style/sidebar.scss
+++ b/src/assets/style/sidebar.scss
@@ -43,12 +43,13 @@
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 1px;
- margin: 15px 0 15px;
- padding-top: 20px;
+ margin-bottom: 0;
+ padding: 10px 0px;
border-top: 1px solid var(--border-color);
- &:first-of-type {
- border:0;
- }
+ }
+
+ .menu-section:first-of-type h3 {
+ border: 0;
}
p {
@@ -60,13 +61,12 @@
color: currentColor;
opacity: 1;
font-weight: 400;
- display: flex;
text-decoration: none;
&.active--exact {
color: var(--primary-color-dark);
}
-
+
&:hover {
color: var(--primary-color);
}
@@ -127,7 +127,7 @@
margin:0;
order: 2;
padding-bottom: 150px;
-
+
} + .section {
margin-left: 0;
width: 100%;
diff --git a/src/layouts/Docs.vue b/src/layouts/Docs.vue
index 6e7eff37c..5c9af023e 100644
--- a/src/layouts/Docs.vue
+++ b/src/layouts/Docs.vue
@@ -2,14 +2,7 @@
<Layout class="has-sidebar docs-page" :footer="false">
<div class="container flex flex-align-top">
<div class="sidebar">
- <template v-if="links" v-for="(group, i1) in links">
- <h3 class="menu-item" :key="`title-${i1}`">{{ group.title }}</h3>
- <template v-for="(item, i2) in group.items">
- <g-link :exact="item.link == '/docs/'" class="menu-item menu-link" :to="item.link" :key="`link-${i1}-${i2}`">
- {{ item.title }}
- </g-link>
- </template>
- </template>
+ <DocsMenu v-if="links" v-for="(group, i1) in links" :group="group" :index="i1" :key="i1" />
</div>
<Section class="doc-content flex-fit" container="base">
<slot></slot>
@@ -21,24 +14,36 @@
</p>
<nav class="docs-nav">
<div class="docs-nav__previous">
- <g-link v-if="previousPage" exact class="button button--small docs-nav__link" :to="previousPage.link">
- ← {{ previousPage.title }}
- </g-link>
+ <g-link
+ v-if="previousPage"
+ exact
+ class="button button--small docs-nav__link"
+ :to="previousPage.link"
+ >← {{ previousPage.title }}</g-link>
</div>
<div class="docs-nav__next">
- <g-link v-if="nextPage" exact class="button button--small docs-nav__link" :to="nextPage.link">
- {{ nextPage.title }} →
- </g-link>
+ <g-link
+ v-if="nextPage"
+ exact
+ class="button button--small docs-nav__link"
+ :to="nextPage.link"
+ >{{ nextPage.title }} →</g-link>
</div>
</nav>
</Section>
- <div v-if="subtitles.length > 0 && subtitles[0].depth !== 3" class="sidebar sidebar--right hide-for-small">
+ <div
+ v-if="subtitles.length > 0 && subtitles[0].depth !== 3"
+ class="sidebar sidebar--right hide-for-small"
+ >
<h3>On this page</h3>
<ul v-if="subtitles.length" class="menu-item submenu">
- <li class="submenu__item" :class="'submenu__item-depth-' + subtitle.depth" v-for="subtitle in subtitles" :key="subtitle.value">
- <a class="submenu__link" :href="subtitle.anchor">
- {{ subtitle.value }}
- </a>
+ <li
+ class="submenu__item"
+ :class="'submenu__item-depth-' + subtitle.depth"
+ v-for="subtitle in subtitles"
+ :key="subtitle.value"
+ >
+ <a class="submenu__link" :href="subtitle.anchor">{{ subtitle.value }}</a>
</li>
</ul>
</div>
@@ -48,10 +53,12 @@
<script>
import Github from '~/assets/images/github-logo.svg'
+import DocsMenu from './DocsMenu';
export default {
components: {
- Github
+ Github,
+ DocsMenu
},
props: {
subtitles: { type: Array, default: () => [] },
diff --git a/src/layouts/DocsMenu.vue b/src/layouts/DocsMenu.vue
new file mode 100644
index 000000000..325cd7b31
--- /dev/null
+++ b/src/layouts/DocsMenu.vue
@@ -0,0 +1,101 @@
+<template>
+ <div class="menu-section">
+ <a href="#" class="menu-title" @click="toggleMenu">
+ <h3 class="menu-item">
+ {{ group.title }}
+ <MenuArrow :class="{open: openMenu}" />
+ </h3>
+ </a>
+ <div :class="{'menu-list-collapse': !openMenu}">
+ <template v-for="(item, i2) in group.items">
+ <g-link
+ :exact="item.link == '/docs/'"
+ class="menu-item menu-link"
+ :to="item.link"
+ :key="`link-${index}-${i2}`"
+ >{{ item.title }}</g-link>
+ </template>
+ </div>
+ </div>
+</template>
+
+<script>
+import MenuArrow from '~/assets/images/icon-arrow.svg'
+
+export default {
+ components: {
+ MenuArrow
+ },
+ props: {
+ group: {
+ type: Object,
+ default: () => {}
+ },
+ index: {
+ type: Number
+ }
+ },
+ data() {
+ return {
+ openMenu: true
+ }
+ },
+ methods: {
+ toggleMenu() {
+ this.openMenu = !this.openMenu;
+ let closedMenus = localStorage.getItem('closedMenus');
+
+ if (!this.openMenu) {
+ if(!closedMenus) {
+ let menus = [this.index];
+ localStorage.setItem('closedMenus', JSON.stringify(menus));
+ }
+ else{
+ let newMenus = JSON.parse(closedMenus);
+ newMenus.push(this.index);
+ localStorage.setItem('closedMenus', JSON.stringify(newMenus));
+ }
+ }
+ else if (this.openMenu && closedMenus) {
+ let newMenus = JSON.parse(closedMenus);
+ localStorage.setItem('closedMenus', JSON.stringify(newMenus.filter(index => index !== this.index)));
+ }
+ }
+ },
+ mounted() {
+ let closedMenus = localStorage.getItem('closedMenus');
+ let newMenus = JSON.parse(closedMenus);
+ this.openMenu = newMenus?.includes(this.index) ? false : true;
+ }
+}
+</script>
+
+<style lang="scss">
+.menu-title {
+ display: block;
+}
+
+h3.menu-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .icon-arrow_svg__icon-arrow {
+ margin-right: 10px;
+ transition: transform 0.5s linear;
+ transform: rotate(-180deg);
+
+ &.open {
+ transform: rotate(-90deg);
+ }
+ }
+}
+
+.menu-list-collapse {
+ display: none;
+}
+</style>