Below is the code found in App.vue:
<script setup>
import Nav from "./components/Nav.vue";
</script>
<template>
<Nav/>
</template>
...................................................................
Now, take a look at the contents of Nav.vue:
<script setup>
import { ref } from "vue";
import plusIcon from "../assets/plusIcon.svg";
import dotsIcon from "../assets/dotsIcon.svg";
import AddCountdownForm from "../components/AddCountdownForm.vue";
const showAddCountdownForm = ref(false);
</script>
<template>
<div class="relative">
<nav class="w-full top-0 fixed h-20 bg-gray-200 backdrop-blur-xl mb-14">
<div
class="container h-full p-1 flex items-centerm justify-between "
>
<!-- add countdown button -->
<div
class="my-auto w-14 h-14 p-1 cursor-pointer relative transition-all "
id="addBtn"
@click="showAddCountdownForm = true"
>
<plusIcon class="fill-indigo-500 h-12 w-12" />
</div>
<!-- setting button -->
<div class="my-auto w-14 h-14 p-1 cursor-pointer relative" id="setting">
<dotsIcon class="fill-indigo-500 h-12 w-12" />
</div>
</div>
</nav>
<AddCountdownForm v-show="showAddCountdownForm === true" />
</div>
</template>
...................................................................
Lastly, let's examine the contents of AddCountdownForm.vue:
<template>
<div
class="h-screen w-full bg-gray-200/50 backdrop-blur-sm relative flex md:justify-center md:items-center"
>
<div
class="absolute h-1/2 w-full bg-gray-300 bottom-0 md:bottom-auto md:w-1/2"
>
<div class="w-full bg-white h-12 ml-0">
<div>close</div>
</div>
<div>Text</div>
</div>
</div>
</template>
If I click on the Plus icon, the form can be shown. However, I am unsure of how to hide it if showAddCountdownForm is located in a separate file.