Skip to content
Submitted over 2 years ago

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

accessibility, react, tailwind-css
Melvin Aguilar 🧑🏻‍💻•61,040
@MelvinAguilar
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

Help:

  • Any resource or suggestion on how to create or improve the accessibility of a switcher theme component is welcome; although this is the code for my component, I will be grateful for any suggestions.

I added:

  • 🌔 Light and Dark mode
  • 🔧 Using localStorage to save theme preferences

Built With:

  • React-JS
  • TailwindCSS
  • Yarn - Vite - Prettier

Any suggestions on how I can improve and reduce unnecessary code are appreciated!

Thank you. 😊✌️

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Amélie•330
    @aweliego

    😍 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!

    Marked as helpful
  • P
    Karthik suryadevara•865
    @karthik2265

    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 👏

    Marked as helpful
  • deivid182•150
    @Deivid182

    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!

  • DEE•240
    @Multimarix

    Very Nice Chief👌🏾

  • Account deleted

    Amazing!

  • August Duet•250
    @ajduet

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

  • JeremieSehou•10
    @JeremieSehou

    Good Job bro

  • Mohmed elshaarawy•830
    @MohmedElshaarawy

    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

  • Javier•40
    @Kritical719

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

  • Sakthivel•50
    @06Sakthivel

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

  • yishak abrham•2,150
    @yishak621

    Did u use pixel perfect extension ?

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord