Breadcrumbified the navbar

Author: MilesBHuff

TODO.md

@@ -6,7 +6,6 @@ My personal remaining TODO.
 - In the ReadMe, explain what changes might be needed if this app were intended to be run in a "concurrent" environment.
 
 ## Bonus:
-- *Change debug navbar into breadcrumb that remembers search term while viewing Pokémon (and update the readme to reflect this (#Design))*
 - *When visiting a search page, add it to the search history.  (useful for when people visit from a bookmark)*
 - *Make it so that pressing the down arrow while the search history dropdown is open will move the focus into the dropdown*
 - *Allow the user to remove history entries with an "X" button, like exists in the searchbar*

frontend/app/src/layout/nav.tsx

@@ -1,40 +1,39 @@
-import {FunctionComponent} from 'react';
+import {useAppSelector} from '@/redux/hooks.ts';
+import {Fragment, FunctionComponent} from 'react';
 import {Link, useLocation} from 'react-router-dom';
 
 ////////////////////////////////////////////////////////////////////////////////
 //TODO: Make `Nav` into a breadcrumb, rather than just a tool for debugging.
 export const Nav: FunctionComponent = () => {
     const location = useLocation();
+    const history = useAppSelector(state => state.search.history);
 
     //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //
     const entries: Array<{
         name: string,
         path: string,
+        args?: string,
     }> = [{
         name: 'Home',
         path: '/',
     }, {
         name: 'Search',
         path: '/search',
+        args: `?q=${history[0]}`,
     }, {
         name: 'Pokémon',
         path: '/pokemon',
-    }, {
-        name: '404',
-        path: '/error',
     }];
 
     //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //
     return (
-        <nav style={{display: 'none'}}>
+        <nav>
             <ul>{
-                entries.map((entry, index) =>
-                    <li key={index}>{
-                        entry.path !== location.pathname
-                            ? <Link to={entry.path}>{entry.name}</Link>
-                            : <a className="activated">{entry.name}</a>
-                    }</li>
-                )
+                entries.map((entry, index) => <Fragment key={index}>{
+                    entry.path !== location.pathname
+                        ? <li><Link to={entry.path + (entry.args ?? '')}>{entry.name}</Link></li>
+                        : <li className="hide-following"><a className="activated">{entry.name}</a></li>
+                }</Fragment>)
             }</ul>
         </nav>
     );

frontend/app/src/styles/elements/_layout.scss

@@ -93,6 +93,7 @@ nav {
                 display: block;
                 @include button($color-nav-background);
                 border-radius: unset;
+                
             }
         }
     }

frontend/app/src/styles/utilities/_overrides.scss

@@ -4,6 +4,9 @@
 .error {
     color: $color-error;
 }
+.hide-following ~* {
+    display: none;
+}
 .raw-data {
     font-family: $font-mono;
 }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pokedex",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "LAGPL-3.0-or-later",
   "description": "A web application that displays data on Pokémon®. Not affiliated with Nintendo®.",
   "keywords": [