Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit cabc701

Browse files
arkajyotiMukherjeeasharonbaltazar
arkajyotiMukherjee
and
asharonbaltazar
authored
Addressing issue #120
* Changed open-handling logic; Repositioned div to inside hamburger menu; <StyledBurger> now position: relative; <BurgerModal> now position absolute; Removed margin from <BurgerModal> * Added cursor: pointer to menu Co-authored-by: Arkajyoti Mukherjee <[email protected]> Co-authored-by: asharonbaltazar <[email protected]>
1 parent d28a2d0 commit cabc701

File tree

1 file changed

+132
-133
lines changed

1 file changed

+132
-133
lines changed

‎src/components/nav/Burger.tsx

+132-133
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,132 @@
1-
import React from "react";
2-
import styled from "styled-components";
3-
import { useTheme } from "../../styles";
4-
import { OutlinedButton } from "../button";
5-
import { Link } from "../link/index";
6-
7-
const StyledBurger = styled.div`
8-
margin: 0 0.7rem;
9-
margin-top: 0.5rem;
10-
height: 1.5rem;
11-
width: 2rem;
12-
display: flex;
13-
justify-content: space-between;
14-
flex-direction: column;
15-
align-items: flex-end;
16-
17-
.line {
18-
height: 0.35rem;
19-
background-color: white;
20-
border: 1px solid ${props => props.theme.colors.textSecondary};
21-
border-radius: 0.5rem;
22-
}
23-
.big {
24-
width: 2.2rem;
25-
}
26-
.small {
27-
width: 1.7rem;
28-
}
29-
`;
30-
31-
const GettingStarted = styled.div`
32-
margin: 0 auto;
33-
width: 80%;
34-
`;
35-
36-
const Ul = styled.ul`
37-
margin: 0 auto;
38-
text-align: center;
39-
width: 100%;
40-
41-
li {
42-
margin: 1rem 0;
43-
padding: 0.3rem 0;
44-
font-weight: 600;
45-
}
46-
47-
li:active {
48-
background-color: ${props => props.theme.colors.purple(0.2)};
49-
}
50-
`;
51-
52-
const BurgerModal = styled.div`
53-
position: fixed;
54-
z-index: 1;
55-
left: 0;
56-
top: 5rem;
57-
width: 100%;
58-
height: 20rem;
59-
margin: 0 3%;
60-
border-radius: 0.25rem;
61-
background: white;
62-
box-shadow: 0px 12px 19px rgba(0, 0, 0, 0.1);
63-
`;
64-
65-
const Burger: React.FC = () => {
66-
const [open, setOpen] = React.useState<boolean>(false);
67-
const { textSecondary } = useTheme().colors;
68-
69-
const handleSwitch = () => {
70-
setOpen(!open);
71-
};
72-
73-
return (
74-
<>
75-
<div onClick={handleSwitch}>
76-
<StyledBurger>
77-
<div className="line big" />
78-
<div className="line small" />
79-
<div className="line small" />
80-
</StyledBurger>
81-
</div>
82-
{open ? (
83-
<>
84-
<BurgerModal>
85-
<Ul>
86-
<li>
87-
<Link to="/whylitmus">Why Litmus?</Link>
88-
</li>
89-
90-
<li>
91-
<Link to="/chaoshub" className="listItems">
92-
ChaosHub
93-
</Link>
94-
</li>
95-
96-
<li>
97-
<a
98-
rel="noopener noreferrer"
99-
target="_blank"
100-
href="https://dev.to/t/litmuschaos"
101-
>
102-
Blogs
103-
</a>
104-
</li>
105-
106-
<li>
107-
<Link to="/community">Community</Link>
108-
</li>
109-
110-
<li>
111-
<GettingStarted>
112-
<a
113-
rel="noopener noreferrer"
114-
target="_blank"
115-
href="https://docs.litmuschaos.io/docs/getstarted/"
116-
>
117-
<OutlinedButton backgroundColor={textSecondary}>
118-
Get Started
119-
</OutlinedButton>
120-
</a>
121-
</GettingStarted>
122-
</li>
123-
</Ul>
124-
</BurgerModal>
125-
</>
126-
) : (
127-
<></>
128-
)}
129-
</>
130-
);
131-
};
132-
133-
export default Burger;
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { useTheme } from "../../styles";
4+
import { OutlinedButton } from "../button";
5+
import { Link } from "../link/index";
6+
7+
const StyledBurger = styled.div`
8+
position: relative;
9+
margin: 0 0.7rem;
10+
margin-top: 0.5rem;
11+
height: 1.5rem;
12+
width: 2rem;
13+
display: flex;
14+
justify-content: space-between;
15+
flex-direction: column;
16+
align-items: flex-end;
17+
cursor: pointer;
18+
19+
.line {
20+
height: 0.35rem;
21+
background-color: white;
22+
border: 1px solid ${props => props.theme.colors.textSecondary};
23+
border-radius: 0.5rem;
24+
}
25+
.big {
26+
width: 2.2rem;
27+
}
28+
.small {
29+
width: 1.7rem;
30+
}
31+
`;
32+
33+
const GettingStarted = styled.div`
34+
margin: 0 auto;
35+
width: 80%;
36+
`;
37+
38+
const Ul = styled.ul`
39+
margin: 0 auto;
40+
text-align: center;
41+
width: 100%;
42+
43+
li {
44+
margin: 1rem 0;
45+
padding: 0.3rem 0;
46+
font-weight: 600;
47+
}
48+
49+
li:active {
50+
background-color: ${props => props.theme.colors.purple(0.2)};
51+
}
52+
`;
53+
54+
const BurgerModal = styled.div`
55+
position: absolute;
56+
z-index: 1;
57+
left: 0;
58+
top: 5rem;
59+
width: 100%;
60+
height: 20rem;
61+
border-radius: 0.25rem;
62+
background: white;
63+
box-shadow: 0px 12px 19px rgba(0, 0, 0, 0.1);
64+
`;
65+
66+
const Burger: React.FC = () => {
67+
const [open, setOpen] = React.useState<boolean>(false);
68+
const { textSecondary } = useTheme().colors;
69+
70+
const handleSwitch = () => {
71+
setOpen(!open);
72+
};
73+
74+
return (
75+
<>
76+
<div onClick={handleSwitch}>
77+
<StyledBurger>
78+
<div className="line big" />
79+
<div className="line small" />
80+
<div className="line small" />
81+
</StyledBurger>
82+
{open && (
83+
<>
84+
<BurgerModal>
85+
<Ul>
86+
<li>
87+
<Link to="/whylitmus">Why Litmus?</Link>
88+
</li>
89+
90+
<li>
91+
<Link to="/chaoshub" className="listItems">
92+
ChaosHub
93+
</Link>
94+
</li>
95+
96+
<li>
97+
<a
98+
rel="noopener noreferrer"
99+
target="_blank"
100+
href="https://dev.to/t/litmuschaos"
101+
>
102+
Blogs
103+
</a>
104+
</li>
105+
106+
<li>
107+
<Link to="/community">Community</Link>
108+
</li>
109+
110+
<li>
111+
<GettingStarted>
112+
<a
113+
rel="noopener noreferrer"
114+
target="_blank"
115+
href="https://docs.litmuschaos.io/docs/getstarted/"
116+
>
117+
<OutlinedButton backgroundColor={textSecondary}>
118+
Get Started
119+
</OutlinedButton>
120+
</a>
121+
</GettingStarted>
122+
</li>
123+
</Ul>
124+
</BurgerModal>
125+
</>
126+
)}
127+
</div>
128+
</>
129+
);
130+
};
131+
132+
export default Burger;

0 commit comments

Comments
 (0)