From 2dcd50d3614ded591c0b561d69575f3ae42a3780 Mon Sep 17 00:00:00 2001
From: Ahmed-Ayman <ahmedayman055g@gmail.com>
Date: Thu, 6 Dec 2018 23:24:39 +0200
Subject: [PATCH] create the nav

---
 src/App.js                |  2 ++
 src/components/Nav.js     | 49 +++++++++++++++++++++++++++++++++++++++
 src/stylesheets/style.css | 33 ++++++++++++++++++++++----
 3 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Nav.js

diff --git a/src/App.js b/src/App.js
index acdca73..1f674b1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import store from './store/configureStore';
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Search from "./components/Search";
+import Nav from "./components/Nav";
 
 class App extends Component {
   render() {
@@ -19,6 +20,7 @@ class App extends Component {
           <Search/>
           <Route exact={true} path="/" component={Home}/>
           <Route path="/topics" component={TopicsList}/>
+          <Nav/>
           <Footer/>
         </div>
       </Provider>
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..9eec0e8
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+class Nav extends React.Component {
+  render() {
+    return (
+      <nav>
+        <ul>
+          <li>
+            <a href="">
+              <span className="arabic-text">اتصل بنا</span>
+              <br/>
+              <span className="english-text"> contact us</span>
+            </a>
+          </li>
+          <li>
+            <a href="">
+              <span className="arabic-text">دليل توجيهي</span>
+              <br/>
+              <span className="english-text"> tutorials</span>
+            </a>
+          </li>
+          <li>
+            <a href="">
+              <span className="arabic-text">الرئيسية</span>
+              <br/>
+              <span className="english-text"> main</span>
+            </a>
+          </li>
+          <li>
+            <a href="">
+              <span className="arabic-text">الأرشيف</span>
+              <br/>
+              <span className="english-text"> the archive</span>
+            </a>
+          </li>
+          <li>
+            <a href="">
+              <span className="arabic-text">ماهذا الشيء</span>
+              <br/>
+              <span className="english-text"> what is this</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    )
+  }
+}
+
+export default (Nav);
\ No newline at end of file
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
index d9a3d3a..6a74572 100644
--- a/src/stylesheets/style.css
+++ b/src/stylesheets/style.css
@@ -91,16 +91,19 @@ header {
     font-size: 1.5em;
     color: gray;
 }
-@media screen and (max-width: 700px){
+
+@media screen and (max-width: 700px) {
     .search-box::placeholder {
         font-size: 1em;
     }
 }
-@media screen and (max-width: 400px){
+
+@media screen and (max-width: 400px) {
     .search-box::placeholder {
         font-size: .75em;
     }
 }
+
 /* Video item*/
 .video-thumbnail {
     max-width: 300px;
@@ -123,8 +126,9 @@ header {
     margin-bottom: 1em;
     position: relative;
 }
+
 /* footer */
-footer{
+footer {
     background: var(--858-light-gray-color);
     position: absolute;
     width: 100%;
@@ -132,4 +136,25 @@ footer{
     margin-top: 1em;
     padding: 1em;
     font-weight: bold;
-}
\ No newline at end of file
+}
+
+/* nav */
+nav {
+    margin: 3em;
+}
+
+nav ul li {
+    display: inline-block;
+    list-style-type: none;
+    padding: 1em;
+    border-right: 1px solid black;
+}
+
+nav ul li:last-child {
+    border-right: none;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: black;
+}