App Bar Rewrite (#347)

* Dummy Commit

* consolidate sidebar and app bar

* fix image error

* consolidate sidebar

* new icon for user menu

* fixes #329

* fix double click on mobile

* swap to computed properties

* fix open/close bug

* rewrite search for mobile

* fix ingredient checkbox

* cleanup console.logs

* set default lang + bump version

* draft changelog

* reword

* update env variables

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

frontend/src/components/UI/TheAppBar.vue

@@ -1,52 +1,18 @@
 <template>
   <div>
+    <TheSidebar ref="theSidebar" />
     <v-app-bar
-      v-if="!isMobile"
       clipped-left
       dense
       app
       color="primary"
       dark
       class="d-print-none"
+      :bottom="isMobile"
     >
-      <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 icon @click="openSidebar">
+        <v-icon> mdi-menu </v-icon>
       </v-btn>
-
-      <TheSiteMenu />
-    </v-app-bar>
-    <v-app-bar
-      v-else
-      bottom
-      clipped-left
-      dense
-      app
-      color="primary"
-      dark
-      class="d-print-none"
-    >
       <router-link to="/">
         <v-btn icon>
           <v-icon size="40"> mdi-silverware-variant </v-icon>
@@ -54,21 +20,34 @@
       </router-link>
 
       <div v-if="!isMobile" btn class="pl-2">
-        <v-toolbar-title style="cursor: pointer" @click="$router.push('/')"
-          >Mealie
+        <v-toolbar-title style="cursor: pointer" @click="$router.push('/')">
+          Mealie
         </v-toolbar-title>
       </div>
 
       <v-spacer></v-spacer>
-      <v-expand-x-transition>
-        <SearchDialog ref="mainSearchDialog" />
-      </v-expand-x-transition>
-      <v-btn icon @click="$refs.mainSearchDialog.open()">
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
+      <SearchBar
+        v-if="!isMobile"
+        :show-results="true"
+        @selected="navigateFromSearch"
+        :max-width="isMobile ? '100%' : '450px'"
+      />
+      <div v-else>
+        <v-btn icon @click="$refs.recipeSearch.open()">
+          <v-icon> mdi-magnify </v-icon>
+        </v-btn>
+        <SearchDialog ref="recipeSearch"/>
+      </div>
 
       <TheSiteMenu />
+
+      <v-slide-x-reverse-transition>
+        <TheRecipeFab v-if="loggedIn && isMobile" />
+      </v-slide-x-reverse-transition>
     </v-app-bar>
+    <v-slide-x-reverse-transition>
+      <TheRecipeFab v-if="loggedIn && !isMobile" :absolute="true" />
+    </v-slide-x-reverse-transition>
   </div>
 </template>
 
@@ -76,39 +55,40 @@
 import TheSiteMenu from "@/components/UI/TheSiteMenu";
 import SearchBar from "@/components/UI/Search/SearchBar";
 import SearchDialog from "@/components/UI/Search/SearchDialog";
+import TheRecipeFab from "@/components/UI/TheRecipeFab";
+import TheSidebar from "@/components/UI/TheSidebar";
 import { user } from "@/mixins/user";
 export default {
   name: "AppBar",
 
   mixins: [user],
   components: {
+    SearchDialog,
+    TheRecipeFab,
+    TheSidebar,
     TheSiteMenu,
     SearchBar,
-    SearchDialog,
   },
   data() {
     return {
-      search: false,
-      isMobile: false,
+      showSidebar: false,
     };
   },
-  watch: {
-    $route() {
-      this.search = false;
-    },
-  },
   computed: {
-    // isMobile() {
-    //   return this.$vuetify.breakpoint.name === "xs";
-    // },
+    isMobile() {
+      return this.$vuetify.breakpoint.name === "xs";
+    },
   },
   methods: {
     navigateFromSearch(slug) {
       this.$router.push(`/recipe/${slug}`);
     },
+    openSidebar() {
+      this.$refs.theSidebar.toggleSidebar();
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>