Created a menu that slides in from the side and has an opaque mask

To do this I used:

• The React Springs library

  const maskTransitions = useTransition(showMenu, {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
      })
  

• Fontawesome Icon's

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  

• I also created a custom tailwind class

  // tailwind.config.js
  extend: {
      backgroundColor:{
        'black-t-50': 'rgba(0,0,0,0.5)'
      }
    },
  

I feel a bit bad though because I did a lot of copying from the Udemy course ... But i did have to do some thinking for myself because che react Springs library had been updated so the original code was broken.