Added NavMenu component

daily-thought-frontend/src/components/navigation/NavBar.tsx

 import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
 import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { PhotoIcon, UserCircleIcon } from '@heroicons/react/24/solid'
+import { UserCircleIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'
 import { User } from '@/types/user'
+import NavMenu from './NavMenu'
+import BasicField from '../form/BasicField'
 
 const navigation = [
   { name: 'My Feed', href: '/feed', current: true }
@@ -23,7 +25,36 @@ type NavBarProps = {
 const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
   children,
   user
-}) =>  {  
+}) =>  { 
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [searchResults, setSearchResults] = useState([]);
+
+  const handleSearch = async (query: string) => {
+    setSearchQuery(query);
+
+    const JSONdata = JSON.stringify({query: query})
+    const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/search`
+    const options = {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSONdata,
+    }
+    const response = await fetch(endpoint, options)
+    const result = await response.json()
+
+    if(result.error !== undefined){
+      setError(result.error.error)
+    } else {
+      if(result.token !== undefined && result.username !== undefined){
+        sessionStorage.setItem('username', result.username)
+        sessionStorage.setItem('token', result.token) 
+        Router.push("/feed")
+      } 
+    }
+  }
+
   return (
     <>
       <div className="min-h-full min-w-full">
@@ -63,9 +94,22 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                   {user !== undefined && 
                     <div className="hidden md:block">
                       <div className="flex items-center">
+
+                        <NavMenu icon={<MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true"/>} width={"w-64"}>
+                          <BasicField name="search" placeholder="Search users" onChange={handleSearch}/>
+
+                          {!searchQuery &&
+                            <div className='flex items-center justify-center'>
+                              <p className='text-xs text-gray-500'>
+                                Enter a search query to add friends
+                              </p>
+                            </div>
+                          }
+                        </NavMenu>
+
                         <button
                           type="button"
-                          className="rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+                          className="ml-3 rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
                         >
                           <span className="sr-only">View notifications</span>
                           <BellIcon className="h-6 w-6" aria-hidden="true" />

daily-thought-frontend/src/components/navigation/NavMenu.tsx

+import { Menu, Transition } from "@headlessui/react";
+import { FC, Fragment, PropsWithChildren } from "react";
+
+type NavMenuProps = {
+  icon: any,
+  width: string
+}
+
+const NavMenu: FC<PropsWithChildren<NavMenuProps>> = ({
+  children,
+  icon,
+  width
+}) => {
+  return (
+    <Menu as="div" className="relative ml-3">
+      <div>
+        <Menu.Button className="ml-3 rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
+          {icon}
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${width}`}>
+          {/* <div className='w-full border-b'>
+            <p className='block px-4 py-2 text-xs text-gray-400'>asdf</p>
+          </div> */}
+          <div className="p-2">
+            {children}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  )
+}
+
+export default NavMenu;
\ No newline at end of file