2020-1-capstone-design1 / Triz_Project1

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

refactoring Menu components

Inline Side-by-side
Showing 3 changed files with 114 additions and 87 deletions
...@@ -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 };
......
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 -};