Fix

Author: timmo001

src/components/Header.tsx

@@ -18,15 +18,9 @@ import useStyles from "@/styles/jss/components/header";
 
 type ColorExpanded = PropTypes.Color | "transparent";
 
-interface ChangeColorOnScroll {
-  color: ColorExpanded;
-  height: string | number;
-}
-
 interface HeaderProps {
   absolute?: string;
   brand?: string;
-  changeColorOnScroll?: ChangeColorOnScroll;
   color?: ColorExpanded;
   fixed?: boolean;
   rightLinks?: ReactElement;
@@ -37,49 +31,17 @@ function Header(props: HeaderProps): ReactElement {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [repositoryData] = useRepository();
 
-  useEffect(() => {
-    if (props.changeColorOnScroll) {
-      window.addEventListener("scroll", headerColorChange);
-    }
-    return function cleanup() {
-      if (props.changeColorOnScroll) {
-        window.removeEventListener("scroll", headerColorChange);
-      }
-    };
-  }, []);
-
   function handleDrawerToggle(): void {
     setMobileOpen(!mobileOpen);
   }
 
-  function headerColorChange(): void {
-    const { color, changeColorOnScroll } = props;
-    const windowsScrollTop = window.pageYOffset;
-    if (windowsScrollTop > changeColorOnScroll.height) {
-      document.body
-        .getElementsByTagName("header")[0]
-        .classList.remove(classes[color]);
-      document.body
-        .getElementsByTagName("header")[0]
-        .classList.add(classes[changeColorOnScroll.color]);
-    } else {
-      document.body
-        .getElementsByTagName("header")[0]
-        .classList.add(classes[color]);
-      document.body
-        .getElementsByTagName("header")[0]
-        .classList.remove(classes[changeColorOnScroll.color]);
-    }
-  }
-
   const { color, rightLinks, brand, fixed, absolute } = props;
 
   const theme = useTheme();
   return (
     <AppBar
       className={clsx({
         [classes.appBar]: true,
-        [classes[color]]: color,
         [classes.absolute]: absolute,
         [classes.fixed]: fixed,
       })}