/snap

Frontend Mentor - Intro section with dropdown navigation solution

Primary LanguageJavaScript

Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
  • View the optimal layout for the content depending on their device's screen size
  • See hover states for all interactive elements on the page

Screenshot

Active/Hover states

Links

My process

Built with

What I learned

I learned how you can add different utility classes to elements using a ternary operator when some state changes.

import { useState } from "react";

const foo = (props) => {
  const [bar, setBar] = useState(false);
  return (
    <div className={bar ? "pl-3 text-medium-gray" : "hidden"}>
      {props.value}
    </div>
  );
};

Also, for some reason, tailwind doesn't have class chaining at breakpoints.

So instead of doing something like this

<div className="md:(w-full h-full flex flex-row-reverse)">foo</div>

you have to add the md: breakpoint prefix to every class like this

<div className="md:w-full md:h-full md:flex md:flex-row-reverse">foo</div>

Useful resources

  • Kevin Powell - Hats off to this guy, best CSS instructor in the game. A must watch for every FE developer.

Author