2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
0d2b948d 1 parent 0d0d7297

create new box

Inline Side-by-side
Showing 1 changed file with 16 additions and 3 deletions
...@@ -32,6 +32,14 @@ const ItemList = styled.ul` ...@@ -32,6 +32,14 @@ const ItemList = styled.ul`
32 } 32 }
33 `; 33 `;
34 34
35 +const ItemListTopBox = styled.div`
36 + display: flex;
37 + flex-direction: row;
38 + justify-content: space-around;
39 + align-items: center;
40 + margin-bottom: 10px;
41 +`;
42 +
35 const Item = styled.li``; 43 const Item = styled.li``;
36 44
37 const ItemText = styled.span` 45 const ItemText = styled.span`
...@@ -42,10 +50,11 @@ const StyledLink = styled(Link)` ...@@ -42,10 +50,11 @@ const StyledLink = styled(Link)`
42 width: 100%; 50 width: 100%;
43 display: flex; 51 display: flex;
44 flex-direction: row; 52 flex-direction: row;
45 - justify-content: center; 53 + justify-content: left;
46 align-items: center; 54 align-items: center;
47 text-decoration: none; 55 text-decoration: none;
48 color: white; 56 color: white;
57 + padding-left: 10px;
49 cursor: pointer; 58 cursor: pointer;
50 &:hover { 59 &:hover {
51 background-color: white; 60 background-color: white;
...@@ -54,13 +63,17 @@ const StyledLink = styled(Link)` ...@@ -54,13 +63,17 @@ const StyledLink = styled(Link)`
54 `; 63 `;
55 64
56 export default ({ location }) => { 65 export default ({ location }) => {
66 + const { pathname } = location;
67 + let path;
57 return ( 68 return (
58 <> 69 <>
59 <CategoryContainer> 70 <CategoryContainer>
60 <ItemListContainer> 71 <ItemListContainer>
61 <ItemList> 72 <ItemList>
62 - <FontAwesomeIcon icon={faArrowDown} /> Category 73 + <ItemListTopBox>
63 - <FontAwesomeIcon icon={faPlus} /> 74 + <FontAwesomeIcon icon={faArrowDown} /> Category
75 + <FontAwesomeIcon icon={faPlus} />
76 + </ItemListTopBox>
64 <StyledLink> 77 <StyledLink>
65 <Item> 78 <Item>
66 <ItemText># Music</ItemText> 79 <ItemText># Music</ItemText>
......