Merge pull request #48 from welitonderesende/develop

feat(navbar) improve mobile compatibility of the navbar
arojunior · Jan 8, 2019 · 1702ae8 · 1702ae8
2 parents e88fa09 + d6bf8bc
commit 1702ae8
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 57 deletions.
diff --git a/src/assets/App.css b/src/assets/App.css
@@ -1,57 +1,35 @@
-/*.App {
-  text-align: center;
+body {
+  background-color: #e9eff2;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
+@import './css/af-navbar.css';
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.af-container {
+  overflow: hidden;
 }
 
-.App-intro {
-  font-size: large;
+@media (max-width: 768px) {
+  .af-row {
+    margin-top: 10px;
+  }
+
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-*/
 .nav-pills-custom>li>a {
   color: lightgrey;
 }
 
-.nav-pills-custom>li>a:focus,
-.nav-pills-custom>li>a:hover {
-  background: none;
-  color: grey;
-}
-
 .panel-custom>.panel-heading {
   background: none;
   border-bottom: none;
 }
 
-.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
-  background-color: #337AB7;
-}
 .form-control-nav{
   background-color:#F0FFFF;
   border: lightgrey solid 1px;
   border-radius:15px;
 }
-body{
-  background-color: #F0FFFF;
-}
-.navbar-default .navbar-collapse, .navbar-default{
-background-color: white;
-}
+
 .panel-footer{
   background-color: lightcyan;
 }
@@ -71,6 +49,3 @@ div.panel-heading{
 .panel-info{
   border:1px lightgrey solid;
 }
-
-
-
diff --git a/src/assets/css/af-navbar.css b/src/assets/css/af-navbar.css
@@ -0,0 +1,60 @@
+.af-navbar {
+  background-color: #fff;
+  min-height: 0;
+  margin-bottom: 0;
+}
+
+.af-navbar .container-fluid {
+  padding: 0;
+}
+
+.af-navbar .af-navbar-mobile {
+  margin-bottom: 0;
+  color: #94a3ae;
+}
+
+.af-navbar .af-navbar--nav > li > a {
+  border-bottom: 2px solid #fff;
+}
+
+.af-navbar .af-navbar--nav > li.active > a {
+  background-color: #fff;
+  color: #1E88E5;
+  border-bottom: 2px solid #1E88E5;
+}
+.af-navbar .af-navbar--nav > li.active > a:hover {
+  background-color: #fff;
+}
+.af-navbar .af-navbar--nav > li > a:hover {
+  color: #1E88E5;
+  transition: all .15s ease-in-out;
+  border-bottom: 2px solid #1E88E5;
+}
+
+.af-navbar .af-navbar--nav > li.active > a:focus {
+  background-color: #fff;
+  color: #1E88E5;
+  border-bottom: 2px solid #1E88E5;
+}
+
+@media (max-width: 768px) {
+  .af-navbar {
+    top: unset;
+    bottom: 0;
+    position: fixed;
+    border-top: 2px solid #fff;
+    box-shadow: 0px -3px 13px -3px #d6d7d9;
+  }
+  .af-navbar-mobile {
+    height: 60px;
+  }
+  .af-navbar-mobile > ul {
+    display: inline-flex;
+  }
+  .af-navbar--nav {
+    margin: 0;
+    top: -17px;
+    position: relative;
+    text-align: center;
+  }
+}
diff --git a/src/components/HeaderComponent.js b/src/components/HeaderComponent.js
@@ -3,26 +3,10 @@ import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
 const Header = ({ handleLogout }) => (
-  <div className="navbar navbar-default navbar-fixed-top">
+  <div className="navbar navbar-default navbar-fixed-top af-navbar">
     <div className="container-fluid">
-      <div className="navbar-header">
-        <button
-          type="button"
-          className="pull-left navbar-toggle collapsed"
-          data-toggle="collapse"
-          data-target="#navbar"
-          aria-expanded="false"
-          style={{ marginLeft: 10 }}
-        >
-          <span className="sr-only">Toggle navigation</span>
-          <span className="icon-bar" />
-          <span className="icon-bar" />
-          <span className="icon-bar" />
-        </button>
-      </div>
-
-      <div id="navbar" className="navbar-collapse collapse" aria-expanded="true">
-        <ul className="nav navbar-nav">
+      <div id="navbar" className="navbar af-navbar-mobile" aria-expanded="true">
+        <ul className="nav navbar-nav af-navbar--nav">
           <li className="active">
             <a href="/">
               <span className="glyphicon glyphicon-home" /> Home

diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js
@@ -69,9 +69,9 @@ const RightColumn = styled.div`
 `;
 
 const HomeComponent = ({ handleLogout }) => (
-  <Container>
+  <Container className="af-container">
     <HeaderComponent handleLogout={handleLogout} />
-    <Row>
+    <Row className="af-row">
       <LeftColumn>
         <ProfileContainer />
         <TrendingReposContainer />