Space tourism website w/ react router, framer motion

My first experience with react router and framer motion. Actually did this solution a while ago, so react router is set up using older syntax.

Stuff worth mentioning:

• Tried different approaches of using framer motion, and ended up just writing its code into styled().attrs

  const Header = styled(motion.h1).attrs({
    variants: {
      hidden: { opacity: 0, y: 100 },
      show: { opacity: 1, y: 0, transition: { duration: 0.8 } },
      exit: { opacity: 0, y: 100, transition: { duration: 0.5 } },
    },
  })`
    padding: 0;
    ...
  `
  

  Don't know what are the best practices of pairing styled components with framer motion, but I like this approach. Animations belong to styles, so why don't just write them within a styled component?

• Using framer motion with react router was a bit tricky. I couldn't find a way for nested routes to animate properly on exit. So the links in the navigation bar trigger exit animations, but the nested links don't. And the white underline doesn't animate between links. Maybe should've added another layer of AnimatePresence? Or add a key attribute to nested routes the same way it's on the Routes so react explicilty rerenders them? I probably tried both, can't remember. Anyway it doesn't matter since react-router now has different syntax.

Stuff from todo that I didn't do:

• preloading of images
• make drawer scrollable on small screen heights
• extract isMdUp and isLgUp to a custom hook (useThemeBreakpoint?)
• extract duplicate styled components
• make sub routes swipeable on mobile?