2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
7df167be 1 parent b5ea2465

update HomeIconBox style

Inline Side-by-side
Showing 1 changed file with 32 additions and 29 deletions
......@@ -9,8 +9,9 @@ import {
faQuestionCircle,
faTags,
} from "@fortawesome/free-solid-svg-icons";
import { BrowserRouter as Router, Link } from "react-router-dom";
const UserIconBox = styled.div`
const HomeIconBox = styled.div`
width: 100%;
height: 10%;
display: flex;
......@@ -21,7 +22,7 @@ const UserIconBox = styled.div`
opacity: 0.8;
color: white;
cursor: pointer;
transition: 0.3s;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
......@@ -47,7 +48,7 @@ const IconBox = styled.div`
align-items: center;
width: 100%;
height: 100%;
transition: 0.3s;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
......@@ -69,7 +70,7 @@ const ExitIconBox = styled.div`
opacity: 0.8;
color: white;
cursor: pointer;
transition: 0.3s;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
......@@ -87,31 +88,33 @@ const IconName = styled.span`
export default () => {
return (
<>
<UserIconBox>
<FontAwesomeIcon icon={faHome} />
</UserIconBox>
<FuncIconBox>
<IconBox>
<FontAwesomeIcon icon={faComment} />
<IconName /> One To One Chat
</IconBox>
<IconBox>
<FontAwesomeIcon icon={faQuestionCircle} />
<IconName /> Random Chat
</IconBox>
<IconBox>
<FontAwesomeIcon icon={faTags} />
<IconName /> Category Chat
</IconBox>
<IconBox>
<FontAwesomeIcon icon={faCog} />
<IconName /> Profile Setting
</IconBox>
</FuncIconBox>
<ExitIconBox>
<FontAwesomeIcon icon={faSignOutAlt} />
<IconName /> Log Out
</ExitIconBox>
<Router>
<HomeIconBox>
<FontAwesomeIcon icon={faHome} />
</HomeIconBox>
<FuncIconBox>
<IconBox>
<FontAwesomeIcon icon={faComment} />
<IconName /> One To One Chat
</IconBox>
<IconBox>
<FontAwesomeIcon icon={faQuestionCircle} />
<IconName /> Random Chat
</IconBox>
<IconBox>
<FontAwesomeIcon icon={faTags} />
<IconName /> Category Chat
</IconBox>
<IconBox>
<FontAwesomeIcon icon={faCog} />
<IconName /> Profile Setting
</IconBox>
</FuncIconBox>
<ExitIconBox>
<FontAwesomeIcon icon={faSignOutAlt} />
<IconName /> Log Out
</ExitIconBox>
</Router>
</>
);
};
......