fix: vertical overflow issue in the home page (#240)

* fix: vertical overflow issue in the home page

* fix: fixed issue generated in the PR

components/TopBar/TopBar.tsx

@@ -7,7 +7,7 @@ export const TopBar = ({ header }: { header?: string }) => {
   const router = useRouter();
   const category = router.asPath.replace("/", "");
   return (
-    <div className="xs:overflow-x-hidden mb-4 flex flex-col-reverse items-center md:flex-row md:justify-between md:py-4">
+    <div className="sticky top-0 dark:bg-[#101623] bg-gray-100 transition-all ease-in duration-300 w-full xs:overflow-x-hidden mb-4 flex flex-col-reverse items-center md:flex-row md:justify-between md:py-4">
       <div className="my-2 flex items-center place-self-start text-lg dark:text-gray-300 sm:text-3xl">
         <FaSlackHash className="mt-1 mr-2 text-gray-600 dark:text-gray-300" />
         <span className="text-gray-900 dark:text-gray-100 uppercase font-bold">