fix menu background on non-scrollable page

kontent-ai · Jun 11, 2024 · 55abec1 · 55abec1
1 parent 05d57ee
commit 55abec1
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/components/shared/ui/menu.tsx b/components/shared/ui/menu.tsx
@@ -147,13 +147,19 @@ export const Menu: FC<Props> = (props) => {
   const [activeMenu, setActiveMenu] = useState<string | number>(-1);
   const [smallMenuActive, setSmallMenuActive] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isScrollable, setIsScrollable] = useState(false)
+  const router = useRouter();
 
   const handleMenuClick = (menuId: string | number): void => {
     setActiveMenu(menuId === activeMenu ? -1 : menuId);
   };
 
   useEffect(() => {
-    const handleScroll = () => {
+    setIsScrollable(document.body.scrollHeight > window.innerHeight);
+  }, [router.asPath]);
+
+  useEffect(() => {
+    const handleScroll = () => { 
       if (window.scrollY > 50) {
         setIsScrolled(true);
       } else {
@@ -170,7 +176,7 @@ export const Menu: FC<Props> = (props) => {
   return (
     <div
       className={`w-full fixed z-50 transition-all ease-in-out duration-200 ${
-        (isScrolled || smallMenuActive) ? mainColorBgClass[siteCodename] :  "bg-opacity-0"
+        (!isScrollable || isScrolled || smallMenuActive) ? mainColorBgClass[siteCodename] :  "bg-opacity-0"
       }`}
     >
       <div className="flex justify-between items-center mx-auto max-w-screen-xl md:h-16 pr-4">
@@ -183,11 +189,11 @@ export const Menu: FC<Props> = (props) => {
               className="flex items-center"
             >
               <span className="pr-3">
-                <Image
-                  src="/logo.png"
-                  alt="logo"
-                  width={30}
-                  height={30}
+                <Image
+                  src="/logo.png"
+                  alt="logo"
+                  width={30}
+                  height={30}
                 />
               </span>
               <span className="font-bold">Ficto</span>