reverting svelte-4

src/lib/components/Searchbar.svelte

@@ -3,16 +3,22 @@
   import { onMount } from "svelte";
   import Search from "lucide-svelte/icons/search";
   import { goto } from "$app/navigation";
+  import { Combobox } from "bits-ui";
+  import { page } from "$app/stores";
+
   let searchHistory = [];
   let updatedSearchHistory = [];
   let searchBarData = [];
-
+  let isLoading = false;
   let timeoutId;
   let assetType = "";
   let focusedSuggestion = "";
   let arrowMovement = false;
   let showSuggestions = false;
-  let searchQuery = "";
+  let touchedInput = false;
+
+  $: inputValue = "";
+  
 
   let searchOpen = false;
   let searchBarModalChecked = false; // Initialize it to false
@@ -46,6 +52,12 @@
     },
   ];
 
+  async function handleSearch( symbol, assetType) {
+  //event.preventDefault();
+  searchBarTicker(symbol);
+   goto(`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`)
+  }
+
   async function popularTicker(state) {
     searchOpen = false;
     if (!state) return;
@@ -80,9 +92,12 @@
       !state ||
       !searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
     ) {
-      searchQuery = "";
+      inputValue = "";
+      if ($screenWidth < 640) {
         const closePopup = document.getElementById("searchBarModal");
         closePopup?.dispatchEvent(new MouseEvent("click"));
+      }
+     
       return;
     }
 
@@ -101,21 +116,24 @@
         ...(searchHistory?.filter(
           (item) => item?.symbol?.toUpperCase() !== upperState,
         ) || []),
-      ].slice(0, 5);
+      ]?.slice(0, 5);
     }
 
     // Close search modal
     searchOpen = false;
+    if ($screenWidth < 640) {
         const closePopup = document.getElementById("searchBarModal");
         closePopup?.dispatchEvent(new MouseEvent("click"));
+      }
 
-    searchQuery = "";
+    inputValue = "";
   }
 
   async function search() {
+    isLoading = true;
     clearTimeout(timeoutId); // Clear any existing timeout
 
-    if (!searchQuery.trim()) {
+    if (!inputValue.trim()) {
       // Skip if query is empty or just whitespace
       searchBarData = []; // Clear previous results
       return;
@@ -123,21 +141,22 @@
 
     timeoutId = setTimeout(async () => {
       const response = await fetch(
-        `/api/searchbar?query=${encodeURIComponent(searchQuery)}&limit=10`,
+        `/api/searchbar?query=${encodeURIComponent(inputValue)}&limit=10`,
       );
       searchBarData = await response?.json();
     }, 50); // delay
+    isLoading = false;
   }
 
   const onKeyPress = (e) => {
     if (e?.charCode === 13 && searchBarData?.length > 0) {
       const assetActions = {
-        ETF: () => goto(`/etf/${searchQuery}`),
+        ETF: () => goto(`/etf/${inputValue}`),
-        Stock: () => goto(`/stocks/${searchQuery}`),
+        Stock: () => goto(`/stocks/${inputValue}`),
-        Crypto: () => goto(`/crypto/${searchQuery}`),
+        Crypto: () => goto(`/crypto/${inputValue}`),
       };
       if (!arrowMovement && searchBarData?.length > 0) {
-        searchQuery = searchBarData.at(0).symbol;
+        inputValue = searchBarData.at(0).symbol;
         assetType = searchBarData.at(0).type;
       }
 
@@ -145,7 +164,7 @@
       assetActions[assetType]?.();
 
       // Trigger search bar action
-      searchBarTicker(searchQuery);
+      searchBarTicker(inputValue);
     }
   };
 
@@ -161,7 +180,7 @@
         : popularList;
     if (!list?.length) return;
 
-    const currentIndex = list.findIndex((item) => item?.symbol === searchQuery);
+    const currentIndex = list.findIndex((item) => item?.symbol === inputValue);
     const isMovingDown = event.key === "ArrowDown";
 
     // Check if movement is within bounds
@@ -175,16 +194,18 @@
       const selectedItem = list[newIndex];
 
       // Update all related states at once
-      searchQuery = selectedItem?.symbol;
+      inputValue = selectedItem?.symbol;
       assetType = selectedItem?.type;
       focusedSuggestion = selectedItem?.symbol;
     }
+
   }
