mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-06-08 16:16:06 -04:00
2c5e5a8421
* fixed incorrect var ref * added public recipe pagination route * refactored frontend public/explore API * fixed broken public cards * hid context menu from cards when public * fixed public app header * fixed random recipe * added public food, category, tag, and tool routes * not sure why I thought that would work * added public organizer/foods stores * disabled clicking on tags/categories * added public link to profile page * linting * force a 404 if the group slug is missing or invalid * oops * refactored to fit sidebar into explore * fixed invalid logic for app header * removed most sidebar options from public * added backend routes for public cookbooks * added explore cookbook pages/apis * codegen * added backend tests * lint * fixes v-for keys * I do not understand but sure why not --------- Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
102 lines
2.9 KiB
Vue
102 lines
2.9 KiB
Vue
<template>
|
|
<v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
|
|
<slot />
|
|
<router-link :to="routerLink">
|
|
<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(routerLink)"> Mealie </v-toolbar-title>
|
|
</div>
|
|
<RecipeDialogSearch ref="domSearchDialog" />
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<!-- Navigation Menu -->
|
|
<template v-if="menu">
|
|
<div v-if="!$vuetify.breakpoint.xs" style="max-width: 500px" @click="activateSearch">
|
|
<v-text-field
|
|
readonly
|
|
class="mt-6 rounded-xl"
|
|
rounded
|
|
dark
|
|
solo
|
|
dense
|
|
flat
|
|
:prepend-inner-icon="$globals.icons.search"
|
|
background-color="primary darken-1"
|
|
color="white"
|
|
:placeholder="$t('search.search-hint')"
|
|
>
|
|
</v-text-field>
|
|
</div>
|
|
<v-btn v-else icon @click="activateSearch">
|
|
<v-icon> {{ $globals.icons.search }}</v-icon>
|
|
</v-btn>
|
|
<v-btn v-if="$auth.loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="$auth.logout()">
|
|
<v-icon :left="$vuetify.breakpoint.smAndUp">{{ $globals.icons.logout }}</v-icon>
|
|
{{ $vuetify.breakpoint.smAndUp ? $t("user.logout") : "" }}
|
|
</v-btn>
|
|
<v-btn v-else text nuxt to="/login">
|
|
<v-icon left>{{ $globals.icons.user }}</v-icon>
|
|
{{ $t("user.login") }}
|
|
</v-btn>
|
|
</template>
|
|
</v-app-bar>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, onBeforeUnmount, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
|
|
import RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
|
|
|
|
export default defineComponent({
|
|
components: { RecipeDialogSearch },
|
|
props: {
|
|
menu: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const { $auth } = useContext();
|
|
const route = useRoute();
|
|
|
|
const loggedIn = computed(() => {
|
|
return $auth.loggedIn;
|
|
});
|
|
|
|
const groupSlug = route.value.params.groupSlug;
|
|
const routerLink = !loggedIn.value && groupSlug ? `/explore/recipes/${groupSlug}` : "/"
|
|
const domSearchDialog = ref<InstanceType<typeof RecipeDialogSearch> | null>(null);
|
|
|
|
function activateSearch() {
|
|
domSearchDialog.value?.open();
|
|
}
|
|
|
|
function handleKeyEvent(e: KeyboardEvent) {
|
|
const activeTag = document.activeElement?.tagName;
|
|
if (e.key === "/" && activeTag !== "INPUT" && activeTag !== "TEXTAREA") {
|
|
e.preventDefault();
|
|
activateSearch();
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener("keydown", handleKeyEvent);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener("keydown", handleKeyEvent);
|
|
});
|
|
|
|
return {
|
|
activateSearch,
|
|
domSearchDialog,
|
|
routerLink,
|
|
};
|
|
},
|
|
});
|
|
</script>
|