diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
deleted file mode 100644
index e2380b5..0000000
--- a/src/components/common/Header.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import Navbar from '../navigation/NavBar';
-
-const Header = () => (
-
-);
-
-export default Header;
diff --git a/src/components/common/footer/Footer.js b/src/components/common/footer/Footer.js
new file mode 100644
index 0000000..e35e65c
--- /dev/null
+++ b/src/components/common/footer/Footer.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../../../public/styles/Footer.scss';
+import facebook from '../../../../public/images/facebook-logo-button.svg';
+import twitter from '../../../../public/images/twitter-logo-button.svg';
+
+const Footer = () => (
+
+);
+
+export default Footer;
diff --git a/src/components/common/header/Header.js b/src/components/common/header/Header.js
new file mode 100644
index 0000000..07b3eb2
--- /dev/null
+++ b/src/components/common/header/Header.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import logo from '../../../../public/images/site-logo.png';
+import '../../../../public/js/NavBar';
+import Navbar from './NavBar';
+
+const Header = () => (
+
+
+
+);
+
+export default Header;
diff --git a/src/components/common/header/Login.js b/src/components/common/header/Login.js
new file mode 100644
index 0000000..1592891
--- /dev/null
+++ b/src/components/common/header/Login.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import newArticle from '../../../../public/images/new.svg';
+import bell from '../../../../public/images/bell.svg';
+import logout from '../../../../public/images/logout.png';
+import favorites from '../../../../public/images/favorites.png';
+import preferences from '../../../../public/images/preferences.png';
+import profile from '../../../../public/images/profile.png';
+
+const Login = (props) => {
+ const { url } = props;
+
+ return (
+
+ );
+};
+
+Login.propTypes = {
+ url: PropTypes.string.isRequired,
+};
+
+export default Login;
diff --git a/src/components/common/header/NavBar.js b/src/components/common/header/NavBar.js
new file mode 100644
index 0000000..70ca77c
--- /dev/null
+++ b/src/components/common/header/NavBar.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import more from '../../../../public/images/more.png';
+import mockCategories from '../../../../mockdata/categories';
+import NavItems from './NavItems';
+import UserSettings from './UserSettings';
+
+class NavBar extends Component {
+ state = {
+ categories: mockCategories
+ };
+
+ render() {
+ const { categories } = this.state;
+ return (
+
+ );
+ }
+}
+
+export default NavBar;
diff --git a/src/components/common/header/NavItems.js b/src/components/common/header/NavItems.js
new file mode 100644
index 0000000..364e8f2
--- /dev/null
+++ b/src/components/common/header/NavItems.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import iconPicker from '../../../utils/iconPicker';
+
+const NavItems = (props) => {
+ const { categories } = props;
+ return (
+ categories.map((category, index) => (
+
+
+
+ })
+
+ {category.categoryName}
+
+
+ ))
+ );
+};
+
+NavItems.propTypes = {
+ categories: PropTypes.array.isRequired,
+};
+
+export default NavItems;
diff --git a/src/components/common/header/UserSettings.js b/src/components/common/header/UserSettings.js
new file mode 100644
index 0000000..6c8faee
--- /dev/null
+++ b/src/components/common/header/UserSettings.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import loginMobile from '../../../../public/images/login.png';
+import signup from '../../../../public/images/signup.png';
+import Login from './Login';
+import picture from '../../../../public/images/avatar.jpg';
+
+const UserSettings = (props) => {
+ const { isLoggedIn } = props;
+
+ if (isLoggedIn) {
+ return (
+
+ );
+ }
+ return
;
+};
+
+UserSettings.propTypes = {
+ isLoggedIn: PropTypes.bool.isRequired,
+};
+
+export default UserSettings;
diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
index bc83dce..3954bde 100644
--- a/src/components/home/HomePage.js
+++ b/src/components/home/HomePage.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
import { CardList } from '../Card';
import formatDate from '../../utils/dateUtils';
-import Header from '../common/Header';
+import Header from '../common/header/Header';
+import Footer from '../common/footer/Footer';
import mockArticles from '../../../mockdata/articles';
export const PopularPosts = (props) => {
@@ -56,6 +57,7 @@ export class HomePage extends Component {
diff --git a/src/components/navigation/NavBar.js b/src/components/navigation/NavBar.js
deleted file mode 100644
index 08c17e9..0000000
--- a/src/components/navigation/NavBar.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-
-const NavBar = () => (
-
-);
-
-export default NavBar;
diff --git a/src/components/signup/SignUpPage.js b/src/components/signup/SignUpPage.js
index 48b5c85..4383c3c 100644
--- a/src/components/signup/SignUpPage.js
+++ b/src/components/signup/SignUpPage.js
@@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
-import Header from '../common/Header';
+import Header from '../common/header/Header';
import emailIcon from '../../../public/assets/icons/mail-icon.svg';
import userIcon from '../../../public/assets/icons/user-icon.svg';
import facebookIcon from '../../../public/assets/icons/facebook-icon.svg';
diff --git a/src/index.html b/src/index.html
index fe3bec9..bb2a2b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,5 +9,7 @@
+
+
+
+ Profile + + +
+
+ + 4 +
+ Favourites + + + +
+
+ +
+ Preferneces + + + +
+ + Logout + + +
+
+ + More + +
+