Add image popup, price to float in search

package.json

@@ -21,9 +21,10 @@
         "vue": "^3.4.15"
     },
     "dependencies": {
+        "@coreui/vue": "^4.10.2",
         "@vueform/multiselect": "^2.5.1",
         "flowbite": "^2.1.1",
-        "flowbite-vue": "^0.1.0",
+        "flowbite-vue": "file:///Users/jaro/Devel/flowbite-vue",
         "laravel-echo": "^1.13.0",
         "pusher-js": "^7.3.0",
         "sweetalert2": "^11.4.23",

resources/js/Layouts/GuestLayout.vue

@@ -3,12 +3,14 @@ import Swal from 'sweetalert2';
 import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
 import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
 import LogoIkea from '@/assets/Ikea_logo.svg';
+import UserOptions from './UserOptions.vue';
 import {
     FwbSelect,
     FwbNavbar,
     FwbNavbarCollapse,
     FwbNavbarLink,
     FwbNavbarLogo,
+    FwbButton,
 } from 'flowbite-vue';
 
 const menu = ref([])
@@ -43,6 +45,10 @@ onMounted(fetch_menu);
 
         <template #default="{ isShowMenu }">
             <fwb-navbar-collapse :is-show-menu="isShowMenu" v-if="menu.length > 0">
+                <fwb-navbar-link>
+                    <user-options></user-options>
+
+                </fwb-navbar-link>
                 <fwb-navbar-link :link="route(menu[0].route_or_url)">
                     Home
                 </fwb-navbar-link>
@@ -52,9 +58,11 @@ onMounted(fetch_menu);
                     </fwb-navbar-link>
                 </template>
             </fwb-navbar-collapse>
+
         </template>
+        <template #mega-menu>TEST</template>
     </fwb-navbar>
     <div class="m-3">
         <slot />
     </div>
-</template>
+</template>

resources/js/Layouts/MegaMenu.vue

@@ -0,0 +1,212 @@
+<template>
+  <nav class="bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-900">
+    <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
+      <a
+        href="https://flowbite.com"
+        class="flex items-center space-x-3 rtl:space-x-reverse"
+      >
+        <img
+          src="https://flowbite.com/docs/images/logo.svg"
+          class="h-8"
+          alt="Flowbite Logo"
+        />
+        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
+          >Flowbite</span
+        >
+      </a>
+      <button
+        data-collapse-toggle="mega-menu-full-cta"
+        type="button"
+        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        aria-controls="mega-menu-full-cta"
+        aria-expanded="false"
+      >
+        <span class="sr-only">Open main menu</span>
+        <svg
+          class="w-5 h-5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 17 14"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 1h15M1 7h15M1 13h15"
+          />
+        </svg>
+      </button>
+      <div
+        id="mega-menu-full-cta"
+        class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
+      >
+        <ul
+          class="flex flex-col mt-4 font-medium md:flex-row md:mt-0 md:space-x-8 rtl:space-x-reverse"
+        >
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              aria-current="page"
+              >Home</a
+            >
+          </li>
+          <li>
+            <button
+              id="mega-menu-full-cta-dropdown-button"
+              data-collapse-toggle="mega-menu-full-cta-dropdown"
+              data-dropdown-placement="bottom"
+              class="flex items-center justify-between w-full py-2 px-3 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+            >
+              Company
+              <svg
+                class="w-2.5 h-2.5 ms-3"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 10 6"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m1 1 4 4 4-4"
+                />
+              </svg>
+            </button>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              >Marketplace</a
+            >
+          </li>
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              >Resources</a
+            >
+          </li>
+          <li>
+            <a
+              href="#"
+              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
+              >Contact</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      id="mega-menu-full-cta-dropdown"
+      class="mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600"
+    >
+      <div
+        class="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6"
+      >
+        <ul class="space-y-4 sm:mb-4 md:mb-0" aria-labelledby="mega-menu-full-cta-button">
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Online Stores
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Segmentation
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Marketing CRM
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Online Stores
+            </a>
+          </li>
+        </ul>
+        <ul class="hidden mb-4 space-y-4 md:mb-0 sm:block">
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Our Blog
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Terms & Conditions
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              License
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+            >
+              Resources
+            </a>
+          </li>
+        </ul>
+        <div class="mt-4 md:mt-0">
+          <h2 class="mb-2 font-semibold text-gray-900 dark:text-white">Our brands</h2>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">
+            At Flowbite, we have a portfolio of brands that cater to a variety of
+            preferences.
+          </p>
+          <a
+            href="#"
+            class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-700"
+          >
+            Explore our brands
+            <span class="sr-only">Explore our brands </span>
+            <svg
+              class="w-3 h-3 ms-2 rtl:rotate-180"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 14 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M1 5h12m0 0L9 1m4 4L9 9"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>

resources/js/Pages/IkeaRoot.vue

@@ -25,7 +25,7 @@ import Popper from "vue3-popper";
 
 const screenWidth = ref(screen.width)
 const screenHeight = ref(screen.height)
-const hover = ref(false);
+const hover = ref(true);
 const hoverImage = ref(null);
 
 const sdropdown = ref([
@@ -334,7 +334,7 @@ const async_search = async () => {
         img: i.mainImageUrl,
         code: i.code,
         url: i.url,
-        price: i.salesPrice,
+        price: parseFloat(i.salesPrice),
         units: i.priceUnit,
         descLong: i.mainImageAlt,
       };
@@ -438,8 +438,32 @@ watch(ccodes, (codes) => {
 </script>
 <template>
   <GuestLayout>
+
     <div class="flex flex-wrap gap-2 justify-center align-middle">
-      <div class="flex flex-col start-0">
+
+            <div id="popup-modal" tabindex="-1" :class="hover ? 'hidden' : ''" class="absolute inset-y-1/3 left-1/3 z-50 justify-center items-center w-full  max-h-full">
+    <div class="relative p-4 w-full max-w-md max-h-full">
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <button @click="hover=true" type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
+                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                </svg>
+                <span class="sr-only">Close modal</span>
+            </button>
+            <div class="p-4 md:p-5 text-center">
+
+
+                <img :src="hoverImage"/>
+                <!-- <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    Yes, I'm sure
+                </button> -->
+                <button @click="hover=true" data-modal-hide="popup-modal" type="button" class="py-2.5 px-5 mt-2 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button>
+            </div>
+        </div>
+    </div>
+
+        </div>
+      <div class="flex flex-col start-0 row-start-1">
         <div
           class="justify-center rounded-md border-black border-8 max-h-[328px]"
         >
@@ -593,7 +617,6 @@ watch(ccodes, (codes) => {
             <template #item-img="{ code, img }">
                 <img
                 v-on:mouseover="onHover"
-                v-on:mouseleave="onHover"
                 class="h-12"
                 :src="img"
                 :alt="code"