akkoma-fe/src/components/side_drawer/side_drawer.vue

366 lines
9 KiB
Vue
Raw Normal View History

<template>
2019-07-05 07:17:44 +00:00
<div
class="side-drawer-container"
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
>
2019-07-05 07:17:44 +00:00
<div
class="side-drawer-darken"
:class="{ 'side-drawer-darken-closed': closed}"
/>
<div
class="side-drawer"
2018-12-23 18:14:40 +00:00
:class="{'side-drawer-closed': closed}"
@touchstart="touchStart"
@touchmove="touchMove"
2018-12-23 18:14:40 +00:00
>
2019-07-05 07:17:44 +00:00
<div
class="side-drawer-heading"
@click="toggleDrawer"
>
<UserCard
v-if="currentUser"
2020-04-23 11:27:27 +00:00
:user-id="currentUser.id"
2019-07-05 07:17:44 +00:00
:hide-bio="true"
/>
<div
v-else
class="side-drawer-logo-wrapper"
>
<img :src="logo">
<span v-if="!hideSitename">{{ sitename }}</span>
</div>
</div>
<ul>
2019-07-05 07:17:44 +00:00
<li
v-if="!currentUser"
@click="toggleDrawer"
>
<router-link :to="{ name: 'login' }">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="sign-in-alt"
/> {{ $t("login.login") }}
</router-link>
2018-12-20 20:20:04 +00:00
</li>
2019-07-05 07:17:44 +00:00
<li
v-if="currentUser || !privateMode"
2019-07-05 07:17:44 +00:00
@click="toggleDrawer"
>
<router-link :to="{ name: timelinesRoute }">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="home"
/> {{ $t("nav.timelines") }}
</router-link>
</li>
2022-06-14 20:53:51 +00:00
<li
v-if="currentUser"
@click="toggleDrawer"
>
<router-link :to="{ name: 'lists' }">
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="list"
/> {{ $t("nav.lists") }}
</router-link>
</li>
</ul>
<ul v-if="currentUser">
<li @click="toggleDrawer">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bolt"
2020-10-20 21:31:16 +00:00
/> {{ $t("nav.interactions") }}
</router-link>
</li>
2019-07-05 07:17:44 +00:00
<li
v-if="currentUser.locked"
2019-07-05 07:17:44 +00:00
@click="toggleDrawer"
>
<router-link to="/friend-requests">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="user-plus"
/> {{ $t("nav.friend_requests") }}
2019-07-05 07:17:44 +00:00
<span
v-if="followRequestCount > 0"
class="badge badge-notification"
2019-07-05 07:17:44 +00:00
>
{{ followRequestCount }}
</span>
</router-link>
</li>
</ul>
<ul>
2019-12-12 19:46:07 +00:00
<li
v-if="currentUser || !privateMode"
@click="toggleDrawer"
>
2019-07-15 16:42:27 +00:00
<router-link :to="{ name: 'search' }">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="search"
/> {{ $t("nav.search") }}
</router-link>
</li>
2019-07-05 07:17:44 +00:00
<li
v-if="currentUser && suggestionsEnabled"
@click="toggleDrawer"
>
2019-01-16 02:33:08 +00:00
<router-link :to="{ name: 'who-to-follow' }">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="user-plus"
/> {{ $t("nav.who_to_follow") }}
2019-01-16 02:33:08 +00:00
</router-link>
</li>
<li @click="toggleDrawer">
<button
2020-11-24 12:52:01 +00:00
class="button-unstyled -link -fullwidth"
2020-05-25 14:05:30 +00:00
@click="openSettingsModal"
>
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="cog"
/> {{ $t("settings.settings") }}
</button>
2018-12-22 15:32:07 +00:00
</li>
<li @click="toggleDrawer">
<router-link :to="{ name: 'about'}">
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="info-circle"
/> {{ $t("nav.about") }}
</router-link>
</li>
<li
v-if="currentUser && currentUser.role === 'admin' || currentUser.role === 'moderator'"
@click="toggleDrawer"
>
<button
class="button-unstyled -link -fullwidth"
@click="openModModal"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="user-tie"
/> {{ $t("nav.moderation") }}
</button>
</li>
2019-09-14 17:53:03 +00:00
<li
v-if="currentUser && currentUser.role === 'admin'"
@click="toggleDrawer"
>
2019-09-16 12:03:10 +00:00
<a
2019-10-02 17:28:16 +00:00
href="/pleroma/admin/#/login-pleroma"
2019-09-16 12:03:10 +00:00
target="_blank"
>
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="tachometer-alt"
/> {{ $t("nav.administration") }}
2019-09-14 17:53:03 +00:00
</a>
</li>
<li
v-if="currentUser"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'announcements' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bullhorn"
/> {{ $t("nav.announcements") }}
<span
v-if="unreadAnnouncementCount"
class="badge badge-notification"
>
{{ unreadAnnouncementCount }}
</span>
</router-link>
</li>
2019-07-05 07:17:44 +00:00
<li
v-if="currentUser"
@click="toggleDrawer"
>
<button
2020-11-24 12:52:01 +00:00
class="button-unstyled -link -fullwidth"
2019-07-05 07:17:44 +00:00
@click="doLogout"
>
2020-10-20 21:31:16 +00:00
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
2020-10-20 21:31:16 +00:00
icon="sign-out-alt"
/> {{ $t("login.logout") }}
</button>
2018-12-22 15:32:07 +00:00
</li>
</ul>
</div>
2019-07-05 07:17:44 +00:00
<div
class="side-drawer-click-outside"
:class="{'side-drawer-click-outside-closed': closed}"
2019-07-05 07:17:44 +00:00
@click.stop.prevent="toggleDrawer"
/>
</div>
</template>
<script src="./side_drawer.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
2018-12-20 20:20:04 +00:00
.side-drawer-container {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: stretch;
transition-duration: 0s;
transition-property: transform;
2018-12-20 20:20:04 +00:00
}
.side-drawer-container-open {
transform: translate(0%);
}
.side-drawer-container-closed {
transition-delay: 0.35s;
transform: translate(-100%);
}
.side-drawer-darken {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
transition: 0.35s;
transition-property: background-color;
background-color: rgba(0, 0, 0, 0.5);
2018-12-20 20:20:04 +00:00
}
.side-drawer-darken-closed {
background-color: rgba(0, 0, 0, 0);
2018-12-20 20:20:04 +00:00
}
.side-drawer-click-outside {
flex: 1 1 100%;
}
.side-drawer {
overflow-x: hidden;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition: 0.35s;
transition-property: transform;
2018-12-20 20:20:04 +00:00
margin: 0 0 0 -100px;
padding: 0 0 1em 100px;
width: 80%;
max-width: 20em;
flex: 0 0 80%;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow);
background-color: $fallback--bg;
2020-01-23 22:02:16 +00:00
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
2020-01-23 22:36:32 +00:00
--lightText: var(--popoverLightText, $fallback--lightText);
2020-01-23 22:02:16 +00:00
--icon: var(--popoverIcon, $fallback--icon);
2020-11-03 16:45:23 +00:00
.badge {
margin-left: 10px;
2020-11-03 16:45:23 +00:00
}
2019-02-04 18:34:07 +00:00
}
2019-02-04 18:34:07 +00:00
.side-drawer-logo-wrapper {
display: flex;
align-items: center;
padding: 0.85em;
2019-02-04 18:34:07 +00:00
img {
flex: none;
height: 50px;
margin-right: 0.85em;
}
2019-02-04 18:34:07 +00:00
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2018-12-20 20:20:04 +00:00
}
.side-drawer-click-outside-closed {
flex: 0 0 0;
}
.side-drawer-closed {
transform: translate(-100%);
}
.side-drawer-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
display: flex;
padding: 0;
margin: 0;
}
.side-drawer ul {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
.side-drawer ul:last-child {
border: 0;
}
.side-drawer li {
padding: 0;
a, button {
2020-10-28 19:41:42 +00:00
box-sizing: border-box;
display: block;
2020-10-28 19:41:42 +00:00
height: 3em;
2020-10-28 19:47:42 +00:00
line-height: 3em;
padding: 0 0.7em;
&:hover {
background-color: $fallback--lightBg;
2020-01-23 22:36:32 +00:00
background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--text;
2020-01-23 22:36:32 +00:00
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
}
</style>