Showing
1 changed file
with
9 additions
and
6 deletions
... | @@ -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 | }; | ... | ... |
-
Please register or login to post a comment