Style improvements for mobile

imports/ui/components/Navigation/Navigation.js

@@ -17,7 +17,9 @@ const Navigation = props => (
       {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
       <Navbar.Header>
         <Navbar.Brand>
-          <Link to="/">{props.t('AppNameFull')}</Link>
+          <Link to="/" className={window.location.pathname === '/' ? 'hide-brand' : ''} >
+            {props.t('AppNameFull')}
+          </Link>
         </Navbar.Brand>
         {/* <Navbar.Toggle/> */}
         <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -54,6 +56,7 @@ Navigation.defaultProps = {
 };
 
 Navigation.propTypes = {
+  t: PropTypes.func.isRequired,
   authenticated: PropTypes.bool.isRequired
 };
 

imports/ui/components/Navigation/Navigation.scss

@@ -1,3 +1,5 @@
+@import '../../stylesheets/mixins';
+
 .navbar {
   border-radius: 0;
   border-left: none;
@@ -27,14 +29,20 @@ a.nav-link:hover {
   padding: 0.3rem 0rem;
 }
 
-
 a.navbar-brand {
   font-size: 26px;
 }
 
-@media (max-width: 480px) {
-  a.navbar-brand {
-    font-size: 16px;
-    padding: 15px 3px;
-  }
+@include breakpoint(mobile) {
+    a.navbar-brand {
+        font-size: 18px;
+        padding: 15px 3px 15px 15px;
+    }
+    .navbar-nav .nav-link {
+        padding-left: 5px;
+    }
 }
+
+.hide-brand {
+  opacity: 0;
+}