Showing
3 changed files
with
114 additions
and
87 deletions
front/src/Routes/Menu/MenuContainer.js
0 → 100644
File mode changed
... | @@ -11,6 +11,32 @@ import { | ... | @@ -11,6 +11,32 @@ import { |
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 | import { BrowserRouter as Router, Link } from "react-router-dom"; |
13 | 13 | ||
14 | +const MenuBar = styled.div` | ||
15 | + width: 15%; | ||
16 | + height: 100%; | ||
17 | + display: flex; | ||
18 | + flex-direction: column; | ||
19 | + justify-content: center; | ||
20 | + align-items: center; | ||
21 | + box-shadow: 1px 1px 10px #8395a7; | ||
22 | + background-color: #667aff; | ||
23 | +`; | ||
24 | + | ||
25 | +const TitleBox = styled.div` | ||
26 | + display: flex; | ||
27 | + flex-direction: column; | ||
28 | + justify-content: center; | ||
29 | + align-items: center; | ||
30 | + height: 15%; | ||
31 | + font-size: 30px; | ||
32 | + color: white; | ||
33 | + margin-bottom: 10px; | ||
34 | +`; | ||
35 | + | ||
36 | +const Title = styled.span` | ||
37 | + font-family: "Raleway", sans-serif; | ||
38 | +`; | ||
39 | + | ||
14 | const HomeIconBox = styled.div` | 40 | const HomeIconBox = styled.div` |
15 | width: 100%; | 41 | width: 100%; |
16 | height: 10%; | 42 | height: 10%; |
... | @@ -20,13 +46,6 @@ const HomeIconBox = styled.div` | ... | @@ -20,13 +46,6 @@ const HomeIconBox = styled.div` |
20 | align-items: center; | 46 | align-items: center; |
21 | font-size: 30px; | 47 | font-size: 30px; |
22 | opacity: 0.8; | 48 | opacity: 0.8; |
23 | - color: white; | ||
24 | - cursor: pointer; | ||
25 | - transition: 0.5s; | ||
26 | - &:hover { | ||
27 | - color: #667aff; | ||
28 | - background-color: white; | ||
29 | - } | ||
30 | `; | 49 | `; |
31 | 50 | ||
32 | const FuncIconBox = styled.div` | 51 | const FuncIconBox = styled.div` |
... | @@ -48,33 +67,18 @@ const IconBox = styled.div` | ... | @@ -48,33 +67,18 @@ const IconBox = styled.div` |
48 | align-items: center; | 67 | align-items: center; |
49 | width: 100%; | 68 | width: 100%; |
50 | height: 100%; | 69 | height: 100%; |
51 | - transition: 0.5s; | ||
52 | - &:hover { | ||
53 | - color: #667aff; | ||
54 | - background-color: white; | ||
55 | - } | ||
56 | svg { | 70 | svg { |
57 | font-size: 20px; | 71 | font-size: 20px; |
58 | margin-right: 5px; | 72 | margin-right: 5px; |
59 | } | 73 | } |
60 | - cursor: pointer; | ||
61 | `; | 74 | `; |
62 | 75 | ||
63 | const ExitIconBox = styled.div` | 76 | const ExitIconBox = styled.div` |
64 | - width: 100%; | ||
65 | - height: 15%; | ||
66 | display: flex; | 77 | display: flex; |
67 | flex-direction: row; | 78 | flex-direction: row; |
68 | align-items: center; | 79 | align-items: center; |
69 | justify-content: center; | 80 | justify-content: center; |
70 | opacity: 0.8; | 81 | opacity: 0.8; |
71 | - color: white; | ||
72 | - cursor: pointer; | ||
73 | - transition: 0.5s; | ||
74 | - &:hover { | ||
75 | - color: #667aff; | ||
76 | - background-color: white; | ||
77 | - } | ||
78 | svg { | 82 | svg { |
79 | font-size: 20px; | 83 | font-size: 20px; |
80 | margin-right: 5px; | 84 | margin-right: 5px; |
... | @@ -85,36 +89,99 @@ const IconName = styled.span` | ... | @@ -85,36 +89,99 @@ const IconName = styled.span` |
85 | font-size: 10px; | 89 | font-size: 10px; |
86 | `; | 90 | `; |
87 | 91 | ||
92 | +const StyledLink = styled(Link)` | ||
93 | + text-decoration: none; | ||
94 | + color: white; | ||
95 | + cursor: pointer; | ||
96 | + transition: 0.5s; | ||
97 | + &:hover { | ||
98 | + color: #667aff; | ||
99 | + background-color: white; | ||
100 | + } | ||
101 | + width: ${(props) => { | ||
102 | + if ( | ||
103 | + props.className === "LogOutLink" || | ||
104 | + props.className === "HomeLink" || | ||
105 | + props.className === "FuncLink" | ||
106 | + ) | ||
107 | + return "100%"; | ||
108 | + }}; | ||
109 | + height: ${(props) => { | ||
110 | + if (props.className === "LogOutLink") return "15%"; | ||
111 | + if (props.className === "HomeLink") return "10%"; | ||
112 | + if (props.className === "FuncLink") return "100%"; | ||
113 | + }}; | ||
114 | + display: ${(props) => { | ||
115 | + if ( | ||
116 | + props.className === "LogOutLink" || | ||
117 | + props.className === "HomeLink" || | ||
118 | + props.className === "FuncLink" | ||
119 | + ) | ||
120 | + return "flex"; | ||
121 | + }}; | ||
122 | + justify-content: ${(props) => { | ||
123 | + if ( | ||
124 | + props.className === "LogOutLink" || | ||
125 | + props.className === "HomeLink" || | ||
126 | + props.className === "FuncLink" | ||
127 | + ) | ||
128 | + return "center"; | ||
129 | + }}; | ||
130 | + align-items: ${(props) => { | ||
131 | + if ( | ||
132 | + props.className === "LogOutLink" || | ||
133 | + props.className === "HomeLink" || | ||
134 | + props.className === "FuncLink" | ||
135 | + ) | ||
136 | + return "center"; | ||
137 | + }}; | ||
138 | +`; | ||
139 | + | ||
88 | export default () => { | 140 | export default () => { |
89 | return ( | 141 | return ( |
90 | - <> | 142 | + <MenuBar> |
143 | + <TitleBox> | ||
144 | + <Title>KhuChat</Title> | ||
145 | + </TitleBox> | ||
91 | <Router> | 146 | <Router> |
92 | - <HomeIconBox> | 147 | + <StyledLink to="/Home" className="HomeLink"> |
93 | - <FontAwesomeIcon icon={faHome} /> | 148 | + <HomeIconBox> |
94 | - </HomeIconBox> | 149 | + <FontAwesomeIcon icon={faHome} /> |
150 | + </HomeIconBox> | ||
151 | + </StyledLink> | ||
95 | <FuncIconBox> | 152 | <FuncIconBox> |
96 | - <IconBox> | 153 | + <StyledLink to="/OTOChat" className="FuncLink"> |
97 | - <FontAwesomeIcon icon={faComment} /> | 154 | + <IconBox> |
98 | - <IconName /> One To One Chat | 155 | + <FontAwesomeIcon icon={faComment} /> |
99 | - </IconBox> | 156 | + <IconName /> One To One Chat |
100 | - <IconBox> | 157 | + </IconBox> |
101 | - <FontAwesomeIcon icon={faQuestionCircle} /> | 158 | + </StyledLink> |
102 | - <IconName /> Random Chat | 159 | + <StyledLink to="/RandomChat" className="FuncLink"> |
103 | - </IconBox> | 160 | + <IconBox> |
104 | - <IconBox> | 161 | + <FontAwesomeIcon icon={faQuestionCircle} /> |
105 | - <FontAwesomeIcon icon={faTags} /> | 162 | + <IconName /> Random Chat |
106 | - <IconName /> Category Chat | 163 | + </IconBox> |
107 | - </IconBox> | 164 | + </StyledLink> |
108 | - <IconBox> | 165 | + <StyledLink to="/CategoryChat" className="FuncLink"> |
109 | - <FontAwesomeIcon icon={faCog} /> | 166 | + <IconBox> |
110 | - <IconName /> Profile Setting | 167 | + <FontAwesomeIcon icon={faTags} /> |
111 | - </IconBox> | 168 | + <IconName /> Category Chat |
169 | + </IconBox> | ||
170 | + </StyledLink> | ||
171 | + <StyledLink to="/Profile" className="FuncLink"> | ||
172 | + <IconBox> | ||
173 | + <FontAwesomeIcon icon={faCog} /> | ||
174 | + <IconName /> Profile Setting | ||
175 | + </IconBox> | ||
176 | + </StyledLink> | ||
112 | </FuncIconBox> | 177 | </FuncIconBox> |
113 | - <ExitIconBox> | 178 | + <StyledLink to="/" className="LogOutLink"> |
114 | - <FontAwesomeIcon icon={faSignOutAlt} /> | 179 | + <ExitIconBox> |
115 | - <IconName /> Log Out | 180 | + <FontAwesomeIcon icon={faSignOutAlt} /> |
116 | - </ExitIconBox> | 181 | + <IconName /> Log Out |
182 | + </ExitIconBox> | ||
183 | + </StyledLink> | ||
117 | </Router> | 184 | </Router> |
118 | - </> | 185 | + </MenuBar> |
119 | ); | 186 | ); |
120 | }; | 187 | }; | ... | ... |
front/src/Routes/MenuList/MenuBar.js
deleted
100644 → 0
1 | -import React from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import MenuIcons from "./MenuIcons"; | ||
4 | - | ||
5 | -const MenuBar = styled.div` | ||
6 | - width: 15%; | ||
7 | - height: 100%; | ||
8 | - display: flex; | ||
9 | - flex-direction: column; | ||
10 | - justify-content: center; | ||
11 | - align-items: center; | ||
12 | - box-shadow: 1px 1px 10px #8395a7; | ||
13 | - background-color: #667aff; | ||
14 | -`; | ||
15 | - | ||
16 | -const TitleBox = styled.div` | ||
17 | - display: flex; | ||
18 | - flex-direction: column; | ||
19 | - justify-content: center; | ||
20 | - align-items: center; | ||
21 | - height: 15%; | ||
22 | - font-size: 30px; | ||
23 | - color: white; | ||
24 | - margin-bottom: 10px; | ||
25 | -`; | ||
26 | - | ||
27 | -const Title = styled.span` | ||
28 | - font-family: "Raleway", sans-serif; | ||
29 | -`; | ||
30 | - | ||
31 | -export default () => { | ||
32 | - return ( | ||
33 | - <MenuBar> | ||
34 | - <TitleBox> | ||
35 | - <Title>KhuChat</Title> | ||
36 | - </TitleBox> | ||
37 | - <MenuIcons /> | ||
38 | - </MenuBar> | ||
39 | - ); | ||
40 | -}; |
-
Please register or login to post a comment