mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-22 14:49:40 +02:00
d5a340bde1
* Dummy Commit * consolidate sidebar and app bar * fix image error * consolidate sidebar * new icon for user menu * fixes #329 * fix double click on mobile * swap to computed properties * fix open/close bug * rewrite search for mobile * fix ingredient checkbox * cleanup console.logs * set default lang + bump version * draft changelog * reword * update env variables Co-authored-by: hay-kot <hay-kot@pm.me>
113 lines
No EOL
2.5 KiB
Vue
113 lines
No EOL
2.5 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<LoginDialog ref="loginDialog" />
|
|
<v-menu
|
|
transition="slide-x-transition"
|
|
bottom
|
|
right
|
|
offset-y
|
|
open-on-hover
|
|
close-delay="200"
|
|
>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn v-bind="attrs" v-on="on" icon>
|
|
<v-icon>mdi-account</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="(item, i) in filteredItems"
|
|
:key="i"
|
|
link
|
|
:to="item.nav ? item.nav : null"
|
|
@click="item.login ? openLoginDialog() : null"
|
|
>
|
|
<v-list-item-icon>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>
|
|
{{ item.title }}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LoginDialog from "../Login/LoginDialog";
|
|
export default {
|
|
components: {
|
|
LoginDialog,
|
|
},
|
|
data: function() {
|
|
return {
|
|
items: [
|
|
{
|
|
icon: "mdi-account",
|
|
title: "Login",
|
|
restricted: false,
|
|
login: true,
|
|
},
|
|
{
|
|
icon: "mdi-calendar-week",
|
|
title: this.$t("meal-plan.dinner-this-week"),
|
|
nav: "/meal-plan/this-week",
|
|
restricted: true,
|
|
},
|
|
{
|
|
icon: "mdi-calendar-today",
|
|
title: this.$t("meal-plan.dinner-today"),
|
|
nav: "/meal-plan/today",
|
|
restricted: true,
|
|
},
|
|
{
|
|
icon: "mdi-calendar-multiselect",
|
|
title: this.$t("meal-plan.planner"),
|
|
nav: "/meal-plan/planner",
|
|
restricted: true,
|
|
},
|
|
{
|
|
icon: "mdi-logout",
|
|
title: this.$t('user.logout'),
|
|
restricted: true,
|
|
nav: "/logout",
|
|
},
|
|
{
|
|
icon: "mdi-cog",
|
|
title: this.$t("general.settings"),
|
|
nav: "/admin",
|
|
restricted: true,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {},
|
|
computed: {
|
|
filteredItems() {
|
|
if (this.loggedIn) {
|
|
return this.items.filter(x => x.restricted == true);
|
|
} else {
|
|
return this.items.filter(x => x.restricted == false);
|
|
}
|
|
},
|
|
loggedIn() {
|
|
return this.$store.getters.getIsLoggedIn;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
openLoginDialog() {
|
|
this.$refs.loginDialog.open();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.menu-text {
|
|
text-align: left !important;
|
|
}
|
|
</style> |