Merge pull request #1209 from opentripplanner/user-account-mobile-header

Mobile UI: Navbar with Branding has layout issues

.gitignore

@@ -20,3 +20,6 @@ dist
 !example-config.yml
 !test-config.yml
 !har-mock-config.yml
+
+# vscode extensions
+.vscode

lib/components/app/desktop-nav.tsx

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { isMobile } from '@opentripplanner/core-utils/lib/ui'
 import { Nav, Navbar } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
 import React from 'react'
@@ -104,16 +105,21 @@ const DesktopNav = ({
         >
           <Navbar.Brand>
             <AppMenu />
-            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-            {/* @ts-ignore The dynamic tag is causing some trouble */}
-            <BrandingElement
-              className={branding && `with-icon icon-${branding}`}
-              {...brandingProps}
-            >
-              {/* A title is always rendered (e.g.for screen readers)
-                  but is visually-hidden if a branding icon is used. */}
-              <div className="navbar-title">{title}</div>
-            </BrandingElement>
+
+            {!isMobile() && (
+              <>
+                {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                {/* @ts-ignore The dynamic tag is causing some trouble */}
+                <BrandingElement
+                  className={branding && `with-icon icon-${branding}`}
+                  {...brandingProps}
+                >
+                  {/* A title is always rendered (e.g.for screen readers)
+                    but is visually-hidden if a branding icon is used. */}
+                  <div className="navbar-title">{title}</div>
+                </BrandingElement>
+              </>
+            )}
           </Navbar.Brand>
 
           <ViewSwitcher sticky />