mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 22:36:14 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add mobile menu icon

Browse Source
This commit is contained in:
Philipp Kühn 2020-04-23 12:22:59 +02:00
parent 2804c92957
commit 378fc654b0
5 changed files with 60 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/src/assets/icons/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3 12.179C14.2767 12.1558 14.2583 12.1282 14.2456 12.0978C14.233 12.0674 14.2266 12.0349 14.2266 12.002C14.2266 11.9691 14.233 11.9366 14.2456 11.9062C14.2583 11.8758 14.2767 11.8482 14.3 11.825L19.563 6.563C19.8443 6.28134 20.0021 5.89948 20.0018 5.50144C20.0016 5.10339 19.8432 4.72176 19.5615 4.4405C19.2798 4.15924 18.898 4.00138 18.4999 4.00166C18.1019 4.00194 17.7203 4.16034 17.439 4.442L12.177 9.7C12.1538 9.72328 12.1262 9.74175 12.0958 9.75435C12.0654 9.76696 12.0329 9.77345 12 9.77345C11.9671 9.77345 11.9346 9.76696 11.9042 9.75435C11.8738 9.74175 11.8462 9.72328 11.823 9.7L6.561 4.442C6.42174 4.30267 6.25639 4.19213 6.07441 4.1167C5.89242 4.04127 5.69736 4.00242 5.50036 4.00237C5.1025 4.00228 4.7209 4.16024 4.4395 4.4415C4.15811 4.72276 3.99997 5.10429 3.99988 5.50214C3.99978 5.9 4.15774 6.2816 4.439 6.563L9.7 11.825C9.72329 11.8482 9.74176 11.8758 9.75436 11.9062C9.76696 11.9366 9.77345 11.9691 9.77345 12.002C9.77345 12.0349 9.76696 12.0674 9.75436 12.0978C9.74176 12.1282 9.72329 12.1558 9.7 12.179L4.43901 17.442C4.29974 17.5813 4.18928 17.7467 4.11393 17.9288C4.03859 18.1108 3.99983 18.3059 3.99988 18.5029C3.99997 18.9007 4.15811 19.2822 4.43951 19.5635C4.57884 19.7028 4.74424 19.8132 4.92626 19.8886C5.10828 19.9639 5.30336 20.0027 5.50036 20.0026C5.89822 20.0025 6.27974 19.8444 6.56101 19.563L11.823 14.3C11.8462 14.2767 11.8738 14.2582 11.9042 14.2456C11.9346 14.233 11.9671 14.2266 12 14.2266C12.0329 14.2266 12.0654 14.233 12.0958 14.2456C12.1262 14.2582 12.1538 14.2767 12.177 14.3L17.439 19.563C17.7203 19.8444 18.1018 20.0025 18.4997 20.0026C18.8975 20.0027 19.2791 19.8448 19.5605 19.5635C19.8419 19.2822 20 18.9007 20.0001 18.5029C20.0002 18.105 19.8423 17.7234 19.561 17.442L14.3 12.179Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

5
docs/src/assets/icons/menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z" fill="black"/>
<path d="M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z" fill="black"/>
<path d="M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 686 B

4
docs/src/components/Icon/style.scss
View File

@ -1,7 +1,7 @@
.icon {
display: inline-flex;
width: 1.3rem;
height: 1.3rem;
width: 1.2rem;
height: 1.2rem;
&::v-deep > svg {
width: 100%;

31
docs/src/layouts/App/index.vue
View File

@ -5,15 +5,31 @@
<g-link class="app__logo" to="/">
{{ $static.metadata.siteName }}
</g-link>
<github-button
href="https://github.com/scrumpy/tiptap"
data-show-count="true"
aria-label="Star scrumpy/tiptap on GitHub"
/>
<div>
<github-button
href="https://github.com/scrumpy/tiptap"
data-show-count="true"
aria-label="Star scrumpy/tiptap on GitHub"
/>
<button
class="app__menu-icon"
@click="menuIsVisible = true"
v-if="!menuIsVisible"
>
<icon name="menu" />
</button>
<button
class="app__close-icon"
@click="menuIsVisible = false"
v-if="menuIsVisible"
>
<icon name="close" />
</button>
</div>
</div>
</header>
<div class="app__content">
<div class="app__sidebar-wrapper">
<div class="app__sidebar-wrapper" :class="{ 'is-mobile-visible': menuIsVisible }">
<nav class="app__sidebar">
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
<div class="app__link-group-title">
@ -47,11 +63,13 @@ query {
<script>
import linkGroups from '@/data/links.yaml'
import Icon from '@/components/Icon'
import PageNavigation from '@/components/PageNavigation'
import GithubButton from 'vue-github-button'
export default {
components: {
Icon,
PageNavigation,
GithubButton,
},
@ -59,6 +77,7 @@ export default {
data() {
return {
linkGroups,
menuIsVisible: false,
}
},
}

28
docs/src/layouts/App/style.scss
View File

@ -1,4 +1,5 @@
$navHeight: 4.5rem;
$menuBreakPoint: 750px;
.app {
display: flex;
@ -67,7 +68,7 @@ $navHeight: 4.5rem;
margin: 0 auto;
padding: 0 1rem;
@media (min-width: 750px) {
@media (min-width: $menuBreakPoint) {
padding: 0 2rem;
}
}
@ -83,12 +84,24 @@ $navHeight: 4.5rem;
padding-left: 1rem;
padding-right: 1rem;
@media (min-width: 750px) {
@media (min-width: $menuBreakPoint) {
padding-left: 2rem;
padding-right: 2rem;
}
}
&__menu-icon,
&__close-icon {
border: none;
padding: 0;
background-color: transparent;
margin-left: 1rem;
@media (min-width: $menuBreakPoint) {
display: none;
}
}
&__sidebar-wrapper {
position: fixed;
z-index: 2;
@ -99,8 +112,17 @@ $navHeight: 4.5rem;
background-color: $colorBackground;
padding-left: 1rem;
padding-right: 1rem;
visibility: hidden;
opacity: 0;
&.is-mobile-visible {
visibility: visible;
opacity: 1;
}
@media (min-width: 750px) {
@media (min-width: $menuBreakPoint) {
visibility: visible;
opacity: 1;
position: sticky;
flex: 0 0 auto;
align-self: flex-start;