refactoring Menu components

@@ -11,6 +11,32 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { BrowserRouter as Router, Link } from "react-router-dom";
 
+const MenuBar = styled.div`
+  width: 15%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 1px 1px 10px #8395a7;
+  background-color: #667aff;
+`;
+
+const TitleBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 15%;
+  font-size: 30px;
+  color: white;
+  margin-bottom: 10px;
+`;
+
+const Title = styled.span`
+  font-family: "Raleway", sans-serif;
+`;
+
 const HomeIconBox = styled.div`
   width: 100%;
   height: 10%;
@@ -20,13 +46,6 @@ const HomeIconBox = styled.div`
   align-items: center;
   font-size: 30px;
   opacity: 0.8;
-  color: white;
-  cursor: pointer;
-  transition: 0.5s;
-  &:hover {
-    color: #667aff;
-    background-color: white;
-  }
 `;
 
 const FuncIconBox = styled.div`
@@ -48,33 +67,18 @@ const IconBox = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
-  transition: 0.5s;
-  &:hover {
-    color: #667aff;
-    background-color: white;
-  }
   svg {
     font-size: 20px;
     margin-right: 5px;
   }
-  cursor: pointer;
 `;
 
 const ExitIconBox = styled.div`
-  width: 100%;
-  height: 15%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   opacity: 0.8;
-  color: white;
-  cursor: pointer;
-  transition: 0.5s;
-  &:hover {
-    color: #667aff;
-    background-color: white;
-  }
   svg {
     font-size: 20px;
     margin-right: 5px;
@@ -85,36 +89,99 @@ const IconName = styled.span`
   font-size: 10px;
 `;
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: white;
+  cursor: pointer;
+  transition: 0.5s;
+  &:hover {
+    color: #667aff;
+    background-color: white;
+  }
+  width: ${(props) => {
+    if (
+      props.className === "LogOutLink" ||
+      props.className === "HomeLink" ||
+      props.className === "FuncLink"
+    )
+      return "100%";
+  }};
+  height: ${(props) => {
+    if (props.className === "LogOutLink") return "15%";
+    if (props.className === "HomeLink") return "10%";
+    if (props.className === "FuncLink") return "100%";
+  }};
+  display: ${(props) => {
+    if (
+      props.className === "LogOutLink" ||
+      props.className === "HomeLink" ||
+      props.className === "FuncLink"
+    )
+      return "flex";
+  }};
+  justify-content: ${(props) => {
+    if (
+      props.className === "LogOutLink" ||
+      props.className === "HomeLink" ||
+      props.className === "FuncLink"
+    )
+      return "center";
+  }};
+  align-items: ${(props) => {
+    if (
+      props.className === "LogOutLink" ||
+      props.className === "HomeLink" ||
+      props.className === "FuncLink"
+    )
+      return "center";
+  }};
+`;
+
 export default () => {
   return (
-    <>
+    <MenuBar>
+      <TitleBox>
+        <Title>KhuChat</Title>
+      </TitleBox>
       <Router>
+        <StyledLink to="/Home" className="HomeLink">
           <HomeIconBox>
             <FontAwesomeIcon icon={faHome} />
           </HomeIconBox>
+        </StyledLink>
         <FuncIconBox>
+          <StyledLink to="/OTOChat" className="FuncLink">
             <IconBox>
               <FontAwesomeIcon icon={faComment} />
               <IconName /> One To One Chat
             </IconBox>
+          </StyledLink>
+          <StyledLink to="/RandomChat" className="FuncLink">
             <IconBox>
               <FontAwesomeIcon icon={faQuestionCircle} />
               <IconName /> Random Chat
             </IconBox>
+          </StyledLink>
+          <StyledLink to="/CategoryChat" className="FuncLink">
             <IconBox>
               <FontAwesomeIcon icon={faTags} />
               <IconName /> Category Chat
             </IconBox>
+          </StyledLink>
+          <StyledLink to="/Profile" className="FuncLink">
             <IconBox>
               <FontAwesomeIcon icon={faCog} />
               <IconName /> Profile Setting
             </IconBox>
+          </StyledLink>
         </FuncIconBox>
+        <StyledLink to="/" className="LogOutLink">
           <ExitIconBox>
             <FontAwesomeIcon icon={faSignOutAlt} />
             <IconName /> Log Out
           </ExitIconBox>
+        </StyledLink>
       </Router>
-    </>
+    </MenuBar>
   );
 };

-import React from "react";
-import styled from "styled-components";
-import MenuIcons from "./MenuIcons";
-
-const MenuBar = styled.div`
-  width: 15%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 1px 1px 10px #8395a7;
-  background-color: #667aff;
-`;
-
-const TitleBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 15%;
-  font-size: 30px;
-  color: white;
-  margin-bottom: 10px;
-`;
-
-const Title = styled.span`
-  font-family: "Raleway", sans-serif;
-`;
-
-export default () => {
-  return (
-    <MenuBar>
-      <TitleBox>
-        <Title>KhuChat</Title>
-      </TitleBox>
-      <MenuIcons />
-    </MenuBar>
-  );
-};