fix: advanced search now saved in URL (#1745)

* use query param for toggle state

* close #1678

docs/docs/documentation/getting-started/api-usage.md

@@ -8,7 +8,7 @@ Mealie supports long-live api tokens in the user frontend. See [user settings pa
 ## Key Components
 
 ### Exploring Your Local API
-On your local installation you can access interactive API documentation that provides `curl` examples and expected results. This allows you to easily test and interact with your API to identify places to include your own functionality. You can visit the documentation at `http://mealie.yourdomain.com/docs` or see the example at the [Demo Site](https://mealie-demo.hay-kot.dev/docs)
+On your local installation you can access interactive API documentation that provides `curl` examples and expected results. This allows you to easily test and interact with your API to identify places to include your own functionality. You can visit the documentation at `http://mealie.yourdomain.com/docs` or see the example at the [Demo Site](https://demo.mealie.io/docs).
 
 ### Extras
 #### Recipe Extras

docs/mkdocs.yml

@@ -1,5 +1,5 @@
 site_name: Mealie
-#demo_url: https://mealie-demo.hay-kot.dev/
+demo_url: https://demo.mealie.io
 site_url: https://hay-kot.github.io/mealie/
 use_directory_urls: true
 theme:

frontend/pages/search.vue

@@ -25,15 +25,17 @@
         </v-col>
       </v-row>
 
-      <ToggleState>
+      <div>
-        <template #activator="{ state, toggle }">
+        <v-switch
-          <v-switch :value="state" color="info" class="ma-0 pa-0" label="Advanced" @input="toggle" @click="toggle">
+          v-model="advanced"
-            Advanced
+          color="info"
-          </v-switch>
+          class="ma-0 pa-0"
-        </template>
+          label="Advanced"
-        <template #default="{ state }">
+          @input="advanced = !advanced"
+          @click="advanced = !advanced"
+        />
         <v-expand-transition>
-            <v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
+          <v-row v-show="advanced" dense class="my-0 dense flex-row align-center justify-space-around">
             <v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
               <RecipeOrganizerSelector
                 v-model="includeCategories"
@@ -94,8 +96,7 @@
             </v-col>
           </v-row>
         </v-expand-transition>
-        </template>
+      </div>
-      </ToggleState>
     </v-container>
     <v-container class="px-0 mt-6">
       <RecipeCardSection
@@ -135,6 +136,17 @@ export default defineComponent({
   setup() {
     const { assignSorted } = useRecipes(true);
 
+    // ================================================================
+    // Advanced Toggle
+
+    const advancedQp = useRouteQuery("advanced");
+    const advanced = computed({
+      get: () => advancedQp.value === "true",
+      set: (val) => {
+        advancedQp.value = val ? "true" : "false";
+      },
+    });
+
     // ================================================================
     // Global State
 
@@ -282,6 +294,7 @@ export default defineComponent({
       updateCatParams,
       updateFoodParams,
       updateTagParams,
+      advanced,
     };
   },
   head() {