feat: Highlight active page

package.json

@@ -80,7 +80,7 @@
     "@types/react-color": "3.0.1",
     "@types/react-dom": "16.9.7",
     "@types/react-redux": "7.1.7",
-    "@types/react-router-dom": "4.3.4",
+    "@types/react-router-dom": "5.1.7",
     "@types/react-virtualized": "9.21.11",
     "@types/tail": "2.0.0",
     "@types/uuid": "3.4.5",

src/renderer/components/Header.tsx

@@ -4,7 +4,7 @@ import { LangContainer } from '@shared/lang';
 import { getLibraryItemTitle } from '@shared/library/util';
 import { GameOrderBy, GameOrderReverse } from '@shared/order/interfaces';
 import * as React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps, useLocation } from 'react-router-dom';
 import { WithPreferencesProps } from '../containers/withPreferences';
 import { Paths } from '../Paths';
 import { SearchQuery } from '../store/search';
@@ -253,12 +253,18 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
   static contextType = LangContext;
 }
 
+type MenuItemProps = {
+  title: string;
+  link: string;
+};
 
 /** An item in the header menu. Used as buttons to switch between tabs/pages. */
-function MenuItem({ title, link }: { title: string, link: string }) {
+function MenuItem({ title, link }: MenuItemProps) {
+  const location = useLocation();
+  const selected = link === '/' ? location.pathname === link : location.pathname.startsWith(link);
   return (
     <li className='header__menu__item'>
-      <Link to={link} className='header__menu__item__link'>{title}</Link>
+      <Link to={link} className={`header__menu__item__link ${selected ? 'header__menu__item__link-selected' : ''}`}>{title}</Link>
     </li>
   );
 }

static/window/styles/fancy.css

@@ -392,6 +392,10 @@ body {
   background-color: var(--layout__header-menu-item-hover-background);
   border-color: var(--layout__header-menu-item-hover-border);
 }
+.header__menu__item__link-selected {
+  font-weight: bold;
+  text-decoration: underline;
+}
 .header__search {
   border: 1px solid var(--layout__primary-outline-color);
   background-color: var(--layout__primary-background);