sdy

update HomeIconBox style

...@@ -9,8 +9,9 @@ import { ...@@ -9,8 +9,9 @@ import {
9 faQuestionCircle, 9 faQuestionCircle,
10 faTags, 10 faTags,
11 } from "@fortawesome/free-solid-svg-icons"; 11 } from "@fortawesome/free-solid-svg-icons";
12 +import { BrowserRouter as Router, Link } from "react-router-dom";
12 13
13 -const UserIconBox = styled.div` 14 +const HomeIconBox = styled.div`
14 width: 100%; 15 width: 100%;
15 height: 10%; 16 height: 10%;
16 display: flex; 17 display: flex;
...@@ -21,7 +22,7 @@ const UserIconBox = styled.div` ...@@ -21,7 +22,7 @@ const UserIconBox = styled.div`
21 opacity: 0.8; 22 opacity: 0.8;
22 color: white; 23 color: white;
23 cursor: pointer; 24 cursor: pointer;
24 - transition: 0.3s; 25 + transition: 0.5s;
25 &:hover { 26 &:hover {
26 color: #667aff; 27 color: #667aff;
27 background-color: white; 28 background-color: white;
...@@ -47,7 +48,7 @@ const IconBox = styled.div` ...@@ -47,7 +48,7 @@ const IconBox = styled.div`
47 align-items: center; 48 align-items: center;
48 width: 100%; 49 width: 100%;
49 height: 100%; 50 height: 100%;
50 - transition: 0.3s; 51 + transition: 0.5s;
51 &:hover { 52 &:hover {
52 color: #667aff; 53 color: #667aff;
53 background-color: white; 54 background-color: white;
...@@ -69,7 +70,7 @@ const ExitIconBox = styled.div` ...@@ -69,7 +70,7 @@ const ExitIconBox = styled.div`
69 opacity: 0.8; 70 opacity: 0.8;
70 color: white; 71 color: white;
71 cursor: pointer; 72 cursor: pointer;
72 - transition: 0.3s; 73 + transition: 0.5s;
73 &:hover { 74 &:hover {
74 color: #667aff; 75 color: #667aff;
75 background-color: white; 76 background-color: white;
...@@ -87,9 +88,10 @@ const IconName = styled.span` ...@@ -87,9 +88,10 @@ const IconName = styled.span`
87 export default () => { 88 export default () => {
88 return ( 89 return (
89 <> 90 <>
90 - <UserIconBox> 91 + <Router>
92 + <HomeIconBox>
91 <FontAwesomeIcon icon={faHome} /> 93 <FontAwesomeIcon icon={faHome} />
92 - </UserIconBox> 94 + </HomeIconBox>
93 <FuncIconBox> 95 <FuncIconBox>
94 <IconBox> 96 <IconBox>
95 <FontAwesomeIcon icon={faComment} /> 97 <FontAwesomeIcon icon={faComment} />
...@@ -112,6 +114,7 @@ export default () => { ...@@ -112,6 +114,7 @@ export default () => {
112 <FontAwesomeIcon icon={faSignOutAlt} /> 114 <FontAwesomeIcon icon={faSignOutAlt} />
113 <IconName /> Log Out 115 <IconName /> Log Out
114 </ExitIconBox> 116 </ExitIconBox>
117 + </Router>
115 </> 118 </>
116 ); 119 );
117 }; 120 };
......