Skip to content

Docs layout to template #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mittalyashu wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Docs layout to template #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f64ee48
Create sidebar component
mittalyashu Jul 7, 2019
18e360a
Move docs layout to template
mittalyashu Jul 7, 2019
fd3ee0d
Use v-html attribute to attach content
mittalyashu Jul 7, 2019
e2dc151
Pass sidebar type props
mittalyashu Jul 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions src/components/Sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<template>
<div>
<div v-if="!sidebar" class="sidebar">
<template v-for="section in menu" class="sidebar__menu">
<h6 :key="`section-${section.section}`" class="sidebar__menu-heading">
{{ section.section }}
</h6>
<template v-for="item in section.topics">
<g-link
:to="`/${type}/${item.slug}`"
:key="`${section.section}-item-${item.slug}`"
class="sidebar__menu-item"
@click.native="toggleSidebar()"
>
{{ item.title }}
</g-link>
</template>
</template>
</div>
<div @click="toggleSidebar()" class="sidebar__toggle">
<left-arrow v-if="sidebar" />
<right-arrow v-else />
</div>
</div>
</template>

<script>
import LeftArrow from "../assets/images/chevrons-left.svg";
import RightArrow from "../assets/images/chevrons-right.svg";

export default {
name: "SidebarMenu",
data() {
return {
toggle: false
}
},
props: {
type: String,
menu: Array
},
components: {
LeftArrow,
RightArrow
},
computed: {
sidebar() {
return this.toggle && window.innerWidth <= 768;
}
},
methods: {
toggleSidebar() {
this.toggle = !this.toggle;
}
}
};
</script>

<style lang='sass'>
.sidebar
position: sticky
border-right: 1px solid rgba(#474C55, .3)
max-width: 300px
overflow-y: scroll
top: 69px
padding:
top: 1rem
left: 2rem
right: 2rem
bottom: 2rem
height: calc(100vh - 69px)
z-index: 5
background-color: white

&__menu
&-heading
color: rgba(#474C55, .5)
font-weight: 600
margin-top: 2rem
margin-bottom: .5rem
border-top: 1px solid rgba(#474C55, .2)
padding-top: 2rem
text-transform: uppercase

&:first-child
border: none
margin-top: 0

&-item
display: flex
flex-direction: column
padding: 3px 10px
margin-bottom: 5px
color: rgba(#474C55, .8)
font-weight: 500
cursor: pointer

&:hover
color: #00ADB5

&-item.active--exact
background-color: rgba(#00ADB5, .1)
color: #00ADB5
border-radius: 1rem

&__toggle
position: fixed
background-color: #00ADB5
bottom: 4.225rem
cursor: pointer
right: 1.5rem
display: flex
border-radius: 50px
padding: .6rem

svg
stroke: white
width: 25px
height: 25px

@media (max-width: 768px)
.sidebar
position: fixed
padding:
left: 1rem
right: 1rem

@media (min-width: 768px)
.sidebar__toggle
display: none
</style>
182 changes: 0 additions & 182 deletions src/layouts/Docs.vue
View file
Open in desktop

This file was deleted.

9 changes: 4 additions & 5 deletions src/layouts/Post.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<template>
<div class="post">
<div class="post__meta">
<h1 class="post__heading">{{ title }}</h1>
<div class="post__description">{{ description }}</div>
<h1 v-html="title" class="post__heading" />
<div v-html="description" class="post__description" />
<hr v-if="titleBorder" class="post__titleBorder" />
</div>
<div class="post__content">
<slot />
</div>
<div v-html="content" class="post__content" />
<a :href="editLink" v-if="editOnGH" target="_blank" class="edit-link">
<GitHubIcon />
<span>Edit this page on GitHub</span>
Expand Down Expand Up @@ -38,6 +36,7 @@ export default {
title: String,
description: String,
titleBorder: Boolean,
content: String,
editOnGH: {
type: Boolean,
default: true
Expand Down
Loading