feat(about): View About info from PageSideBar

[jan-law]

Fixes #266.

Would appreciate some suggestions to improve this design since my current approach causes the bug listed below.

1. In addition to the existing masthead help icon, clicking the "About" nav link on the PageSideBar will display the AboutModal. Unlike the other nav links, users can view the AboutModal by clicking the nav link without logging in.

2. The url http://localhost:9000/about allows users to view/copy a link to the AboutModal. Followed this example to create the modal route: https://reactrouter.com/web/example/modal-gallery
   Note: The example only displays their modal when the route matches “/img/:id”. Since I wanted to display the modal on top of any page, the RouteWithTitleUpdates``path prop is set to location.pathname

Bug: if you open a new tab and enter http://localhost:9000/recordings/about, the modalBackground - which renders the previous web page content in the background - is undefined. The <Switch> will then render the NotFound page. If I instead replace the RouteWithTitleUpdates``path prop to /about on line 204 and comment lines 146-148 in AppLayout, the previous page content does not render in the background behind the modal.

[aptmac]

1. In addition to the existing masthead help icon, clicking the "About" nav link on the PageSideBar will display the AboutModal. Unlike the other nav links, users can view the AboutModal by clicking the nav link without logging in.

What if instead of the nav-bar opening the about modal itself, the about-modal design was extracted into it's own component such that it could be used as a dedicated "about" page and also be fed into the current about-modal?

Bug: if you open a new tab and enter http://localhost:9000/recordings/about, the modalBackground - which renders the previous web page content in the background - is undefined. The <Switch> will then render the NotFound page. If I instead replace the RouteWithTitleUpdatespath `` prop to /about on line 204 and comment lines 146-148 in `AppLayout`, the previous page content does not render in the background behind the modal.

This looks to be a routing issue; there isn't a defined route to /<whatever>/about. What if instead of adding "/about" to the end of the URL, a URL fragment is used (e.g., #about)? So now if the user tries going to /recordings#about then we first route to recordings and then open the about modal, instead of trying to route to /recordings/about.

[jan-law]

the about-modal design was extracted into it's own component such that it could be used as a dedicated "about" page and also be fed into the current about-modal

Nice, the About page also prevents the need to create extra routes or URL fragments.

[andrewazores]

I think this looks pretty good. As a follow-up, could you look into navigation item groups or separators and see what improvements can be made there? https://www.patternfly.org/v4/components/navigation/

[andrewazores]

@aptmac any comments on these latest commits?

[aptmac]

Looks good to me!