Fade top bar away when viewing detailed itinerary

This gives more space for viewing the itinerary

And avoids the pitfall of accidentally clicking the Back button, meaning
to go out of the itinerary and back to the route list, but actually
clearing the routes entirely.

src/components/App.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { IntlProvider } from 'react-intl';
+import { Transition } from '@headlessui/react';
 import AlertBar from './AlertBar';
 import DirectionsNullState from './DirectionsNullState';
 import MapPlusOverlay from './MapPlusOverlay';
@@ -15,18 +16,21 @@ import {
 import './App.css';
 
 function App(props) {
-  const { hasRoutes, hasLocations, isEditingLocations } = useSelector(
-    (state) => ({
-      hasLocations: !!(
-        state.routeParams.end ||
-        (state.routeParams.start &&
-          state.routeParams.start.source !== LocationSourceType.UserGeolocation)
-      ),
-      hasRoutes: !!state.routes.routes,
-      isEditingLocations: state.routeParams.editingLocation != null,
-    }),
-    shallowEqual,
-  );
+  const { hasRoutes, hasLocations, isEditingLocations, viewingDetails } =
+    useSelector(
+      (state) => ({
+        hasLocations: !!(
+          state.routeParams.end ||
+          (state.routeParams.start &&
+            state.routeParams.start.source !==
+              LocationSourceType.UserGeolocation)
+        ),
+        hasRoutes: !!state.routes.routes,
+        isEditingLocations: state.routeParams.editingLocation != null,
+        viewingDetails: state.routes.viewingDetails,
+      }),
+      shallowEqual,
+    );
 
   const dispatch = useDispatch();
 
@@ -50,10 +54,20 @@ function App(props) {
   }
 
   const topBar = (
-    <TopBar
-      showSearchBar={isEditingLocations || hasLocations || hasRoutes}
-      initiallyFocusDestination={isEditingLocations}
-    />
+    <Transition
+      show={!viewingDetails}
+      enter="transition-opacity ease-out duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity ease-in duration-200"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <TopBar
+        showSearchBar={isEditingLocations || hasLocations || hasRoutes}
+        initiallyFocusDestination={isEditingLocations}
+      />
+    </Transition>
   );
 
   return (