new post UI

src/components/Header/Header.js

@@ -0,0 +1,150 @@
+import React, { Component } from "react";
+import { FaSearch } from "react-icons/fa";
+import "./Header.scss";
+import Login from "../Login/Login";
+import Signup from "../Signup/Signup";
+import firebase from "../../config/Fire";
+import Newpost from "../Newpost/Newpost";
+
+class Header extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isloggedin: false,
+      user: null,
+      users: []
+    };
+    this.authListener = this.authListener.bind(this);
+    this.ref = firebase.firestore().collection("users");
+    this.connect = null;
+  }
+
+  onCollectionUpdate = querySnapshot => {
+    const users = [];
+    querySnapshot.forEach(doc => {
+      const { username, email, avatarURL } = doc.data();
+      users.push({
+        key: doc.id,
+        doc, // DocumentSnapshot
+        username,
+        email,
+        avatarURL
+      });
+    });
+    this.setState({
+      users
+    });
+  };
+
+  componentDidMount() {
+    this.authListener();
+    this.connect = this.ref.onSnapshot(this.onCollectionUpdate);
+  }
+  authListener() {
+    firebase.auth().onAuthStateChanged(user => {
+      if (user) {
+        this.setState({ user });
+      } else {
+        this.setState({ user: null });
+      }
+    });
+  }
+
+  showsignup() {
+    var form = document.getElementById("signupform");
+    form.style.display = "block";
+  }
+
+  showlogin() {
+    var form = document.getElementById("loginform");
+    form.style.display = "block";
+  }
+
+  logout() {
+    firebase.auth().signOut();
+  }
+
+  showCreatePost() {
+    var form = document.getElementById("newpost");
+    form.style.display = "block";
+  }
+
+  render() {
+    var myname = "";
+    return (
+      <div className="header-container">
+        <div className="header">
+          <div className="toplayout">
+            <div className="logo">Awesome Blog</div>
+            {this.state.user === null ? (
+              <div className="auth">
+                <button onClick={this.showlogin}>Sign In</button>
+                <button href="" onClick={this.showsignup} className="register">
+                  Get Started
+                </button>
+              </div>
+            ) : (
+              <div className="me">
+                {this.state.users.map(user => {
+                  if (user.email === firebase.auth().currentUser.email)
+                    return (
+                      <div className="myinfo">
+                        <img src={user.avatarURL} alt="myimage" />
+                        <p>{(myname = user.username)}</p>
+                      </div>
+                    );
+                })}
+                <ul>
+                  <li>Hi, {myname}</li>
+                  <li onClick={this.showCreatePost}>create new post</li>
+                  <li>My profile</li>
+                  <li>Bookmarks</li>
+                  <li>Help</li>
+                  <li onClick={this.logout}>logout</li>
+                </ul>
+              </div>
+            )}
+          </div>
+
+          <div className="navbar">
+            <div className="menu">
+              <ul>
+                <li>
+                  <a href="">LATEST POST</a>
+                </li>
+                <li>
+                  <a href="">MOST VIEWED</a>
+                </li>
+                <li>
+                  <a href="">TAGS</a>
+                </li>
+                <li>
+                  <a href="">XXXXXX</a>
+                </li>
+                <li>
+                  <a href="">YYYYYY</a>
+                </li>
+                <li>
+                  <a href="">ZZZZZZ</a>
+                </li>
+              </ul>
+            </div>
+            <div className="search">
+              <form className="searchresult">
+                <input type="text" placeholder="Search" />
+                <FaSearch />
+              </form>
+            </div>
+          </div>
+        </div>
+        <div id="signupform">
+          <Signup />
+        </div>
+        <div id="loginform">
+          <Login />
+        </div>
+      </div>
+    );
+  }
+}
+export default Header;

src/components/Header/Header.scss

@@ -0,0 +1,171 @@
+.header-container {
+  margin: 50px;
+  font-family: "Montserrat", sans-serif;
+  .toplayout {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .logo {
+      font-size: 40px;
+      font-weight: 300;
+      letter-spacing: -3px;
+    }
+    .auth {
+      text-align: center;
+      line-height: 60px;
+      a {
+        margin: 0 10px;
+        text-decoration: none;
+        color: black;
+      }
+      button {
+        border: none;
+        padding: 10px;
+        background: white;
+        cursor: pointer;
+      }
+      button:hover {
+        color: #de7b85;
+      }
+      .register {
+        padding: 8px 16px;
+        border: 1px solid lightpink;
+        border-radius: 5px;
+        transition: background-color 1s;
+      }
+      .register:hover {
+        cursor: pointer;
+        background-color: lightpink;
+        color: white !important;
+      }
+    }
+  }
+  .navbar {
+    display: flex;
+    margin: 28px 0;
+    justify-content: space-between;
+    input {
+      border: none;
+      width: 200px;
+      border-bottom: 1px solid lightpink;
+      outline: none;
+      padding: 10px 20px;
+      font-size: 15px;
+      transition: width 0.5s;
+    }
+    input:hover {
+      width: 300px;
+    }
+    .search {
+      .searchresult {
+        svg {
+          margin-left: -26px;
+        }
+      }
+    }
+    .searchresult:hover input {
+      width: 300px;
+    }
+    .menu {
+      ul {
+        padding-left: 0;
+        display: block;
+        li {
+          display: inline;
+          a {
+            margin: 0 20px;
+            text-decoration: none;
+            color: black;
+            transition: border-bottom 0.1s ease-in-out;
+          }
+          a:hover {
+            padding-bottom: 10px;
+            border-bottom: 2px solid orange;
+          }
+          a:active {
+            padding-bottom: 13px;
+            border-bottom: 2px solid orange;
+          }
+        }
+      }
+    }
+  }
+}
+.allpost {
+  display: grid;
+  grid-template-columns: 70% 30%;
+  .recentpost-container {
+    display: grid;
+    grid-template-columns: 50% 50%;
+  }
+}
+#signupform {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+#loginform {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.myinfo {
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+  .myprofile {
+    margin-left: 10px;
+    h3 {
+      line-height: 30px;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      width: unset;
+    }
+  }
+}
+
+.me {
+  .myinfo {
+    p {
+      display: none;
+    }
+  }
+  ul {
+    margin-left: -200px;
+    width: 250px;
+    height: 350px;
+    display: none;
+    list-style-type: none;
+    transition: display 0.5s ease-in;
+    position: fixed;
+    background: white;
+    padding: 0 20px;
+    margin-top: 0;
+    li {
+      padding: 20px 0;
+      cursor: pointer;
+    }
+  }
+}
+.me:hover ul {
+  display: block;
+}