diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index 37599979f8672bc50d7bf75af3d9d7a852edd0f3..732b52f8495a3e7a05ded41f04ef40f1f0473f1c 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -1,12 +1,11 @@
-import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
-import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { FC, PropsWithChildren } from 'react'
+import { Disclosure, Menu } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { UserCircleIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'
import { User } from '@/types/user'
import NavMenu from './NavMenu'
-import BasicField from '../form/BasicField'
-import useDebounce from '@/hooks/useDebounce'
import UserSearch from '../form/UserSearch'
+import MenuTransition from './MenuTransition'
const navigation = [
{ name: 'My Feed', href: '/feed', current: true }
@@ -98,15 +97,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
</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"
- >
+ <MenuTransition>
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className='w-full border-b'>
<p className='block px-4 py-2 text-sm text-gray-700 font-bold'>{`Hi, ${user?.firstName || user?.username}`}</p>
@@ -127,7 +118,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
</Menu.Item>
))}
</Menu.Items>
- </Transition>
+ </MenuTransition>
</Menu>
</div>
</div>
@@ -136,7 +127,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
{user !== undefined &&
<div className="-mr-2 flex md:hidden">
{/* Mobile menu button */}
- <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-c-pink hover:bg-c-pink hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
+ <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-c-pink p-2 text-white hover:bg-white hover:text-c-pink focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -149,8 +140,9 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
</div>
</div>
+ <MenuTransition>
<Disclosure.Panel className="md:hidden">
- <div className="space-y-1 px-2 pt-2 pb-3 sm:px-3 bg-c-pink">
+ <div className="px-2 pt-2 sm:px-3 bg-c-pink">
{navigation.map((item) => (
<Disclosure.Button
key={item.name}
@@ -166,37 +158,37 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
</Disclosure.Button>
))}
</div>
- <div className=" pt-4 pb-3 bg-c-pink ">
- <div className="flex items-center px-5 bg-white mx-2 py-2 rounded-md">
+ <div className=" pt-4 pb-3 bg-white-50 shadow-lg">
+ <div className="flex items-center px-2 bg-white mx-3 py-2 rounded-md shadow-sm">
<div className="flex-shrink-0">
{user && user.profile.length > 0 &&
- <img className="h-10 w-10 rounded-full" src={user?.profile} alt="" />
+ <img className="h-12 w-12 rounded-full" src={user?.profile} alt="" />
}
{user && user.profile.length === 0 &&
- <UserCircleIcon className='h-10 w-10 rounded-full text-gray-300 flex items-center justify-center'>{user.username[0]}</UserCircleIcon>
+ <UserCircleIcon className='h-12 w-12 rounded-full text-gray-300 flex items-center justify-center'>{user.username[0]}</UserCircleIcon>
}
</div>
- <div className="ml-3">
+ <div className="ml-3 flex flex-col justify-between h-full">
{user?.firstName && <div className="text-base font-medium leading-none text-grey-600">{`${user?.firstName || ""} ${user?.lastName || ""}`}</div>}
<div className="text-sm font-medium leading-none text-gray-400">{`@${user?.username}`}</div>
</div>
<button
type="button"
- className="ml-auto flex-shrink-0 rounded-full bg-c-pink p-1 text-white hover:text-c-pink hover:bg-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+ className="ml-auto flex-shrink-0 rounded-full text-c-pink p-1 hover:text-c-pink hover:bg-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" />
</button>
</div>
- <div className="mt-1 space-y-1 px-2">
+ <div className="mt-4 space-y-1 px-2">
{userNavigation.map((item) => (
<Disclosure.Button
key={item.name}
as="a"
href={item.href}
- className="block bg-white rounded-md px-3 py-2 text-base font-medium text-c-pink hover:bg-pink-300 hover:text-green-200"
+ className="block bg-c-pink rounded-md px-3 py-2 text-base font-medium text-white hover:bg-white hover:text-c-pink"
>
{item.name}
</Disclosure.Button>
@@ -204,6 +196,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
</div>
</div>
</Disclosure.Panel>
+ </MenuTransition>
</>
)}
</Disclosure>