From 192d8d0139252248e30f03d7e95652716b7378cb Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Wed, 2 Mar 2022 08:05:19 +0530
Subject: [PATCH] Add a search modal for phones

---
 src/App.vue | 46 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 36c4609..384380a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -68,13 +68,49 @@
                     outlined
                     class="mx-2"
                 />
-                <SearchMenu class="mx-2" />
             </v-navigation-drawer>
 
             <v-app-bar app color="primary" dark dense>
                 <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
                 <v-toolbar-title>Piped Material</v-toolbar-title>
+                <v-spacer />
+                <v-dialog
+                    v-model="searchMenuOpened"
+                    fullscreen hide-overlay
+                    transition="dialog-bottom-transition"
+                >
+                    <template v-slot:activator="{ on, attrs }">
+                        <v-btn
+                            icon
+                            large
+                            v-bind="attrs"
+                            v-on="on"
+                        >
+                            <v-icon large>
+                                {{ mdiCardSearchOutline }}
+                            </v-icon>
+                        </v-btn>
+                    </template>
+                    <v-card>
+                        <v-toolbar
+                            dark
+                            color="primary"
+                        >
+                            <v-btn
+                                icon
+                                dark
+                                @click="searchMenuOpened = false"
+                            >
+                                <v-icon>{{ mdiClose }}</v-icon>
+                            </v-btn>
+                            <v-toolbar-title>Search</v-toolbar-title>
+                        </v-toolbar>
+                        <v-card-text class="mt-2">
+                            <SearchMenu />
+                        </v-card-text>
+                    </v-card>
+                </v-dialog>
             </v-app-bar>
         </div>
 
@@ -97,7 +133,7 @@
 </style>
 
 <script>
-import { mdiBrightness6 } from '@mdi/js'
+import { mdiBrightness6, mdiCardSearchOutline, mdiClose } from '@mdi/js'
 
 import SearchMenu from '@/routes/SearchMenu'
 import { changeLocale } from '@/plugins/i18n'
@@ -189,8 +225,12 @@ export default {
 			return a.text.localeCompare(b.text)
 		}),
 		drawer: false,
+		// Only used on phones
+		searchMenuOpened: false,
 
-		mdiBrightness6
+		mdiBrightness6,
+		mdiCardSearchOutline,
+		mdiClose
 	}),
 
 	computed: {