improved bottom nav with slots and more

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -208,7 +208,7 @@
         ></meal-plan-edit-modal>
 
         <transition name="slide-fade">
-            <div class="row fixed-bottom p-2 b-1 border-top text-center" style="background: rgba(255, 255, 255, 0.6)"
+            <div class="row fixed-bottom p-2 b-1 border-top text-center d-none d-lg-block" style="background: rgba(255, 255, 255, 0.6)"
                  v-if="current_tab === 0">
                 <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
@@ -221,12 +221,12 @@
                         {{ $t("Export_To_ICal") }}
                     </a>
                 </div>
-<!--                <div class="col-md-3 col-6 mb-1 mb-md-0">-->
+                <!--                <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-->
+                <!--                    <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top-->
-<!--                            :title="$t('Coming_Soon')">-->
+                <!--                            :title="$t('Coming_Soon')">-->
-<!--                        {{ $t("Auto_Planner") }}-->
+                <!--                        {{ $t("Auto_Planner") }}-->
-<!--                    </button>-->
+                <!--                    </button>-->
-<!--                </div>-->
+                <!--                </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">
@@ -249,7 +249,12 @@
             </div>
         </transition>
 
-         <bottom-navigation-bar></bottom-navigation-bar>
+        <bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
+            <template #custom_create_functions>
+                <a class="dropdown-item" @click="createEntryClick(new Date())"><i
+                                class="fas fa-calendar-plus"></i> {{$t("Create")}}</a>
+            </template>
+        </bottom-navigation-bar>
     </div>
 </template>
 

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -957,7 +957,9 @@
                     :create_date="mealplan_default_date"
                 ></meal-plan-edit-modal>
 
-                <bottom-navigation-bar></bottom-navigation-bar>
+                <bottom-navigation-bar>
+
+                </bottom-navigation-bar>
             </div>
         </div>
     </div>

vue/src/components/BottomNavigationBar.vue

@@ -2,20 +2,58 @@
     <!-- bottom button nav -->
     <div class="fixed-bottom p-1 pt-2 border-top text-center d-lg-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')">
+            <div class="flex-column" v-if="show_button_1">
-                <i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>Recipes</small></a>
+                <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>Recipes</small></a> <!-- TODO localize -->
+                </slot>
+
             </div>
-            <div class="flex-column"><a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_plan')">
+            <div class="flex-column" v-if="show_button_2">
-                <i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>Plans</small></a>
+                <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>Plans</small></a> <!-- TODO localize -->
+                </slot>
+
             </div>
-            <div class="flex-column"><a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('new_recipe')">
+            <div class="flex-column" v-if="show_button_create">
-                <i class="fas fa-plus-circle fa-2x"></i><br/></a>
+                <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">
+                            <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"></i> {{ cl.label }}
+                            </a>
+                            <div class="dropdown-divider" v-if="create_links.length > 0"></div>
+
+                            <a class="dropdown-item" v-bind:href="resolveDjangoUrl('new_recipe')"><i
+                                class="fas fa-plus"></i> Create</a>  <!-- TODO localize -->
+                            <a class="dropdown-item" v-bind:href="resolveDjangoUrl('data_import_url')"><i
+                                class="fas fa-file-import"></i> Import</a>  <!-- TODO localize -->
                         </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')">
+                </slot>
-                <i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>Books</small></a>
+
+            </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>Shopping</small></a> <!-- TODO localize -->
+                </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>Books</small></a> <!-- TODO localize -->
+                </slot>
+
             </div>
         </div>
 
@@ -27,7 +65,19 @@ import {ResolveUrlMixin} from "@/utils/utils";
 
 export default {
     name: "BottomNavigationBar",
-    mixins: [ResolveUrlMixin]
+    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>
 
@@ -36,4 +86,12 @@ export default {
 .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>