add header style

@@ -3,22 +3,42 @@ import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 
 
+const Header = styled.header`
+  display: block;
+`;
+
+const Nav = styled.nav`
+  height: 70px;
+  width: 100%;
+  position: fixed;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+`;
+
 const HeaderBox = styled.div`
 const HeaderBox = styled.div`
+  height: 100%;
+  width: 100%;
   display: flex;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   align-items: center;
+  margin: 0 auto;
 `;
 `;
 
 
 const HeaderTitleBox = styled.div`
 const HeaderTitleBox = styled.div`
   display: flex;
   display: flex;
+  height: 100%;
+  align-items: center;
+  svg {
+    font-size: 1.5rem;
+  }
 `;
 `;
 
 
 const HeaderTitle = styled.span`
 const HeaderTitle = styled.span`
-  font-size: 15px;
+  font-size: 1.5rem;
 `;
 `;
 
 
-const HeaderMenuBox = styled.div`
+const HeaderMenuNav = styled.nav`
   display: flex;
   display: flex;
+  justify-content: flex-start;
 `;
 `;
 
 
 const HeaderMenuList = styled.ul`
 const HeaderMenuList = styled.ul`
@@ -26,7 +46,9 @@ const HeaderMenuList = styled.ul`
 `;
 `;
 
 
 const HeaderMenuItem = styled.li`
 const HeaderMenuItem = styled.li`
-  content: ${(props) => props.text};
+  &::before {
+    content: ${(props) => props.text};
+  }
 `;
 `;
 
 
 const StartBox = styled.div`
 const StartBox = styled.div`
@@ -37,19 +59,21 @@ const StartBox = styled.div`
 
 
 export default () => {
 export default () => {
   return (
   return (
-    <HeaderBox>
-      <HeaderTitleBox>
-        <FontAwesomeIcon>
-          <faComments />
-        </FontAwesomeIcon>
-        <HeaderTitle>KhuChat</HeaderTitle>
-      </HeaderTitleBox>
-      <HeaderMenuBox>
-        <HeaderMenuList>
-          <HeaderMenuItem text={"About This"} />
-        </HeaderMenuList>
-      </HeaderMenuBox>
-      <StartBox>Start</StartBox>
-    </HeaderBox>
+    <Header>
+      <Nav>
+        <HeaderBox>
+          <HeaderTitleBox>
+            <FontAwesomeIcon icon={faComments} />
+            <HeaderTitle>KhuChat</HeaderTitle>
+          </HeaderTitleBox>
+          <HeaderMenuNav>
+            <HeaderMenuList>
+              <HeaderMenuItem>About This</HeaderMenuItem>
+            </HeaderMenuList>
+            <StartBox>Start</StartBox>
+          </HeaderMenuNav>
+        </HeaderBox>
+      </Nav>
+    </Header>
   );
   );
 };
 };