Hervorhebung des aktuellen Navigationselements für Unterseiten in GatsbyJS

Seit ich GatsbyJS entdeckt habe, baue ich Websites — sofern nicht gute Gründe dagegen sprechen — nur noch mit diesem großartigen Framework. Im Lauf des letzten Jahres habe ich bereits vier Seiten damit umgesetzt:

Mit jeder Seite habe ich dazu gelernt und besser verstanden, wie man die Dinge bestenfalls realisiert. Gemeinhin ist es wünschenswert den aktuellen Bereich in der Navigation der Website kenntlich zu machen (der ggf. desorientierte Benutzer wird es einem danken). Und zwar sowohl für die Einstiegsseite als auch für alle Unterseiten innerhalb der Seitenhierarchie. Gatsby bietet hierfür in seiner <Link> Komponente das activeClassName-Property, welche an den intern verwendeten Reach Router weitergegeben wird:

import { Link } from 'gatsby';

// ...

<Link to="/about" activeClassName="active">
  About
</Link>

Die Logik dahinter ist einfach: Sofern genau diese Seite angezeigt wird, wird die CSS-Klasse active angefügt und man kann den Link nach eigenem Ermessen entsprechend gestalten. Das ist schön, aber normalerweise wahrscheinlich nur die Hälfte dessen, was man eigentlich erzielen möchte. Dieser Blogpost ist beispielsweise eine Unterseite der /blog Übersichtsseite. Wenn ich einen Blogpost wie diesen öffne, soll selbstverständlich auch auf dieser Seite “Blog” in der Navigation visuell hervorgehoben werden.

Auch dies lässt sich durch eine einfache Anpassung realisieren:

import React from 'react';
import { Link } from 'gatsby';

const Menu = () => {
  const isPartiallyActive = ({ isPartiallyCurrent }) => {
    return isPartiallyCurrent ? { className: 'active' } : null;
  };

  return (
    <nav>
      <Link to="/" activeClassName="active">
        About
      </Link>
      <Link to="/projects" getProps={isPartiallyActive}>
        Projects
      </Link>
      <Link to="/blog" getProps={isPartiallyActive}>
        BlogIndex
      </Link>
    </Nav>
  );
};

export default Menu;