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 {
} from "@fortawesome/free-solid-svg-icons";
import { BrowserRouter as Router, Link } from "react-router-dom";
const MenuBar = styled.div`
width: 15%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 10px #8395a7;
background-color: #667aff;
`;
const TitleBox = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 15%;
font-size: 30px;
color: white;
margin-bottom: 10px;
`;
const Title = styled.span`
font-family: "Raleway", sans-serif;
`;
const HomeIconBox = styled.div`
width: 100%;
height: 10%;
......@@ -20,13 +46,6 @@ const HomeIconBox = styled.div`
align-items: center;
font-size: 30px;
opacity: 0.8;
color: white;
cursor: pointer;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
}
`;
const FuncIconBox = styled.div`
......@@ -48,33 +67,18 @@ const IconBox = styled.div`
align-items: center;
width: 100%;
height: 100%;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
}
svg {
font-size: 20px;
margin-right: 5px;
}
cursor: pointer;
`;
const ExitIconBox = styled.div`
width: 100%;
height: 15%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
opacity: 0.8;
color: white;
cursor: pointer;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
}
svg {
font-size: 20px;
margin-right: 5px;
......@@ -85,36 +89,99 @@ const IconName = styled.span`
font-size: 10px;
`;
const StyledLink = styled(Link)`
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.5s;
&:hover {
color: #667aff;
background-color: white;
}
width: ${(props) => {
if (
props.className === "LogOutLink" ||
props.className === "HomeLink" ||
props.className === "FuncLink"
)
return "100%";
}};
height: ${(props) => {
if (props.className === "LogOutLink") return "15%";
if (props.className === "HomeLink") return "10%";
if (props.className === "FuncLink") return "100%";
}};
display: ${(props) => {
if (
props.className === "LogOutLink" ||
props.className === "HomeLink" ||
props.className === "FuncLink"
)
return "flex";
}};
justify-content: ${(props) => {
if (
props.className === "LogOutLink" ||
props.className === "HomeLink" ||
props.className === "FuncLink"
)
return "center";
}};
align-items: ${(props) => {
if (
props.className === "LogOutLink" ||
props.className === "HomeLink" ||
props.className === "FuncLink"
)
return "center";
}};
`;
export default () => {
return (
<>
<MenuBar>
<TitleBox>
<Title>KhuChat</Title>
</TitleBox>
<Router>
<HomeIconBox>
<FontAwesomeIcon icon={faHome} />
</HomeIconBox>
<StyledLink to="/Home" className="HomeLink">
<HomeIconBox>
<FontAwesomeIcon icon={faHome} />
</HomeIconBox>
</StyledLink>
<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>
<StyledLink to="/OTOChat" className="FuncLink">
<IconBox>
<FontAwesomeIcon icon={faComment} />
<IconName /> One To One Chat
</IconBox>
</StyledLink>
<StyledLink to="/RandomChat" className="FuncLink">
<IconBox>
<FontAwesomeIcon icon={faQuestionCircle} />
<IconName /> Random Chat
</IconBox>
</StyledLink>
<StyledLink to="/CategoryChat" className="FuncLink">
<IconBox>
<FontAwesomeIcon icon={faTags} />
<IconName /> Category Chat
</IconBox>
</StyledLink>
<StyledLink to="/Profile" className="FuncLink">
<IconBox>
<FontAwesomeIcon icon={faCog} />
<IconName /> Profile Setting
</IconBox>
</StyledLink>
</FuncIconBox>
<ExitIconBox>
<FontAwesomeIcon icon={faSignOutAlt} />
<IconName /> Log Out
</ExitIconBox>
<StyledLink to="/" className="LogOutLink">
<ExitIconBox>
<FontAwesomeIcon icon={faSignOutAlt} />
<IconName /> Log Out
</ExitIconBox>
</StyledLink>
</Router>
</>
</MenuBar>
);
};
......
import React from "react";
import styled from "styled-components";
import MenuIcons from "./MenuIcons";
const MenuBar = styled.div`
width: 15%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 10px #8395a7;
background-color: #667aff;
`;
const TitleBox = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 15%;
font-size: 30px;
color: white;
margin-bottom: 10px;
`;
const Title = styled.span`
font-family: "Raleway", sans-serif;
`;
export default () => {
return (
<MenuBar>
<TitleBox>
<Title>KhuChat</Title>
</TitleBox>
<MenuIcons />
</MenuBar>
);
};