TandoorRecipes/vue/src/components/BottomNavigationBar.vue
2023-03-14 22:12:39 +01:00

100 lines
4.0 KiB
Vue

<template>
<!-- bottom button nav -->
<div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none" style="background: white">
<div class="d-flex flex-row justify-content-around">
<div class="flex-column" v-if="show_button_1">
<slot name="button_1">
<a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_search')">
<i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>{{ $t('Recipes') }}</small></a> <!-- TODO localize -->
</slot>
</div>
<div class="flex-column" v-if="show_button_2">
<slot name="button_2">
<a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_plan')">
<i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>{{ $t('Meal_Plan') }}</small></a>
</slot>
</div>
<div class="flex-column" v-if="show_button_create">
<slot name="button_create">
<div class="dropup">
<a class="nav-link bottom-nav-link p-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link"></i>
</a>
<div class="dropdown-menu center-dropup" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" v-bind:href="resolveDjangoUrl('new_recipe')"><i
class="fas fa-fw fa-plus"></i> {{ $t('Create Recipe') }}</a>
<a class="dropdown-item" v-bind:href="resolveDjangoUrl('data_import_url')"><i
class="fas fa-fw fa-file-import"></i> {{ $t('Import Recipe') }}</a>
<div class="dropdown-divider" v-if="create_links.length > 0"></div>
<slot name="custom_create_functions">
</slot>
<a class="dropdown-item" v-bind:href="cl.url" v-for="cl in create_links" v-bind:key="cl.label">
<i :class="cl.icon + ' fa-fw'"></i> {{ cl.label }}
</a>
</div>
</div>
</slot>
</div>
<div class="flex-column" v-if="show_button_3">
<slot name="button_3">
<a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_shopping')">
<i class="fas fa-shopping-cart" style="font-size: 1.5em"></i><br/><small>{{ $t('Shopping_list') }}</small></a>
</slot>
</div>
<div class="flex-column">
<slot name="button_4" v-if="show_button_4">
<a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_books')">
<i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>{{ $t('Books') }}</small></a> <!-- TODO localize -->
</slot>
</div>
</div>
</div>
</template>
<script>
import {ResolveUrlMixin} from "@/utils/utils";
export default {
name: "BottomNavigationBar",
mixins: [ResolveUrlMixin],
props: {
create_links: {
type: Array, default() {
return []
}
},
show_button_1: {type: Boolean, default: true},
show_button_2: {type: Boolean, default: true},
show_button_3: {type: Boolean, default: true},
show_button_4: {type: Boolean, default: true},
show_button_create: {type: Boolean, default: true},
}
}
</script>
<style scoped>
.bottom-nav-link {
color: #666666
}
.center-dropup {
right: auto;
left: 50%;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
</style>