sizing and navs

vue3/src/apps/tandoor/Tandoor.vue

@@ -1,39 +1,47 @@
 <template>
-    <v-app >
+    <v-app>
 
         <v-app-bar color="tandoor" flat density="comfortable">
-            <router-link :to="{name: 'view_start', params: {}}">
+            <router-link :to="{name: 'view_home', params: {}}">
                 <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
             </router-link>
-            <global-search-dialog></global-search-dialog>
             <v-spacer></v-spacer>
-            <!--            <v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>-->
+            <global-search-dialog></global-search-dialog>
+            <v-avatar color="cyan" class="me-2">V</v-avatar>
         </v-app-bar>
 
-
         <v-main>
             <router-view></router-view>
         </v-main>
 
-        <v-bottom-navigation grow>
-            <v-btn value="recent" to="/">
-                <v-icon icon="fas fa-book"/>
+        <v-navigation-drawer>
+            <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
+            <v-divider></v-divider>
+            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{name: 'view_home', params: {}}"></v-list-item>
+            <v-list-item prepend-icon="fas fa-calendar-alt" title="Mealplan" :to="{name: 'view_mealplan', params: {}}"></v-list-item>
+            <v-list-item prepend-icon="fas fa-shopping-cart" title="Shopping" :to="{name: 'view_shopping', params: {}}"></v-list-item>
+            <v-list-item prepend-icon="fas fa-bars" title="More" :to="{name: 'view_books', params: {}}"></v-list-item> <!-- TODO link -->
+        </v-navigation-drawer>
+
+        <v-bottom-navigation grow class="d-lg-none">
+            <v-btn value="recent" :to="{name: 'view_home', params: {}}">
+                <v-icon icon="fa-fw fas fa-book "/>
                 <span>Recipes</span>
             </v-btn>
 
             <v-btn value="favorites" to="/mealplan">
-                <v-icon icon="fas fa-calendar-alt"></v-icon>
+                <v-icon icon="fa-fw fas fa-calendar-alt"></v-icon>
 
                 <span>MealPlan</span>
             </v-btn>
 
             <v-btn value="nearby" to="/shopping">
-                <v-icon icon="fas fa-shopping-cart"></v-icon>
+                <v-icon icon="fa-fw fas fa-shopping-cart"></v-icon>
 
                 <span>Shopping</span>
             </v-btn>
-            <v-btn value="nearby" to="/books">
-                <v-icon icon="fas fa-bars"></v-icon>
+            <v-btn value="nearby" to="/books"> <!-- TODO link -->
+                <v-icon icon="fa-fw fas fa-bars"></v-icon>
 
                 <span>More</span>
             </v-btn>

vue3/src/apps/tandoor/main.ts

@@ -18,7 +18,7 @@ import vueform from '@/vueform'
 import SearchPage from "@/pages/SearchPage.vue";
 
 const routes = [
-    {path: '/', component: StartPage, name: 'view_start'},
+    {path: '/', component: StartPage, name: 'view_home'},
     {path: '/search', component: SearchPage, name: 'view_search'},
     {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
     {path: '/mealplan', component: MealPlanPage, name: 'view_mealplan'},

vue3/src/components/display/HorizontalMealPlanWindow.vue

@@ -62,12 +62,14 @@ import {MealPlan, Recipe, RecipeOverview} from "@/openapi";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {DateTime} from "luxon";
 import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
+import {homePageCols} from "@/utils/breakpoint_utils";
+
 
-const {mdAndUp} = useDisplay()
 const loading = ref(false)
 
 let numberOfCols = computed(() => {
-    return mdAndUp.value ? 5 : 2
+    const {name} = useDisplay()
+    return homePageCols(name.value)
 })
 
 type MealPlanGridItem = {

vue3/src/components/display/HorizontalRecipeWindow.vue

@@ -1,7 +1,7 @@
 <template>
     <v-row justify="space-between">
         <v-col>
-            <h2><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i>  {{ title }}</h2>
+            <h2><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i> {{ title }}</h2>
         </v-col>
     </v-row>
 
@@ -20,7 +20,7 @@
     </v-row>
     <v-row v-if="recipeWindows.length == 0 && skeletons > 0">
         <v-col>
-            <v-window >
+            <v-window>
                 <v-window-item>
                     <v-row>
                         <v-col v-for="n in skeletons">
@@ -38,14 +38,14 @@
 <script lang="ts" setup>
 import {computed, PropType, toRefs} from 'vue'
 import RecipeCard from "@/components/display/RecipeCard.vue";
-import {useDisplay} from "vuetify";
+import {DisplayBreakpoint, useDisplay} from "vuetify";
 import {Recipe, RecipeOverview} from "@/openapi";
+import {homePageCols} from "@/utils/breakpoint_utils";
 
-const {mdAndUp} = useDisplay()
 
 const props = defineProps(
     {
-        title: {type: String as PropType<undefined|String>, required: true},
+        title: {type: String as PropType<undefined | String>, required: true},
         icon: {type: String, required: false},
         skeletons: {type: Number, default: 0},
         recipes: {
@@ -57,7 +57,8 @@ const props = defineProps(
 const {title, recipes} = toRefs(props)
 
 let numberOfCols = computed(() => {
-    return mdAndUp.value ? 4 : 2
+    const {name} = useDisplay()
+    return homePageCols(name.value)
 })
 
 type CustomWindow = {

vue3/src/pages/StartPage.vue

@@ -3,7 +3,6 @@
 
         <horizontal-meal-plan-window></horizontal-meal-plan-window>
 
-
         <!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
         <!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
         <horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
@@ -31,27 +30,7 @@ import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
 export default defineComponent({
     name: "StartPage",
     components: {MealPlanDialog, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
-    computed: {
-
-        meal_plan_grid: function () {
-            let grid = []
-
-            if (useMealPlanStore().plan_list.length > 0) {
-                console.log('found plans')
-                for (const x of Array(4).keys()) {
-                    let grid_day_date = DateTime.now().plus({days: x})
-                    console.log('going trough days ', x, grid_day_date)
-                    grid.push({
-                        date: grid_day_date,
-                        create_default_date: grid_day_date.toISODate(), // improve meal plan edit modal to do formatting itself and accept dates
-                        date_label: grid_day_date.toLocaleString(DateTime.DATE_MED),
-                        plan_entries: useMealPlanStore().plan_list.filter(m => (DateTime.fromJSDate(m.fromDate) <= grid_day_date && DateTime.fromJSDate((m.toDate != undefined) ? m.toDate : m.fromDate) >= grid_day_date)),
-                    })
-                }
-            }
-            return grid
-        },
-    },
+    computed: { },
     data() {
         return {
             recipes: [] as Recipe[],

vue3/src/utils/breakpoint_utils.ts

@@ -0,0 +1,26 @@
+
+export function homePageCols(breakpoint: string){
+    switch (breakpoint) {
+        case "xs": {
+            return 1
+        }
+        case "sm": {
+            return 2
+        }
+         case "md": {
+            return 4
+        }
+        case "lg": {
+            return 5
+        }
+        case "xl": {
+            return 6
+        }
+        case "xxl": {
+            return 7
+        }
+        default: {
+            return 1
+        }
+    }
+}