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

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

@ -1,54 +1,56 @@
<template>
<div
v-click-outside="close"
class="profile-sidebar"
v-if="sidebar.profile">
<a
class="profile-sidebar__close-link"
@click="close">
<cross class="profile-sidebar__close-icon"/>
</a>
<div class="profile-sidebar__section">
<profile-widget class="profile-sidebar__item"/>
<div
class="profile-sidebar__item"
<transition name="slide">
<div
v-click-outside="close"
class="profile-sidebar"
v-if="sidebar.profile">
<a
class="profile-sidebar__close-link"
@click="close">
<router-link
to="/me/activity"
class="profile-sidebar__link">Meine Aktivitäten
</router-link>
</div>
</div>
<div class="profile-sidebar__section">
<div class="profile-sidebar__item">
<class-selection-widget/>
<div @click="close">
<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">
<router-link
:to="{name: 'my-class'}"
class="profile-sidebar__link">Klassenliste
to="/me/activity"
class="profile-sidebar__link">Meine Aktivitäten
</router-link>
</div>
</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 class="profile-sidebar__section">
<div class="profile-sidebar__item">
<class-selection-widget/>
<div @click="close">
<router-link
:to="{name: 'my-class'}"
class="profile-sidebar__link">Klassenliste
</router-link>
</div>
</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">
Supportanfragen: rahel.wenger@hep-verlag.ch
</p>
<p class="profile-sidebar__support">
Supportanfragen: rahel.wenger@hep-verlag.ch
</p>
</div>
</div>
</div>
</transition>
</template>
<script>
@ -83,6 +85,8 @@
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
$desktop-width: 333px;
.profile-sidebar {
padding: $large-spacing 0;
box-sizing: border-box;
@ -98,7 +102,7 @@
width: 100%;
@include desktop {
width: 333px;
width: $desktop-width;
}
display: flex;
@ -141,4 +145,17 @@
color: $color-silver-dark;
}
}
.slide {
&-enter-active, &-leave-active {
transition: right 0.2s;
}
&-enter, &-leave-to {
right: -100vw;
@include desktop {
right: -$desktop-width;
}
}
}
</style>