```javascript
import React, { Component } from "react";
import { Link } from "react-router-dom";

import Logo from "../Logo/Logo";

import "./Header.scss";

/**
 * Header component.
 */

class Header extends Component {
  constructor() {
    super();

    this.state = {
      open: false,
      scrolled: false
    };
  }

  /**
   * Lifecycle methods.
   */

  componentDidMount = () => {
    document.addEventListener("scroll", this.handleScroll);
  };

  componentWillUnmount = () => {
    document.removeEventListener("scroll", this.handleScroll);
  };

  /**
   * Handle scroll.
   */

  handleScroll = () => {
    if (window.scrollY > 0) {
      this.setState({ scrolled: true });
    } else {
      this.setState({ scrolled: false });
    }
  };

  /**
   * Toggle the state of navigation and toggle.
   */

  toggle = () => {
    this.setState({ open: !this.state.open });
  };

  render = () => {
    const classes = {
      navigation: this.state.open
        ? "navigation navigation--open"
        : "navigation",
      toggle: this.state.open
        ? "hamburger hamburger--spin is-active"
        : "hamburger hamburger--spin",
      header: this.state.scrolled ? "header header--background" : "header"
    };

    return (
      <>
        <header className={classes.header}>
          <Logo />
          <button
            className={classes.toggle}
            onClick={this.toggle}
            type="button"
          >
            <span className="hamburger-box">
              <span className="hamburger-inner" />
            </span>
          </button>
        </header>
        <section className={classes.navigation}>
          <nav>
            <ul>
              <li>
                <Link to="/" onClick={this.toggle} className="navigation__item">
                  Home
                </Link>
                <Link
                  to="/contact"
                  onClick={this.toggle}
                  className="navigation__item"
                >
                  Contact
                </Link>
              </li>
            </ul>
          </nav>
        </section>
        <section className="spacer" />
      </>
    );
  };
}

export default Header;
```