FB-333-fix-navbar

[paulinabjacykowska]

In this PR I added:

• fix for issue with navbar being on top of other components, which is described here.
• changes described as point 17 in https://docs.google.com/document/d/1bdlzlPVovDcIBtMnX-aNe7LsAQRjr5jBt3qRn28QtwQ/edit
• changes to ensure that while user is on docs or demo page, the navbar has white background from the beginning

[paulinabjacykowska]

What do you think about creating a custom hook like:

import { useHistory } from '@docusaurus/router';
import { useEffect } from 'react';

const handleNavbarScroll = () => {
  const navbar = document.querySelector('.navbar');
  if (navbar) {
    navbar.classList.toggle('scroll', window.scrollY > window.innerHeight - 60);
  }
};

const handleNavbarBackground = () => {
  const navbar = document.querySelector('.navbar');
  if (navbar) {
    navbar.classList.add('homepage-navbar');
  }
};

export const useNavbarStyles = () => {
  const history = useHistory();

  useEffect(() => {
    history.location.pathname === '/' && handleNavbarBackground();
  }, [history.location.pathname]);

  useEffect(() => {
    window.addEventListener('scroll', handleNavbarScroll);

    return () => {
      window.removeEventListener('scroll', handleNavbarScroll);
    };
  }, []);
};

?

We would have all of the logic in a single file and we wouldn't pollute the LayoutBase component with additional logic. Instead of it, we'll simply call one hook.

I think this looks extremely nice! 🚀 To be honest I learned so much about good practices and ideas to implement in a React project since I am on Forminer, thanks! 🙌

[mkaliszewski]

I think this looks extremely nice! rocket To be honest I learned so much about good practices and ideas to implement in a React project since I am on Forminer, thanks! raised_hands

So happy to hear that! :smile: