create the nav

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>

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);

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;
-}
+}
+
+/* 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;
+}