Intro section with dropdown navigation (React + Tailwind + Dark mode)

😍 What a brilliant and inspiring solution to this challenge!

I really love how you structured your project and that you really nailed the accessibility (something I need to work on). The transitions are really smooth and the dark mode is a great addition!

The only thing I noticed with the dark mode is that if I leave the site after switching to the dark theme, and then come back again, there is a slight delay for the dark theme to load, so it goes from light to dark really quick. But maybe that's something that you were able to solve with the advice in the first comment?

The responsiveness is top notch, although the layout could be a bit improved on tablet views imo. But I think you have some real styling chops here! I'm still trying to wrap my mind on how you handle the arrow icons and the direction they point at to be honest 🤯

And my last suggestion to make your solution even better would be to render the data more dynamically, as currently much of the menu text is hard coded. You do map over the menu items to create the links, but I would take it a step further and extract the data to a separate array, and refer to it where needed in your code. That way it's all easy to find in one place, and easier to maintain as well in the future should the menu grow.

But fabulous job overall, and I bookmarked your solution for future reference!

Hey melvin,

The solution looks good and the responsiveness is also pretty good.

a few things to note,

In the ThemeSwitcher Component

 <input
        type="checkbox"
        className="m-t absolute top-0 left-0 z-10 h-full w-full cursor-pointer appearance-none"
        checked={darkMode}
        role="switch"
        aria-checked={darkMode}
        onChange={() => setDarkMode(!darkMode)}
      />

when calling the setDarkMode you should prefer to do it using a function since the state update depends on previous state.

 <input
        type="checkbox"
        className="m-t absolute top-0 left-0 z-10 h-full w-full cursor-pointer appearance-none"
        checked={darkMode}
        role="switch"
        aria-checked={darkMode}
        onChange={() => setDarkMode((prev) =>  !prev)}
      />

this should be preferred because sate updates happen asynchronously, check out this resources for more details

using a function in setState medium article

stack overflow question about function in setState

The effect you are running for theme switching, this might affect perfomance as the app gets bigger

useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

another way to do this would be to store the theme preference in an app wide state like Context API or redux store and use it in the components.

Overall good solution, well done 👏

Wow bro! La manera en como estructuras tus proyectos y los haces lucir es impresionante, inclusive los que son sencillos como este. Me sirven de guía para estructurar mejor los míos. Excelente trabajo!

Very Nice Chief👌🏾

Amazing!

This absolutely amazing. Your dropdown motion is quite unique. Great job!

Good Job bro

then how do u manage that extension to the PC screen size . I had difficulty to use that my pc screen size is 1330px and the design is 1440 px so is there any trick to match the design and actual screen size in pixel perfect

to do list its all together you missing a space love you big time teach me c:

Melvin this is amazing... Can we connect on linkedIn..? I have some questions

Did u use pixel perfect extension ?