create searchBox section

2024-06-10 13:18:04 +03:30
parent 5310ec4dbc
commit c8bfc3c177
22 changed files with 1124 additions and 596 deletions
@@ -76,7 +76,11 @@
        <div
          class="relative navigator flexBox gap-[2.2vw] text-[0.938vw] text-[#383E43] font-medium"
        >
-          <div id="searchBox" class="hidden absolute right-0 w-full">
+          <div
+            v-if="showSearchBox"
+            id="searchBox"
+            class="absolute right-0 w-full"
+          >
            <svg
              class="h-[1.406vw] w-[1.406vw] absolute top-[0.5vw] right-[1vw]"
              viewBox="0 0 26 27"
@@ -100,14 +104,21 @@
            </svg>

            <input
+              autofocus
+              id="searchElement"
+              v-model="search"
+              @click="logClick(true)"
+              @blur="logClick(false)"
              type="text"
              placeholder="نام آموزش، دوره و... را وارد کنید"
              class="thin w-full h-[2.604vw] rounded-[0.521vw] bg-[#F5F5F5] text-[#878787] text-[0.658vw] ps-[3vw]"
            />
          </div>

-
-          <div class="border-e pe-[0.8vw] cursor-pointer" @click="openSearchBox">
+          <div
+            class="border-e pe-[0.8vw] cursor-pointer"
+            @click="openSearchBox"
+          >
            <svg
              width="1.458vw"
              height="1.406vw"
@@ -145,7 +156,7 @@
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M6.94 2.5H18.05C21.61 2.5 22.5 3.39 22.5 6.94V13.27C22.5 16.83 21.61 17.71 18.06 17.71H6.94C3.39 17.72 2.5 16.83 2.5 13.28V6.94C2.5 3.39 3.39 2.5 6.94 2.5Z"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -153,7 +164,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M12.5 17.72V22.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -161,7 +172,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M2.5 13.5H22.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -169,7 +180,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M8 22.5H17"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -182,8 +193,9 @@
            </span>
          </nuxt-link>
          <nuxt-link to="/courses">
-            <span class="flexBox gap-[0.6vw]"
-            :class="{ 'text-primaryGreen': $route.path === '/courses' }"
+            <span
+              class="flexBox gap-[0.6vw]"
+              :class="{ 'text-primaryGreen': $route.path === '/courses' }"
            >
              <svg
                width="1.302vw"
@@ -193,7 +205,7 @@
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                  d="M10.55 3.03004L4.53002 6.96004C2.60002 8.22004 2.60002 11.04 4.53002 12.3L10.55 16.23C11.63 16.94 13.41 16.94 14.49 16.23L20.48 12.3C22.4 11.04 22.4 8.23004 20.48 6.97004L14.49 3.04004C13.41 2.32004 11.63 2.32004 10.55 3.03004Z"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -201,7 +213,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                  d="M6.13012 13.58L6.12012 18.27C6.12012 19.54 7.10012 20.9 8.30012 21.3L11.4901 22.36C12.0401 22.54 12.9501 22.54 13.5101 22.36L16.7001 21.3C17.9001 20.9 18.8801 19.54 18.8801 18.27V13.63"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -209,7 +221,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                  d="M21.8999 15.5V9.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -219,12 +231,11 @@
              </svg>
              دوره های آموزشی
            </span>
-
          </nuxt-link>
-          <nuxt-link to="/about-us"
-          >
-            <span class="flexBox gap-[0.6vw]"
-            :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
+          <nuxt-link to="/about-us">
+            <span
+              class="flexBox gap-[0.6vw]"
+              :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
            >
              <svg
                width="1.302vw"
@@ -234,7 +245,9 @@
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  :class="{
+                    'stroke-primaryGreen': $route.path === '/about-us',
+                  }"
                  d="M12.5 22.5C18 22.5 22.5 18 22.5 12.5C22.5 7 18 2.5 12.5 2.5C7 2.5 2.5 7 2.5 12.5C2.5 18 7 22.5 12.5 22.5Z"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -242,7 +255,9 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  :class="{
+                    'stroke-primaryGreen': $route.path === '/about-us',
+                  }"
                  d="M12.5 8.5V13.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -250,7 +265,9 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  :class="{
+                    'stroke-primaryGreen': $route.path === '/about-us',
+                  }"
                  d="M12.4946 16.5H12.5036"
                  stroke="#383E43"
                  stroke-width="2"
@@ -258,7 +275,7 @@
                  stroke-linejoin="round"
                />
              </svg>
-  
+
              درباره ما</span
            >
          </nuxt-link>
@@ -266,36 +283,126 @@

        <nuxt-link to="/account" v-if="authUser">
          <img
-            src="/images/Profile.png"
+            :src="authUser?.avatarMedia"
            alt="profile"
            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
          />
        </nuxt-link>
        <nuxt-link to="/login" v-else>
