Fixed navbar

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

@@ -135,14 +135,14 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
               </div>
 
               <Disclosure.Panel className="md:hidden">
-                <div className="space-y-1 px-2 pt-2 pb-3 sm:px-3 bg-white">
+                <div className="space-y-1 px-2 pt-2 pb-3 sm:px-3 bg-c-pink">
                   {navigation.map((item) => (
                     <Disclosure.Button
                       key={item.name}
                       as="a"
                       href={item.href}
                       className={classNames(
-                        item.current ? 'bg-white text-c-pink' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                        item.current ? 'bg-c-pink text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                         'block rounded-md px-3 py-2 text-base font-medium'
                       )}
                       aria-current={item.current ? 'page' : undefined}
@@ -151,8 +151,8 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                     </Disclosure.Button>
                   ))}
                 </div>
-                <div className="border-t border-gray-200 pt-4 pb-3 bg-white">
-                  <div className="flex items-center px-5">
+                <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="flex-shrink-0">
                       <img className="h-10 w-10 rounded-full" src={user?.Avatar} alt="" />
                     </div>
@@ -168,13 +168,13 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                       <BellIcon className="h-6 w-6" aria-hidden="true" />
                     </button>
                   </div>
-                  <div className="mt-3 space-y-1 px-2">
+                  <div className="mt-1 space-y-1 px-2">
                     {userNavigation.map((item) => (
                       <Disclosure.Button
                         key={item.name}
                         as="a"
                         href={item.href}
-                        className="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-pink-300 hover:text-green-200"
+                        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"
                       >
                         {item.name}
                       </Disclosure.Button>