Feature/image minify (#256)

* fix settings

* app info cleanup

* bottom-bar experiment

* remove dup key

* type hints

* add dependency

* updated image with query parameters

* read image options

* add image minification

* add image minification step

* alt image routes

* add image minification

* set mobile bar to top

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/App.vue

@@ -1,35 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
-      <router-link v-if="!(isMobile && search)" to="/">
-        <v-btn icon>
-          <v-icon size="40"> mdi-silverware-variant </v-icon>
-        </v-btn>
-      </router-link>
-
-      <div v-if="!isMobile" btn class="pl-2">
-        <v-toolbar-title style="cursor: pointer" @click="$router.push('/')"
-          >Mealie
-        </v-toolbar-title>
-      </div>
-
-      <v-spacer></v-spacer>
-      <v-expand-x-transition>
-        <SearchBar
-          ref="mainSearchBar"
-          v-if="search"
-          :show-results="true"
-          @selected="navigateFromSearch"
-          :max-width="isMobile ? '100%' : '450px'"
-        />
-      </v-expand-x-transition>
-      <v-btn icon @click="search = !search">
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <SiteMenu />
-      <LanguageMenu />
-    </v-app-bar>
+    <TheAppBar />
     <v-main>
       <v-banner v-if="demo" sticky
         ><div class="text-center">
@@ -47,10 +18,8 @@
 </template>
 
 <script>
-import SiteMenu from "@/components/UI/SiteMenu";
-import SearchBar from "@/components/UI/Search/SearchBar";
+import TheAppBar from "@/components/UI/TheAppBar";
 import AddRecipeFab from "@/components/UI/AddRecipeFab";
-import LanguageMenu from "@/components/UI/LanguageMenu";
 import Vuetify from "./plugins/vuetify";
 import { user } from "@/mixins/user";
 
@@ -58,23 +27,13 @@ export default {
   name: "App",
 
   components: {
-    SiteMenu,
+    TheAppBar,
     AddRecipeFab,
-    SearchBar,
-    LanguageMenu,
   },
 
   mixins: [user],
 
-  watch: {
-    $route() {
-      this.search = false;
-    },
-  },
   computed: {
-    isMobile() {
-      return this.$vuetify.breakpoint.name === "xs";
-    },
     demo() {
       const appInfo = this.$store.getters.getAppInfo;
       return appInfo.demoStatus;
@@ -102,9 +61,6 @@ export default {
     this.$store.dispatch("requestAppInfo");
   },
 
-  data: () => ({
-    search: false,
-  }),
   methods: {
     // For Later!
 
@@ -126,9 +82,6 @@ export default {
         this.darkModeSystemCheck();
       });
     },
-    navigateFromSearch(slug) {
-      this.$router.push(`/recipe/${slug}`);
-    },
   },
 };
 </script>