code cleanup for search bar
This commit is contained in:
parent
6523d15637
commit
26bc3ae957
|
@ -2,10 +2,6 @@
|
|||
import { ref } from "vue";
|
||||
|
||||
const showSearch = ref(false);
|
||||
|
||||
const toggleSearch = () => {
|
||||
showSearch.value = !showSearch.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -22,13 +18,16 @@ const toggleSearch = () => {
|
|||
<template v-slot:append class="align-center justify-center">
|
||||
<v-btn icon="mdi-heart"></v-btn>
|
||||
|
||||
<v-btn icon="mdi-magnify" @click="toggleSearch"> </v-btn>
|
||||
<!---------------->
|
||||
<!-- Search Bar -->
|
||||
<!---------------->
|
||||
<v-btn icon="mdi-magnify" @click="showSearch = !showSearch"> </v-btn>
|
||||
|
||||
<v-slide-x-reverse-transition hide-on-leave>
|
||||
<v-responsive v-show="showSearch" min-width="20vw">
|
||||
<v-text-field
|
||||
variant="solo-filled"
|
||||
class="search-bar w-100 justify-center align-center"
|
||||
class="w-100 justify-center align-center"
|
||||
label="Search"
|
||||
clearable
|
||||
></v-text-field>
|
||||
|
|
Loading…
Reference in a new issue