Skip to content

Commit

Permalink
feat: add responsive sidebar support (#75)
Browse files Browse the repository at this point in the history
  • Loading branch information
Spice-Z authored Sep 3, 2020
1 parent 79bc9fb commit 39dbd78
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 3 deletions.
19 changes: 17 additions & 2 deletions src/client/theme-default/Layout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
<div class="theme">
<header>
<NavBar />
<ToggleSideBarButton @toggle="toggleSidebar" />
</header>
<aside>
<SideBar />
<aside :class="{ open }">
<SideBar/>
</aside>
<main>
<Page />
Expand All @@ -14,15 +15,29 @@
</template>

<script>
import { ref } from 'vue'
import NavBar from './components/NavBar.vue'
import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
import SideBar from './components/SideBar.vue'
import Page from './components/Page.vue'
export default {
components: {
NavBar,
ToggleSideBarButton,
SideBar,
Page
},
setup() {
let open = ref(false)
const toggleSidebar = () => {
open.value = !open.value
}
return {
open,
toggleSidebar
}
}
}
</script>
47 changes: 47 additions & 0 deletions src/client/theme-default/components/ToggleSideBarButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<div class="sidebar-button" @click="$emit('toggle')">
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
role="img"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
class
/>
</svg>
</div>
</template>

<script>
export default {
emits: ['toggle']
}
</script>

<style>
.sidebar-button {
cursor: pointer;
display: none;
width: 1.25rem;
height: 1.25rem;
position: absolute;
top: 1.25rem;
left: 1rem;
}
.sidebar-button .icon {
display: block;
width: 1.25rem;
height: 1.25rem;
}
@media screen and (max-width: 719px) {
.sidebar-button {
display: block;
}
}
</style>
21 changes: 20 additions & 1 deletion src/client/theme-default/styles/layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ header {
justify-content: space-between;
padding: 0 1.75rem 0 1.5rem;
}
@media screen and (max-width: 719px) {
header {
padding: 0 1.75rem 0 4rem;
}
}

aside {
position: fixed;
Expand All @@ -41,11 +46,25 @@ aside {
z-index: 3;
overflow-y: auto;
}
@media screen and (max-width: 719px) {
aside {
transition: transform .2s ease;
transform: translateX(-100%);
}
aside.open {
transform: translateX(0);
}
}

main {
margin-top: var(--header-height);
margin-left: var(--sidebar-width);
}
@media screen and (max-width: 719px) {
main {
margin-left: 0;
}
}

a {
text-decoration: none;
Expand All @@ -69,7 +88,7 @@ h1 {

h2 {
font-size: 1.65rem;
padding-bottom: .3rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--border-color);
}

Expand Down
5 changes: 5 additions & 0 deletions src/client/theme-default/styles/vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,9 @@
--text-color-light: #476582;
--code-bg-color: #282c34;
--accent-color: #3eaf7c;

/* responsive breakpoints */
/* --mq-narrow: 959px; */
/* --mq-mobile: 719px; */
/* --mq-mobile-narrow: 419px; */
}

0 comments on commit 39dbd78

Please sign in to comment.