Added Search Ovelay

ethanfox · Jul 23, 2024 · 906aec6 · 906aec6
1 parent fcc2746
commit 906aec6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 10 deletions.
diff --git a/src/assets/search.white.svg b/src/assets/search.white.svg
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
@@ -68,6 +68,7 @@ export default {
   margin-bottom: 3rem;
   display: inline-block;
   width: 100%;
+  z-index: 1;
 }
 
 @media (max-width: 1600px) {

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Desktop Navigation -->
   <nav
-    class="hidden z-10 lg:flex justify-between text-black fixed xl:bottom-20 xl:left-24 xl:border-0 xl:w-full w-full bottom-16 left-4 rounded-sm"
+    class="hidden z-20 lg:flex justify-between text-black fixed xl:bottom-20 xl:left-24 xl:border-0 xl:w-full w-full bottom-16 left-4 rounded-sm"
   >
     <div class="bg-white flex shadow-lg">
       <a href="/">
@@ -26,17 +26,19 @@
     </div>
     <div class="flex">
       <div
-        class="w-full bg-white border-neutral-200 border justify-between mr-8 rounded-sm xl:mr-32 flex shadow-lg"
+        class="w-full bg-white border-neutral-200 hover:bg-neutral-200 transition-all border justify-between mr-8 rounded-sm xl:mr-32 flex shadow-lg"
       >
-        <a
-          class="my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 p-6 object-center xl:size-24 size-24 text-center flex content-center transition-all"
+        <button
+          @click="buttonClicked"
+          class="my-auto mx-auto font-semibold text-sm lg:text-lg p-6 object-center xl:size-24 size-24 text-center flex content-center"
           href="/about"
         >
           <img
             src="../assets/search-black.svg"
             alt="Art Institute Chicago"
             class="h-5 mx-auto my-auto object-contain rounded-l-sm"
-        /></a>
+          />
+        </button>
       </div>
     </div>
   </nav>
@@ -70,18 +72,30 @@
         >
       </div>
 
-      <a
+      <button
+        @click="buttonClicked"
         class="my-auto mx-auto font-semibold border-l-0 border border-neutral-200 h-full text-sm lg:text-lg object-center rounded-r-sm w-32 text-center flex content-center"
         href="/about"
       >
         <img
           src="../assets/search-black.svg"
           alt="Search"
           class="h-4 mx-auto my-auto object-contain rounded-l-sm"
-      /></a>
+        />
+      </button>
     </div>
     <!-- <div class="flex w-24 mr-8">
       
     </div> -->
   </nav>
 </template>
+
+<script>
+export default {
+  methods: {
+    buttonClicked() {
+      this.$emit("navigation-button-clicked");
+    },
+  },
+};
+</script>
diff --git a/src/components/SearchOverlay.vue b/src/components/SearchOverlay.vue
@@ -0,0 +1,62 @@
+<template>
+  <transition name="fade">
+    <div v-if="showSearchOverlay" class="search-overlay">
+      <div
+        class="bg-neutral-950/50 backdrop-blur-md fixed inset-0 flex items-center justify-center z-[9999]"
+      >
+        <form
+          class="flex gap-4 p-2 bg-white rounded-full shadow-lg border border-neutral-100 w-[900px]"
+        >
+          <div class="flex flex-col w-full pl-8">
+            <label for="search" class="text-sm text-neutral-500 font-semibold"
+              >Search</label
+            >
+            <input
+              type="text"
+              id="search"
+              name="search"
+              class="p-2 border-0 border-b focus:border-b-2 outline-none border-neutral-500 transition-all h-12"
+            />
+          </div>
+          <button
+            alt="Search"
+            type="submit"
+            class="bg-[#b50938] text-white hover:bg-[#810032] size-14 my-auto rounded-full transition-all p-4"
+          >
+            <img
+              src="../assets/search.svg"
+              alt="Search"
+              class="h-5 mx-auto my-auto object-contain rounded-l-sm"
+            />
+          </button>
+        </form>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    showSearchOverlay: Boolean,
+  },
+};
+</script>
+
+<style scoped>
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -25,23 +25,32 @@
           </div>
         </div>
       </div>
-      <div v-else key="loaded">
-        <Navigation />
+      <div v-else key="loaded" class="relative">
+        <Navigation
+          @navigation-button-clicked="showSearchOverlay = !showSearchOverlay"
+        />
 
         <Gallery :artworks="artworks" @load-more="loadMoreArtworks" />
+        <SearchOverlay :showSearchOverlay="showSearchOverlay" />
       </div>
     </transition>
   </div>
 </template>
 
 <script>
 import Navigation from "../components/Navigation.vue";
+import SearchOverlay from "../components/SearchOverlay.vue";
 import Gallery from "../components/Gallery.vue";
 import axios from "axios";
 import { ref, onMounted, computed } from "vue";
 
 export default {
-  components: { Navigation, Gallery },
+  components: { Navigation, Gallery, SearchOverlay },
+  data() {
+    return {
+      showSearchOverlay: false,
+    };
+  },
   setup() {
     const number = ref(1);
     const loading = ref(true);