140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<template>
|
|
<nav :class="{ active }">
|
|
<template v-if="isLogged">
|
|
<router-link
|
|
class="action"
|
|
to="/files/"
|
|
:aria-label="$t('sidebar.myFiles')"
|
|
:title="$t('sidebar.myFiles')"
|
|
>
|
|
<i class="material-icons">folder</i>
|
|
<span>{{ $t("sidebar.myFiles") }}</span>
|
|
</router-link>
|
|
|
|
<div v-if="user.perm.create">
|
|
<button
|
|
@click="$store.commit('showHover', 'newDir')"
|
|
class="action"
|
|
:aria-label="$t('sidebar.newFolder')"
|
|
:title="$t('sidebar.newFolder')"
|
|
>
|
|
<i class="material-icons">create_new_folder</i>
|
|
<span>{{ $t("sidebar.newFolder") }}</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="$store.commit('showHover', 'newFile')"
|
|
class="action"
|
|
:aria-label="$t('sidebar.newFile')"
|
|
:title="$t('sidebar.newFile')"
|
|
>
|
|
<i class="material-icons">note_add</i>
|
|
<span>{{ $t("sidebar.newFile") }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<router-link
|
|
class="action"
|
|
to="/settings"
|
|
:aria-label="$t('sidebar.settings')"
|
|
:title="$t('sidebar.settings')"
|
|
>
|
|
<i class="material-icons">settings_applications</i>
|
|
<span>{{ $t("sidebar.settings") }}</span>
|
|
</router-link>
|
|
|
|
<button
|
|
v-if="
|
|
authMethod == 'json' ||
|
|
(authMethod == 'proxy' && authLogoutURL != '')
|
|
"
|
|
@click="logout"
|
|
class="action"
|
|
id="logout"
|
|
:aria-label="$t('sidebar.logout')"
|
|
:title="$t('sidebar.logout')"
|
|
>
|
|
<i class="material-icons">exit_to_app</i>
|
|
<span>{{ $t("sidebar.logout") }}</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<router-link
|
|
class="action"
|
|
to="/login"
|
|
:aria-label="$t('sidebar.login')"
|
|
:title="$t('sidebar.login')"
|
|
>
|
|
<i class="material-icons">exit_to_app</i>
|
|
<span>{{ $t("sidebar.login") }}</span>
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="signup"
|
|
class="action"
|
|
to="/login"
|
|
:aria-label="$t('sidebar.signup')"
|
|
:title="$t('sidebar.signup')"
|
|
>
|
|
<i class="material-icons">person_add</i>
|
|
<span>{{ $t("sidebar.signup") }}</span>
|
|
</router-link>
|
|
</template>
|
|
|
|
<p class="credits">
|
|
<span>
|
|
<span v-if="disableExternal">File Browser</span>
|
|
<a
|
|
v-else
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
href="https://github.com/filebrowser/filebrowser"
|
|
>File Browser</a
|
|
>
|
|
<span> {{ version }}</span>
|
|
</span>
|
|
<span
|
|
><a @click="help">{{ $t("sidebar.help") }}</a></span
|
|
>
|
|
</p>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from "vuex";
|
|
import * as auth from "@/utils/auth";
|
|
import {
|
|
version,
|
|
signup,
|
|
disableExternal,
|
|
noAuth,
|
|
authMethod,
|
|
authLogoutURL,
|
|
} from "@/utils/constants";
|
|
|
|
export default {
|
|
name: "sidebar",
|
|
computed: {
|
|
...mapState(["user"]),
|
|
...mapGetters(["isLogged"]),
|
|
active() {
|
|
return this.$store.state.show === "sidebar";
|
|
},
|
|
signup: () => signup,
|
|
version: () => version,
|
|
disableExternal: () => disableExternal,
|
|
noAuth: () => noAuth,
|
|
authMethod: () => authMethod,
|
|
authLogoutURL: () => authLogoutURL,
|
|
},
|
|
methods: {
|
|
help() {
|
|
this.$store.commit("showHover", "help");
|
|
},
|
|
logout: auth.logout,
|
|
},
|
|
};
|
|
</script>
|