therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

works but hacky

Browse source
This commit is contained in:
shpuld 2018-12-20 22:20:04 +02:00
commit 67263cde05
24 changed files with 260 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/side_drawer/side_drawer.vue
View file

@ -1,39 +1,46 @@
<template>
<div>
<div class="side-drawer-container" :class="{'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed}">
<div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}">
<ul>
<li v-if='currentUser'>
<router-link @click.native="activatePanel('timeline')" to='/main/friends'>
<a href="#" @click="gotoPanel('poststatus')">poststatus</a>
</li>
<li v-if='currentUser'>
<a href="#" @click="gotoPanel('notifications')">notifications</a>
</li>
<li v-if='currentUser'>
<router-link @click.native="gotoPanel('timeline')" to='/main/friends'>
{{ $t("nav.timeline") }}
</router-link>
</li>
<li v-if='currentUser'>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
<router-link @click.native="gotoPanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
{{ $t("nav.mentions") }}
</router-link>
</li>
<li v-if='currentUser'>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
<router-link @click.native="gotoPanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
{{ $t("nav.dms") }}
</router-link>
</li>
<li v-if='currentUser && currentUser.locked'>
<router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
<router-link @click.native="gotoPanel('timeline')" to='/friend-requests'>
{{ $t("nav.friend_requests") }}
</router-link>
</li>
<li>
<router-link @click.native="activatePanel('timeline')" to='/main/public'>
<router-link @click.native="gotoPanel('timeline')" to='/main/public'>
{{ $t("nav.public_tl") }}
</router-link>
</li>
<li>
<router-link @click.native="activatePanel('timeline')" to='/main/all'>
<router-link @click.native="gotoPanel('timeline')" to='/main/all'>
{{ $t("nav.twkn") }}
</router-link>
</li>
</ul>
</div>
<div class="side-drawer-click-outside" @click.stop.prevent="clickedOutside" :class="{'side-drawer-click-outside-closed': closed}"></div>
</div>
</template>
@ -42,21 +49,48 @@
<style lang="scss">
@import '../../_variables.scss';
.side-drawer-container {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: stretch;
}
.side-drawer-container-open {
transition-delay: 0.0s;
transition-property: left;
}
.side-drawer-container-closed {
left: -100%;
transition-delay: 0.5s;
transition-property: left;
}
.side-drawer-click-outside {
flex: 1 1 100%;
}
.side-drawer {
height: 100%; /* 100% Full-height */
position: fixed; /* Stay in place */
z-index: 1000; /* Stay on top */
top: 0; /* Stay at the top */
left: -200px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
margin: 0;
padding-left: 200px;
margin: 0 0 0 -100px;
padding: 0 0 0 100px;
width: 75%;
flex: 0 0 75%;
}
.side-drawer-click-outside-closed {
flex: 0 0 0;
}
.side-drawer-closed {
left: calc(-100% - 200px);
margin: 0 0 0 calc(-100% - 100px);
}
.side-drawer .panel {