github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-07-16 10:03:54 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

reorganize all frontend items

Browse source
This commit is contained in:
hay-kot 2021-08-01 19:24:47 -08:00
parent d67240d449
commit 00a8fdda41
147 changed files with 3845 additions and 743 deletions
Download patch file Download diff file Expand all files Collapse all files

152
frontend/components/Layout/AppHeader.vue
View file

@ -1,16 +1,152 @@
<template>
<div></div>
<v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
<slot />
<router-link to="/">
<v-btn icon>
<v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
</v-btn>
</router-link>
<div btn class="pl-2">
<v-toolbar-title style="cursor: pointer" @click="$router.push('/')"> Mealie </v-toolbar-title>
</div>
{{ value }}
<v-spacer></v-spacer>
<!-- <v-tooltip bottom>
<template #activator="{ on, attrs }">
<v-btn icon class="mr-1" small v-bind="attrs" v-on="on">
<v-icon v-text="isDark ? $globals.icons.weatherSunny : $globals.icons.weatherNight"> </v-icon>
</v-btn>
</template>
<span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
</v-tooltip> -->
<!-- <div v-if="false" style="width: 350px"></div>
<div v-else>
<v-btn icon @click="$refs.recipeSearch.open()">
<v-icon> {{ $globals.icons.search }} </v-icon>
</v-btn>
</div> -->
<!-- Navigation Menu -->
<v-menu
v-if="menu"
transition="slide-x-transition"
bottom
right
offset-y
offset-overflow
open-on-hover
close-delay="200"
>
<template #activator="{ on, attrs }">
<v-btn v-bind="attrs" icon v-on="on">
<v-icon>{{ $globals.icons.user }}</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item-group v-model="itemSelected" color="primary">
<v-list-item
v-for="(item, i) in filteredItems"
:key="i"
link
:to="item.nav ? item.nav : null"
@click="item.logout ? $auth.logout() : 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-item-group>
</v-list>
</v-menu>
</v-app-bar>
</template>
<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import { defineComponent } from "@nuxtjs/composition-api";
export default defineComponent({
props: {
value: {
type: Boolean,
default: null,
},
menu: {
type: Boolean,
default: true,
},
},
setup() {
return {}
}
})
return {};
},
data() {
return {
itemSelected: null,
items: [
{
icon: this.$globals.icons.user,
title: this.$t("user.login"),
restricted: false,
nav: "/user/login",
},
{
icon: this.$globals.icons.calendarWeek,
title: this.$t("meal-plan.dinner-this-week"),
nav: "/meal-plan/this-week",
restricted: true,
},
{
icon: this.$globals.icons.calendarToday,
title: this.$t("meal-plan.dinner-today"),
nav: "/meal-plan/today",
restricted: true,
},
{
icon: this.$globals.icons.calendarMultiselect,
title: this.$t("meal-plan.planner"),
nav: "/meal-plan/planner",
restricted: true,
},
{
icon: this.$globals.icons.formatListCheck,
title: this.$t("shopping-list.shopping-lists"),
nav: "/shopping-list",
restricted: true,
},
{
icon: this.$globals.icons.logout,
title: this.$t("user.logout"),
restricted: true,
logout: true,
},
{
icon: this.$globals.icons.cog,
title: this.$t("general.settings"),
nav: "/user/profile",
restricted: true,
},
],
};
},
computed: {
filteredItems(): Array<any> {
if (this.loggedIn) {
return this.items.filter((x) => x.restricted === true);
} else {
return this.items.filter((x) => x.restricted === false);
}
},
loggedIn(): Boolean {
return this.$auth.loggedIn;
},
},
});
</script>
<style scoped>
</style>