feat(frontend): ✨ Add Recipe Editor to Assign Units and Foods for Recipe Scaling

frontend/layouts/default.vue

@@ -37,20 +37,46 @@ export default defineComponent({
       sidebar: null,
       topLinks: [
         {
-          icon: this.$globals.icons.home,
-          to: "/",
-          title: this.$t("sidebar.home-page"),
+          icon: this.$globals.icons.calendar,
+          restricted: true,
+          title: this.$t("meal-plan.meal-planner"),
+          children: [
+            {
+              icon: this.$globals.icons.calendarMultiselect,
+              title: this.$t("meal-plan.planner"),
+              to: "/meal-plan/planner",
+              restricted: true,
+            },
+            {
+              icon: this.$globals.icons.calendarWeek,
+              title: this.$t("meal-plan.dinner-this-week"),
+              to: "/meal-plan/this-week",
+              restricted: true,
+            },
+            {
+              icon: this.$globals.icons.calendarToday,
+              title: this.$t("meal-plan.dinner-today"),
+              to: "/meal-plan/today",
+              restricted: true,
+            },
+          ],
         },
         {
-          icon: this.$globals.icons.search,
-          to: "/search",
-          title: this.$t("sidebar.search"),
+          icon: this.$globals.icons.formatListCheck,
+          title: this.$t("shopping-list.shopping-lists"),
+          to: "/shopping-list",
+          restricted: true,
         },
         {
           icon: this.$globals.icons.viewModule,
           to: "/recipes/all",
           title: this.$t("sidebar.all-recipes"),
         },
+        {
+          icon: this.$globals.icons.search,
+          to: "/search",
+          title: this.$t("sidebar.search"),
+        },
         {
           icon: this.$globals.icons.tags,
           to: "/recipes/categories",

frontend/layouts/error.vue

@@ -1,13 +1,30 @@
 <template>
-  <v-app dark>
-    <h1 v-if="error.statusCode === 404">
-      {{ pageNotFound }}
-    </h1>
-    <h1 v-else>
-      {{ otherError }}
-    </h1>
-    <NuxtLink to="/"> Home page </NuxtLink>
-  </v-app>
+  <div>
+    <v-card-title>
+      <slot>
+        <h1 class="mx-auto">{{ $t("page.404-page-not-found") }}</h1>
+      </slot>
+    </v-card-title>
+    <div class="d-flex justify-space-around">
+      <div class="d-flex align-center">
+        <p class="primary--text">4</p>
+        <v-icon color="primary" class="mx-auto mb-0" size="200">
+          {{ $globals.icons.primary }}
+        </v-icon>
+        <p class="primary--text">4</p>
+      </div>
+    </div>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <slot name="actions">
+        <v-btn v-for="(button, index) in buttons" :key="index" nuxt :to="button.to" color="primary">
+          <v-icon left> {{ button.icon }} </v-icon>
+          {{ button.text }}
+        </v-btn>
+      </slot>
+      <v-spacer></v-spacer>
+    </v-card-actions>
+  </div>
 </template>
 
 <script>
@@ -31,6 +48,15 @@ export default {
       title,
     };
   },
+  computed: {
+    buttons() {
+      return [
+        { icon: this.$globals.icons.home, to: "/", text: this.$t("general.home") },
+        { icon: this.$globals.icons.primary, to: "/recipes/all", text: this.$t("page.all-recipes") },
+        { icon: this.$globals.icons.search, to: "/search", text: this.$t("search.search") },
+      ];
+    },
+  },
 };
 </script>
 
@@ -38,4 +64,10 @@ export default {
 h1 {
   font-size: 20px;
 }
+p {
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
+  font-size: 200px;
+}
 </style>
+