-          <svg 
-          class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
-          viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path opacity="0.4" d="M13.5 2.25C10.5525 2.25 8.15625 4.64625 8.15625 7.59375C8.15625 10.485 10.4175 12.825 13.365 12.9262C13.455 12.915 13.545 12.915 13.6125 12.9262C13.635 12.9262 13.6462 12.9262 13.6687 12.9262C13.68 12.9262 13.68 12.9262 13.6912 12.9262C16.5712 12.825 18.8325 10.485 18.8437 7.59375C18.8437 4.64625 16.4475 2.25 13.5 2.25Z" fill="#878787"/>
-            <path d="M19.2151 15.9187C16.0763 13.8262 10.9576 13.8262 7.79633 15.9187C6.36758 16.875 5.58008 18.1687 5.58008 19.5525C5.58008 20.9362 6.36758 22.2187 7.78508 23.1637C9.36008 24.2212 11.4301 24.75 13.5001 24.75C15.5701 24.75 17.6401 24.2212 19.2151 23.1637C20.6326 22.2075 21.4201 20.925 21.4201 19.53C21.4088 18.1462 20.6326 16.8637 19.2151 15.9187Z" fill="#878787"/>
-            </svg>
-
+          <svg
+            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
+            viewBox="0 0 27 27"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              opacity="0.4"
+              d="M13.5 2.25C10.5525 2.25 8.15625 4.64625 8.15625 7.59375C8.15625 10.485 10.4175 12.825 13.365 12.9262C13.455 12.915 13.545 12.915 13.6125 12.9262C13.635 12.9262 13.6462 12.9262 13.6687 12.9262C13.68 12.9262 13.68 12.9262 13.6912 12.9262C16.5712 12.825 18.8325 10.485 18.8437 7.59375C18.8437 4.64625 16.4475 2.25 13.5 2.25Z"
+              fill="#878787"
+            />
+            <path
+              d="M19.2151 15.9187C16.0763 13.8262 10.9576 13.8262 7.79633 15.9187C6.36758 16.875 5.58008 18.1687 5.58008 19.5525C5.58008 20.9362 6.36758 22.2187 7.78508 23.1637C9.36008 24.2212 11.4301 24.75 13.5001 24.75C15.5701 24.75 17.6401 24.2212 19.2151 23.1637C20.6326 22.2075 21.4201 20.925 21.4201 19.53C21.4088 18.1462 20.6326 16.8637 19.2151 15.9187Z"
+              fill="#878787"
+            />
+          </svg>
        </nuxt-link>
-          
-          
      </div>
    </nav>
+    <div
+      v-if="showSearchBox"
+      class="z-[10] w-[28vw] pt-[0.5vw] pb-[2vw] flex flex-col absolute mt-[8vw] rounded-[0.521vw] bg-[#F5F5F5] border shadow-md"
+    >
+      <span
+        class="text-[0.vw] w-full text-end pe-[0.8vw] cursor-pointer"
+        @click="closeSearchBox"
+        >بستن</span
+      >
+
+      <div class="flexBox mt-[1vw] text-[0.8vw]" v-if="search?.length < 3">
+        برای جستجو حداقل 3 کلمه وارد کنید...
+      </div>
+
+      <div v-else>
+        <p v-if="data.courses.length < 1" class="flexBox mt-[1vw] text-[0.8vw]">
+          دوره ای یافت نشد !!!
+        </p>
+
+        <div v-else class="cursor-pointer px-[1vw] pt-[2vw] space-y-[1.5vw]">
+          <div
+          @click="goToCourse(item?._id)"
+            v-for="item in data.courses"
+            :key="item.id"
+            class="flex justify-between items-center"
+          >
+            <div class="flex gap-[0.5vw]">
+              <img :src="item.image" alt="" class="h-[2.5vw] rounded-[0.2vw]" />
+              <div>
+                <p class="text-[0.8vw]">
+                  {{ item.name }}
+                </p>
+                <p class="text-[0.6vw]">{{ item.categories[0].name }}</p>
+              </div>
+            </div>
+            <p class="text-[0.7vw]">مشاهده دوره</p>
+          </div>
+        </div>
+      </div>
+      <!-- <div v-for="item in data.courses" :key="item.id">{{ item.name }}</div> -->
+    </div>
  </div>
 </template>


 <script setup>
 const { authUser } = useAuth();
-  const openSearchBox = () =>{
-   
-    if (process.client) {
-      document.getElementById('searchBox').classList.add('!block')
-    }
+const showSearchBox = useState("showSearchBox", () => false);
+const search = ref(null);
+const openSearchBox = () => {
+  search.value = "";
+  showSearchBox.value = true;
+  if (process.client) {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
  }
-onMounted(() => {
-  })
+};
+const router = useRouter();
+const goToCourse = (val) =>{
+  router.push({
+    path: `/${val}`,
+  });
+  showSearchBox.value = false;
+
+} 
+const closeSearchBox = () => {
+  showSearchBox.value = false;
+  if (process.client) {
+    document.body.classList.remove("overflow-hidden");
+  }
+};
+
+const query = ref({});
+const { data, refresh, pending } = await useFetch(() => "/api/course", {
+  method: "POST",
+  query: query,
+});
+watch(search, () => {
+  query.value = { name: search.value };
+  refresh();
+  console.log("data", data.value.courses.length);
+  //// console.log(search.value.length);
+});
+// watch(showSearchBox.value === false, () =>{
+//   // showSearchBox.value = null
+//   console.log('s');
+// })
+
+// function logClick(isInside) {
+//   if (isInside) {
+//     console.log("لاگ صحیح: داخل input کلیک شد.");
+//   } else {
+//     showSearchBox.value = false;
+//   }
+// }
 </script>