playing with bottom nav

vue/src/apps/CookbookView/CookbookView.vue

@@ -53,6 +53,8 @@
                     @reload="openBook(current_book, true)"
                 ></cookbook-slider>
             </transition>
+
+            <bottom-navigation-bar></bottom-navigation-bar>
         </div>
     </div>
 </template>
@@ -66,13 +68,14 @@ import { ApiApiFactory } from "@/utils/openapi/api"
 import CookbookSlider from "@/components/CookbookSlider"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import { StandardToasts, ApiMixin } from "@/utils/utils"
+import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
 
 Vue.use(BootstrapVue)
 
 export default {
     name: "CookbookView",
     mixins: [ApiMixin],
-    components: { LoadingSpinner, CookbookSlider },
+    components: { LoadingSpinner, CookbookSlider, BottomNavigationBar },
     data() {
         return {
             cookbooks: [],

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -223,12 +223,12 @@
                         {{ $t("Export_To_ICal") }}
                     </a>
                 </div>
-                <div class="col-md-3 col-6 mb-1 mb-md-0">
-                    <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top
-                            :title="$t('Coming_Soon')">
-                        {{ $t("Auto_Planner") }}
-                    </button>
-                </div>
+<!--                <div class="col-md-3 col-6 mb-1 mb-md-0">-->
+<!--                    <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top-->
+<!--                            :title="$t('Coming_Soon')">-->
+<!--                        {{ $t("Auto_Planner") }}-->
+<!--                    </button>-->
+<!--                </div>-->
                 <div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none">
                     <b-button-toolbar key-nav aria-label="Toolbar with button groups">
                         <b-button-group class="mx-1">
@@ -250,6 +250,8 @@
                 </div>
             </div>
         </transition>
+
+         <bottom-navigation-bar></bottom-navigation-bar>
     </div>
 </template>
 
@@ -272,6 +274,7 @@ import VueCookies from "vue-cookies"
 import {ApiMixin, StandardToasts, ResolveUrlMixin} from "@/utils/utils"
 import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle"
 import {ApiApiFactory} from "@/utils/openapi/api"
+import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
 
 const {makeToast} = require("@/utils/utils")
 
@@ -292,6 +295,7 @@ export default {
         MealPlanCalenderHeader,
         EmojiInput,
         draggable,
+        BottomNavigationBar,
     },
     mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin],
     data: function () {

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -938,6 +938,8 @@
                         </div>
                     </div>
                 </div>
+
+                <bottom-navigation-bar></bottom-navigation-bar>
             </div>
         </div>
     </div>
@@ -962,6 +964,7 @@ import GenericMultiselect from "@/components/GenericMultiselect"
 import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 import {ApiApiFactory} from "@/utils/openapi/api"
 import {useMealPlanStore} from "@/stores/MealPlanStore";
+import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
 
 Vue.use(VueCookies)
 Vue.use(BootstrapVue)
@@ -972,7 +975,7 @@ let UI_COOKIE_NAME = "ui_search_settings"
 export default {
     name: "RecipeSearchView",
     mixins: [ResolveUrlMixin, ApiMixin, ToastMixin],
-    components: {GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect},
+    components: {GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect, BottomNavigationBar},
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin
@@ -1177,6 +1180,9 @@ export default {
         },
         isMobile: function () { //TODO move to central helper
             return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+        },
+        isTouch: function () {
+            return window.matchMedia("(pointer: coarse)").matches
         }
     },
     mounted() {

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="app" style="margin-bottom: 4vh">
         <b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
-        <b-button @click="replaySyncQueue">SYNC</b-button>
+
         <div class="row float-top w-100">
             <div class="col-auto no-gutter ml-auto">
                 <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
@@ -589,6 +589,8 @@
         </ContextMenu>
         <shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)"
                         :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe"/>
+
+        <bottom-navigation-bar></bottom-navigation-bar>
     </div>
 </template>
 
@@ -617,6 +619,7 @@ Vue.use(BootstrapVue)
 Vue.use(VueCookies)
 let SETTINGS_COOKIE_NAME = "shopping_settings"
 import {Workbox} from 'workbox-window';
+import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
 
 export default {
     name: "ShoppingListView",
@@ -632,7 +635,8 @@ export default {
         CopyToClipboard,
         ShoppingModal,
         draggable,
-        ShoppingSettingsComponent
+        ShoppingSettingsComponent,
+        BottomNavigationBar,
     },
 
     data() {

vue/src/components/BottomNavigationBar.vue

@@ -0,0 +1,39 @@
+<template>
+    <!-- bottom button nav -->
+    <div class="fixed-bottom p-1 pt-2 border-top text-center d-md-none" style="background: white">
+        <div class="d-flex flex-row justify-content-around">
+            <div class="flex-column"><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>Recipes</small></a>
+            </div>
+            <div class="flex-column"><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>Plans</small></a>
+            </div>
+            <div class="flex-column"><a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('new_recipe')">
+                <i class="fas fa-plus-circle fa-2x"></i><br/></a>
+            </div>
+            <div class="flex-column"><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>Shopping</small></a>
+            </div>
+            <div class="flex-column"><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>Books</small></a>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import {ResolveUrlMixin} from "@/utils/utils";
+
+export default {
+    name: "BottomNavigationBar",
+    mixins: [ResolveUrlMixin]
+}
+</script>
+
+<style scoped>
+
+.bottom-nav-link {
+    color: #666666
+}
+</style>