-  const handleControlD = async (event) => {
+  const handleControlK = async (event) => {
     if (event.ctrlKey && event.key === "k") {
-      // Ctrl+F is pressed, open the modal
+
-      const keyboardSearch = document.getElementById("searchBarModal");
+      //const keyboardSearch = document.getElementById("searchBarModal");
-      keyboardSearch?.dispatchEvent(new MouseEvent("click"));
+      //keyboardSearch?.dispatchEvent(new MouseEvent("click"));
+      touchedInput = true;
       event.preventDefault();
     }
   };
@@ -216,15 +237,14 @@
       console.log(e);
     }
 
-    window.addEventListener("keydown", handleControlD);
+    window.addEventListener("keydown", handleControlK);
     window.addEventListener("keydown", handleEscape);
     return () => {
-      window.removeEventListener("keydown", handleControlD);
+      window.removeEventListener("keydown", handleControlK);
       window.removeEventListener("keydown", handleEscape);
     };
   });
 
-  let charNumber = 20;
 
   $: {
     if (searchBarModalChecked === true && typeof window !== "undefined") {
@@ -238,7 +258,7 @@
 
   $: {
     if (searchBarModalChecked === false && typeof window !== "undefined") {
-      showSuggestions = searchQuery = "";
+      showSuggestions = inputValue = "";
       document.body.classList?.remove("overflow-hidden");
     }
   }
@@ -266,19 +286,113 @@
       }
     }
   }
+
+
 </script>
 
