search page & Add dropdown

Author: khatabwedaa

source/_layouts/nav.blade.php

@@ -1,6 +1,6 @@
 <div class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:space-x-6 xl:space-x-8 lg:items-center">
-    <a class="text-primary hover:underline" href="#">Home</a>
-    <a class="text-gray-500 hover:text-primary hover:underline" href="#">Components</a>
+    <a class="text-primary hover:underline" href="/">Home</a>
+    <a class="text-gray-500 hover:text-primary hover:underline" href="/components">Components</a>
     <a class="text-gray-500 hover:text-primary hover:underline" href="#">Featured</a>
     <a class="text-gray-500 hover:text-primary hover:underline" href="#">Blog</a>
     <a class="text-gray-500 hover:text-primary hover:underline" href="#">Cheatsheet</a>
@@ -16,9 +16,35 @@
     <a href="#" class="px-4 py-2 text-sm font-semibold text-center text-white rounded-md bg-primary hover:bg-teal-300">
         Submit new component
     </a>
-    
-    <button class="flex items-center justify-center space-x-2 focus:outline-none">
-        <img class="object-cover w-8 h-8 border-2 rounded-full border-primary lg:w-10 lg:h-10 " src="https://images.unsplash.com/photo-1502767882403-636aee14f873?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
-        <span class="font-medium text-gray-800 lg:hidden">Jane Doe</span>
-    </button>
+
+    <div class="relative" @mouseover="dropdown = true" @mouseover.away="dropdown = false"  x-data="{ dropdown: true }">
+        <!-- Dropdown toggle button -->
+        <button class="flex items-center justify-center space-x-2 focus:outline-none">
+            <img class="object-cover w-8 h-8 border-2 rounded-full border-primary lg:w-10 lg:h-10 " src="https://images.unsplash.com/photo-1502767882403-636aee14f873?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+            <span class="font-medium text-gray-800 lg:hidden">Jane Doe</span>
+        </button>
+
+        <!-- Dropdown menu -->
+        <div
+            x-show="dropdown" 
+            x-transition:enter="transition ease-out duration-100 transform"
+            x-transition:enter-start="opacity-0 scale-95"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75 transform"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
+            class="absolute right-0 z-20 w-48 py-1 mt-2 bg-white border border-gray-100 rounded-md shadow-xl dark:bg-gray-800">
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-primary hover:text-white dark:hover:text-white">
+                your profile
+            </a>
+
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-primary hover:text-white dark:hover:text-white">
+                Settings
+            </a>
+            <hr>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-primary hover:text-white dark:hover:text-white">
+                Log Out
+            </a>
+        </div>
+    </div>
 </div>

source/index.blade.php

@@ -12,7 +12,7 @@
         <div class="mt-6 bg-white border rounded-md lg:w-96 focus-within:ring ring-primary focus-within:border-teal-500">
             <div class="flex flex-wrap justify-between md:flex-row">
                 <input type="name" class="flex-1 p-2 m-1 text-gray-700 border-none appearance-none focus:outline-none focus:placeholder-transparent focus:ring-0" placeholder="Search Components">
-                <button class="flex justify-center w-full p-2 m-1 text-white transition-colors duration-200 transform rounded-md bg-primary lg:w-auto hover:bg-teal-300">
+                <button class="flex justify-center w-full p-2 m-1 text-white transition-colors duration-200 transform rounded-md bg-primary lg:w-auto hover:bg-teal-300 focus:outline-none focus:bg-teal-300">
                     <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                     </svg>