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

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

@ -1,18 +1,20 @@
<template> <template>
<div <transition name="slide">
v-click-outside="close"
class="navigation-sidebar"
v-if="sidebar.navigation"
>
<content-navigation
:is-sidebar="true"
class="navigation-sidebar__main"/>
<div <div
class="navigation-sidebar__close-button" v-click-outside="close"
@click="close"> class="navigation-sidebar"
<cross class="navigation-sidebar__close-icon"/> v-if="sidebar.navigation"
>
<content-navigation
:is-sidebar="true"
class="navigation-sidebar__main"/>
<div
class="navigation-sidebar__close-button"
@click="close">
<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>

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

@ -1,54 +1,56 @@
<template> <template>
<div <transition name="slide">
v-click-outside="close" <div
class="profile-sidebar" v-click-outside="close"
v-if="sidebar.profile"> class="profile-sidebar"
<a v-if="sidebar.profile">
class="profile-sidebar__close-link" <a
@click="close"> class="profile-sidebar__close-link"
<cross class="profile-sidebar__close-icon"/>
</a>
<div class="profile-sidebar__section">
<profile-widget class="profile-sidebar__item"/>
<div
class="profile-sidebar__item"
@click="close"> @click="close">
<router-link <cross class="profile-sidebar__close-icon"/>
to="/me/activity" </a>
class="profile-sidebar__link">Meine Aktivitäten <div class="profile-sidebar__section">
</router-link> <profile-widget class="profile-sidebar__item"/>
</div> <div
</div> class="profile-sidebar__item"
<div class="profile-sidebar__section"> @click="close">
<div class="profile-sidebar__item">
<class-selection-widget/>
<div @click="close">
<router-link <router-link
:to="{name: 'my-class'}" to="/me/activity"
class="profile-sidebar__link">Klassenliste class="profile-sidebar__link">Meine Aktivitäten
</router-link> </router-link>
</div> </div>
</div> </div>
</div> <div class="profile-sidebar__section">
<div class="profile-sidebar__section"> <div class="profile-sidebar__item">
<div <class-selection-widget/>
class="profile-sidebar__item" <div @click="close">
@click="close"> <router-link
<router-link :to="{name: 'my-class'}"
:to="{name:'join-class'}" class="profile-sidebar__link">Klassenliste
data-cy="join-class-link" </router-link>
class="profile-sidebar__link">Zugangscode </div>
</router-link> </div>
</div>
<div class="profile-sidebar__item">
<logout-widget/>
</div> </div>
<div class="profile-sidebar__section">
<div
class="profile-sidebar__item"
@click="close">
<router-link
:to="{name:'join-class'}"
data-cy="join-class-link"
class="profile-sidebar__link">Zugangscode
</router-link>
</div>
<div class="profile-sidebar__item">
<logout-widget/>
</div>
<p class="profile-sidebar__support"> <p class="profile-sidebar__support">
Supportanfragen: rahel.wenger@hep-verlag.ch Supportanfragen: rahel.wenger@hep-verlag.ch
</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>