+<div class="hidden sm:block  w-full sm:max-w-[600px] grow">
+  <div >
+    <div class="relative flex items-center">
+      <div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
+        <svg class="h-4 w-4 text-icon xs:h-5 xs:w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" style="max-width: 40px" aria-hidden="true"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div> 
+      <Combobox.Root
+      items={searchBarData}
+      bind:inputValue
+      bind:touchedInput
+    >
+      <div class="relative  w-full">
+        <div
+          class="absolute inset-y-0 left-0 flex items-center pl-2.5"
+        >
+          <svg
+            class="text-icon h-5 w-5"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="3"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            style="max-width: 40px"
+            aria-hidden="true"
+          >
+            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            ></path>
+          </svg>
+        </div>
+        <Combobox.Input
+          on:input={search}
+          class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary sm:hover:bg-[#09090B] focus:bg-[#09090B] dark:bg-dark-700 dark:hover:bg-dark-700 dark:focus:bg-dark-700" 
+          placeholder="Company or stock symbol..."
+          aria-label="Company or stock symbol..."
+        />
+        <div class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold">
+          {#if isLoading}
+          <span class="loading loading-spinner loading-sm"></span>
+          {:else if inputValue?.length > 0}
+          <label class="cursor-pointer" on:click={() => inputValue = ""}>
+            <svg
+          class="w-6 h-6 "
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          /></svg
+        >
+          </label>
+          {:else}
+          <div class="pointer-events-none rounded-md border border-gray-500 px-2 py-0.5">
+          /
+        </div>
+        {/if}
+      </div>
+      </div>
+      {#if inputValue?.length > 0}
+        <Combobox.Content
+          class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-[#09090B] px-1 py-3 shadow-popover outline-none"
+          sideOffset={8}
+        >
+          {#each searchBarData as item}
+            <Combobox.Item
+              class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
+              value={item?.symbol}
+              label={item?.name}
+              onclick={() => handleSearch(item?.symbol, item?.type)}
+            >
+              <div
+              class="flex flex-row items-center justify-between w-full">
+                <span class="text-sm text-blue-400"
+                  >{item?.symbol}</span
+                >
+                <span class="ml-3 text-sm text-white"
+                  >{item?.name}</span
+                >
+                <span class="ml-auto text-sm text-white"
+                  >{item?.type}</span
+                >
+              </div>
+            </Combobox.Item>
+          {:else}
+            <span class="block px-5 py-2 text-sm text-white">
+              No results found
+            </span>
+          {/each}
+        </Combobox.Content>
+        {/if}
+    </Combobox.Root>
+  </div>
+
+    </div>
+  </div>
+
+
 <label
   for="searchBarModal"
-  class="cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
+  class="sm:hidden cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
 >
   <Search class="h-[20px] w-[20px]" />
 </label>
 
-<!--Start Desktop Searchbar-->
-<!--Don't remove if since input.focus does not work anymore-->
-
-{#if $screenWidth >= 640}
   <input
     type="checkbox"
     id="searchBarModal"
@@ -286,22 +400,39 @@
     bind:checked={searchBarModalChecked}
   />
 
-  <dialog id="searchBarModal" class="modal modal-top z-[999]">
+  <dialog id="searchBarModal" class="modal p-3 sm:p-0">
     <label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
 
+    
     <div
-      class="z-[999] modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3"
+      class="z-[999] modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
     >
+    <label
+        for="searchBarModal"
+        class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
+      >
+        <svg
+          class="w-6 h-6 sm:w-8 sm:h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          /></svg
+        >
+      </label>
+
       <!-- Search layout -->
-      <div class="mt-5 sm:mt-0">
+      <div class="mt-8">
         <div class="relative">
           <label for="modal-search" class="sr-only">Search</label>
+         
           <input
             id="modal-search"
-            class="rounded-md w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
+            class="rounded-md w-full text-white bg-secondary border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
             type="search"
             placeholder="Search Anything…"
-            bind:value={searchQuery}
+            bind:value={inputValue}
             bind:this={inputElement}
             on:input={search}
             on:keydown={handleKeyDown}
@@ -309,7 +440,7 @@
             autocomplete="off"
           />
           <button
-            on:click={() => searchBarTicker(searchQuery)}
+            on:click={() => searchBarTicker(inputValue)}
             class="absolute inset-0 right-auto group"
             type="submit"
             aria-label="Search"
@@ -347,20 +478,11 @@
                     on:click={() => popularTicker(item?.symbol)}
                     class="mb-2 {item?.symbol === focusedSuggestion
                       ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
-                      : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white  group'} w-full"
+                      : 'shake-ticker cursor-pointer bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white  group'} w-full"
                   >
                     <div class="flex flex-row items-center w-full">
-                      <div
+
-                        class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
+                      <div class="flex flex-col">
-                      >
-                        <img
-                          style="clip-path: circle(50%);"
-                          class="w-6 h-6"
-                          src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
-                          loading="lazy"
-                        />
-                      </div>
-                      <div class="flex flex-col ml-2">
                         <span class="text-blue-400">{item?.symbol}</span>
                         <span class="text-white"
                           >{item?.name.length > 150
@@ -389,7 +511,7 @@
                     on:click={() => searchBarTicker(item?.symbol)}
                     class="mb-2 {item?.symbol === focusedSuggestion
                       ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
-                      : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'}"
+                      : 'cursor-pointer mb-2 bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'}"
                   >
                     <div class="flex flex-row items-center w-full">
                       <div class="flex flex-col">
@@ -432,191 +554,10 @@
         </div>
       </div>
 
-      <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
+
-        <svg
-          class="w-6 h-6 inline-block mb-0.5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path
-            fill="#fff"
-            d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
-          /></svg
-        >
-        <span class="text-white text-md font-medium"> Return </span>
-      </label>
     </div>
   </dialog>
-{:else}
-  <!--End Desktop Searchbar-->
 
-  <!--Start Drawer Sidewise for mobile-->
-
-  <div class="drawer drawer-end z-40 overflow-hidden">
-    <input
-      id="searchBarModal"
-      type="checkbox"
-      class="drawer-toggle"
-      bind:checked={searchBarModalChecked}
-    />
-
-    <div class="drawer-side overflow-hidden">
-      <div
-        class="p-3 bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden pt-10"
-      >
-        <!-- Search layout -->
-        <div class="mt-5 lg:mt-0">
-          <div class="relative">
-            <label for="modal-search" class="sr-only">Search</label>
-            <input
-              id="modal-search"
-              class="rounded-md w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
-              type="search"
-              placeholder="Search Anything…"
-              bind:value={searchQuery}
-              bind:this={inputElement}
-              on:input={search}
-              on:keydown={handleKeyDown}
-              on:keypress={onKeyPress}
-              autocomplete="off"
-            />
-            <button
-              on:click={() => searchBarTicker(searchQuery)}
-              class="absolute inset-0 right-auto group"
-              type="submit"
-              aria-label="Search"
-            >
-              <svg
-                class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
-                />
-                <path
-                  d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <div class="py-4">
-          <!-- Popular searches -->
-          <div class="mb-3 last:mb-0 mt-3">
-            {#if !showSuggestions}
-              <div class="text-start text-sm font-semibold text-white mb-2">
-                {searchHistory?.length > 0 ? "Recent" : "Popular"}
-              </div>
-            {/if}
-            <ul class="text-sm">
-              {#if !showSuggestions}
-                {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
-                  <li class="border-b border-gray-600">
-                    <a
-                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-                      on:click={() => popularTicker(item?.symbol)}
-                      class="mb-2 {item?.symbol === focusedSuggestion
-                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
-                        : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-md flex justify-start items-center p-2 text-white group'} w-full"
-                    >
-                      <div class="flex flex-row items-center w-full">
-                        <div
-                          class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
-                        >
-                          <img
-                            style="clip-path: circle(50%);"
-                            class="w-6 h-6"
-                            src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
-                            loading="lazy"
-                          />
-                        </div>
-                        <div class="flex flex-col ml-2">
-                          <span class="text-blue-400">{item?.symbol}</span>
-                          <span class="text-white"
-                            >{item?.name.length > charNumber
-                              ? item?.name.slice(0, charNumber) + "..."
-                              : item?.name}</span
-                          >
-                        </div>
-
-                        <div class="text-white font-medium ml-auto mr-2">
-                          {item?.type}
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                {/each}
-              {:else if showSuggestions && searchBarData?.length > 0}
-                <div class="text-start text-sm font-semibold text-white mb-2">
-                  Suggestions
-                </div>
-                {#each searchBarData as item}
-                  <li class="border-b border-gray-600">
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-label-has-associated-control -->
-                    <a
-                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-                      on:click={() => searchBarTicker(item?.symbol)}
-                      class="mb-2 {item?.symbol === focusedSuggestion
-                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
-                        : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-md flex justify-start items-center p-2 text-white group'}"
-                    >
-                      <div class="flex flex-row items-center w-full">
-                        <div class="flex flex-col ml-1">
-                          <span class="text-blue-400">{item?.symbol}</span>
-                          <span class="text-white"
-                            >{item?.name.length > charNumber
-                              ? item?.name.slice(0, charNumber) + "..."
-                              : item?.name}</span
-                          >
-                        </div>
-
-                        <div class="text-white font-medium ml-auto mr-2">
-                          {item?.type}
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                {/each}
-              {:else if showSuggestions && searchBarData?.length === 0}
-                <li>
-                  <label
-                    class="flex items-center p-2 text-white hover:text-white hover:bg-primary rounded group"
-                  >
-                    <svg
-                      class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
-                      width="12"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
-                      />
-                    </svg>
-                    <span>No results found</span>
-                  </label>
-                </li>
-              {/if}
-            </ul>
-          </div>
-        </div>
-
-        <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
-          <svg
-            class="w-6 h-6 inline-block mb-0.5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            ><path
-              fill="#fff"
-              d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
-            /></svg
-          >
-        </label>
-      </div>
-    </div>
-  </div>
-{/if}
 
 <!--End Drawer Sidewise for mobile-->
+<!--End Drawer Sidewise for mobile-->

src/routes/+layout.svelte

@@ -11,7 +11,6 @@
   import Footer from "$lib/components/Footer.svelte";
   import Searchbar from "$lib/components/Searchbar.svelte";
   import NotificationBell from "$lib/components/NotificationBell.svelte";
-  import { goto } from "$app/navigation";
   //import PullToRefresh from '$lib/components/PullToRefresh.svelte';
 
   //import DiscountBanner from '$lib/components/DiscountBanner.svelte';
@@ -92,7 +91,7 @@
     const output = event.data?.output;
     notificationList = output?.notificationList;
     hasUnreadElement = output?.hasUnreadElement;
-    $numberOfUnreadNotification = output?.numberOfUnreadNotification?.length;
+    numberOfUnreadNotification.set(output?.numberOfUnreadNotification?.length);
     //pushNotification()
   };
 
@@ -164,7 +163,7 @@
       (item?) => !item?.readed,
     );
     hasUnreadElement = numberOfUnreadNotification?.length !== 0 ? true : false;
-    $numberOfUnreadNotification = numberOfUnreadNotification?.length;
+    numberOfUnreadNotification.set(numberOfUnreadNotification?.length);
   }
 
   let Cookie;
@@ -810,21 +809,15 @@
           <span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
         </a>
 
-        <div class="relative ml-auto">
+  
-          <!--
+
-            <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-white" />
+          <div class="relative w-full flex flex-row justify-end sm:justify-between items-center">
-            <Input
+            <div class="sm:w-full lg:ml-16">
-              type="search"
-              placeholder="Search..."
-              class="w-full rounded-md bg-[#202327] placeholder-gray-400 border-none pl-8 md:w-[300px] xl:w-[700px] border-transparent focus:border-transparent focus:ring-0 "
-              autocomplete="off"
-              />
-            -->
             <Searchbar />
-
-          <NotificationBell {data} {hasUnreadElement} />
           </div>
+            <NotificationBell {data} {hasUnreadElement} />
   
+            <div class="ml-3">
               {#if data?.user}
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild let:builder>
@@ -882,6 +875,13 @@
             </a>
           {/if}
             </div>
+
+            
+          </div>
+  
+
+     
+      </div>
       <div>
         <div class="flex w-full">
           <div class="hidden xl:block xl:w-1/6">