Navigating Questions

The Question component currently shows only the current question. You want to show links to the other questions in a sidebar on the left, so you insert an ordered list before the current question element:

// ...
import {Link, useParams, useNavigate} from 'react-router-dom';

export function Question(props) {
  // ...

  return (
    <div className="question-page">
      <ol className="question-picker">
        {quiz.questions.map(question =>
          <li key={question.title}>
            <Link
              to={`/quiz/${quiz.slug}/question/${question.slug}`}
            >{question.title}</Link>
          </li>
        )}
      </ol>
      {/* ... */}
    </div>
  );
}

To make the sidebar and the current question appear side-by-side, you make the page a horizontal Flex container. You also flip the color scheme for the sidebar by adding these styles in App.css:

.question-page {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.question-picker {
  margin: 0;
  padding: 40px;
  background-color: black;
  color: white;
}

There are a couple of issues with the links. First, their default colors are likely too dark for the black background. Second, the link for the question that is currently loaded looks just like all the other links. You believe it would be helpful to indicate where the user is at within this list by styling the current link differently, just like other sites change the background or foreground colors of the current page's navlink.

React Router provides a special NavLink component that checks to see if its to prop matches the path in the URL. If the path does match, then the class active is added to the element. You switch your Link component to NavLink and add a className prop:

// ...
import {NavLink, useParams, useNavigate} from 'react-router-dom';

export function Question(props) {
  // ...

  return (
    <div className="question-page">
      <ol className="question-picker">
        {quiz.questions.map(question =>
          <li key={question.title}>
            <NavLink
              to={`/quiz/${quiz.slug}/question/${question.slug}`}
              className="question-link"
            >{question.title}</NavLink>
          </li>
        )}
      </ol>
      {/* ... */}
    </div>
  );
}

In App.css, you lighten the color of all the question links and mark the active link by appending an arrow using a CSS pseudo-element:

.question-link {
  color: orange;
  position: relative;
}

.question-link.active::after {
  position: absolute;
  content: '⬅';
  margin-left: 4px;
  color: white;
}

Try clicking through the quiz questions using the navigation links. Are the links more readable? Do you see the current question marked with an arrow?