ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add sidebar transitions

This commit is contained in:
Ramon Wenger 2020-06-18 17:25:08 +02:00
parent 5d4d660938
commit c0f6ab543b
2 changed files with 90 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/book-navigation/NavigationSidebar.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<transition name="slide">
<div <div
v-click-outside="close" v-click-outside="close"
class="navigation-sidebar" class="navigation-sidebar"
@ -13,6 +14,7 @@
<cross class="navigation-sidebar__close-icon"/> <cross class="navigation-sidebar__close-icon"/>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script> <script>
@ -53,6 +55,8 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
$desktop-width: 285px;
.navigation-sidebar { .navigation-sidebar {
position: fixed; position: fixed;
left: 0; left: 0;
@ -81,7 +85,7 @@
overflow-y: auto; overflow-y: auto;
@include desktop { @include desktop {
width: 285px; width: $desktop-width;
} }
&__main { &__main {
@ -100,4 +104,17 @@
cursor: pointer; cursor: pointer;
} }
} }
.slide {
&-enter-active, &-leave-active {
transition: left 0.2s;
}
&-enter, &-leave-to {
left: -100vw;
@include desktop {
left: -$desktop-width;
}
}
}
</style> </style>

19
client/src/components/profile/ProfileSidebar.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<transition name="slide">
<div <div
v-click-outside="close" v-click-outside="close"
class="profile-sidebar" class="profile-sidebar"
@ -49,6 +50,7 @@
</p> </p>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script> <script>
@ -83,6 +85,8 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
$desktop-width: 333px;
.profile-sidebar { .profile-sidebar {
padding: $large-spacing 0; padding: $large-spacing 0;
box-sizing: border-box; box-sizing: border-box;
@ -98,7 +102,7 @@
width: 100%; width: 100%;
@include desktop { @include desktop {
width: 333px; width: $desktop-width;
} }
display: flex; display: flex;
@ -141,4 +145,17 @@
color: $color-silver-dark; color: $color-silver-dark;
} }
} }
.slide {
&-enter-active, &-leave-active {
transition: right 0.2s;
}
&-enter, &-leave-to {
right: -100vw;
@include desktop {
right: -$desktop-width;
}
}
}
</style> </style>