Skip to content

Commit 3b7010c

Browse files
Spring3Spring3
committed
Merge branch 'release/1.1.4'
2 parents df6be67 + 8ed43ad commit 3b7010c

File tree

4 files changed

+139
-45
lines changed

4 files changed

+139
-45
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "website",
3-
"version": "1.1.3",
3+
"version": "1.1.4",
44
"description": "Danv's personal website",
55
"scripts": {
66
"build": "gatsby build",

‎src/components/common/BurgerMenu.jsx

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const BurgerMenu = memo(() => {
125125
clearTimeout(timeout);
126126
} else {
127127
timeout = setTimeout(() => {
128-
setMenuOpen(false);
128+
// setMenuOpen(false);
129129
}, 2000);
130130
}
131131
} else {
@@ -231,45 +231,50 @@ const BurgerMenu = memo(() => {
231231
justifyContent="space-between"
232232
flexWrap="nowrap"
233233
>
234-
<Flex
235-
css={styles.projectSection}
236-
direction="column"
237-
justifyContent="flex-start"
238-
>
239-
<h4 css={styles.marginless}>Projects</h4>
240-
<Link css={styles.transparentLink} to="/aurelins-website">
241-
<SubHeader css={styles.marginless}>Aurelins Website</SubHeader>
242-
</Link>
243-
<Link css={styles.transparentLink} to="/redshape">
244-
<SubHeader css={styles.marginless}>Redshape</SubHeader>
245-
</Link>
246-
<Link css={styles.transparentLink} to="/starbot">
247-
<SubHeader css={styles.marginless}>Starbot</SubHeader>
248-
</Link>
249-
<Link css={styles.transparentLink} to="/twitch-auto-points">
250-
<SubHeader css={styles.marginless}>Twitch Auto Points</SubHeader>
251-
</Link>
252-
<Link css={styles.transparentLink} to="/website">
253-
<SubHeader css={styles.marginless}>Website</SubHeader>
254-
</Link>
255-
</Flex>
256-
<Flex
257-
css={styles.utilitySection}
258-
direction="column"
259-
justifyContent="center"
260-
>
261-
<CookieManager />
234+
<Flex direction="column" margined gap="2rem">
235+
<Flex
236+
css={styles.projectSection}
237+
direction="column"
238+
justifyContent="flex-start"
239+
>
240+
<h4 css={styles.marginless}>Projects</h4>
241+
<Link css={styles.transparentLink} to="/aurelins-website">
242+
<SubHeader css={styles.marginless}>Aurelins Website</SubHeader>
243+
</Link>
244+
<Link css={styles.transparentLink} to="/redshape">
245+
<SubHeader css={styles.marginless}>Redshape</SubHeader>
246+
</Link>
247+
<Link css={styles.transparentLink} to="/starbot">
248+
<SubHeader css={styles.marginless}>Starbot</SubHeader>
249+
</Link>
250+
<Link css={styles.transparentLink} to="/twitch-auto-points">
251+
<SubHeader css={styles.marginless}>
252+
Twitch Auto Points
253+
</SubHeader>
254+
</Link>
255+
<Link css={styles.transparentLink} to="/website">
256+
<SubHeader css={styles.marginless}>Website</SubHeader>
257+
</Link>
258+
</Flex>
262259
<Flex
263-
css={styles.utilitySection}
264-
justifyContent="space-between"
265-
alignItems="center"
260+
css={styles.projectSection}
261+
direction="column"
262+
justifyContent="flex-start"
266263
>
264+
<h4 css={styles.marginless}>Others</h4>
267265
<Link css={styles.transparentLink} to="/cv">
268-
<h4 css={styles.marginless}>CV Page</h4>
266+
<SubHeader css={styles.marginless}>CV Page</SubHeader>
269267
</Link>
270-
<SocialButtons size={24} onlyImportant />
271268
</Flex>
272269
</Flex>
270+
<Flex
271+
css={styles.utilitySection}
272+
justifyContent="space-between"
273+
alignItems="center"
274+
>
275+
<CookieManager />
276+
<SocialButtons size={24} onlyImportant />
277+
</Flex>
273278
</Flex>
274279
</animated.div>
275280
</>

‎src/components/common/Toggle.jsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react';
2+
import { css } from '@emotion/react';
3+
import { MARKERS } from '../../theme';
4+
import { Flex } from './Flex';
5+
6+
const styles = {
7+
container: css`
8+
input:checked + label span:last-child {
9+
background: ${MARKERS.green} !important;
10+
}
11+
12+
input:checked + label span:last-child::before {
13+
transform: translateX(24px);
14+
}
15+
`,
16+
input: css`
17+
position: absolute;
18+
left: -9999999px;
19+
`,
20+
text: css`
21+
margin-right: 0.75rem;
22+
`,
23+
label: css`
24+
cursor: pointer;
25+
position: relative;
26+
display: flex;
27+
align-items: center;
28+
justify-content: space-between;
29+
`,
30+
toggle: css`
31+
position: relative;
32+
width: 50px;
33+
height: 26px;
34+
border-radius: 15px;
35+
box-shadow: inset 0 0 5px rgb(0 0 0 / 40%);
36+
background: rgb(240, 240, 240);
37+
transition: all 0.3s;
38+
39+
&::before,
40+
&::after {
41+
content: '';
42+
position: absolute;
43+
}
44+
45+
&::before {
46+
left: 1px;
47+
top: 1px;
48+
width: 24px;
49+
height: 24px;
50+
background: white;
51+
border-radius: 50%;
52+
z-index: 1;
53+
transition: all 0.3s;
54+
}
55+
`,
56+
};
57+
58+
const Toggle = ({ id, onChange, label, labelStyles, checked }) => {
59+
const handleChange = (e) => {
60+
if (onChange) {
61+
onChange(e.target.checked);
62+
}
63+
};
64+
65+
return (
66+
<Flex css={styles.container}>
67+
<input
68+
className={labelStyles}
69+
css={styles.input}
70+
onChange={handleChange}
71+
checked={checked}
72+
type="checkbox"
73+
id={id}
74+
/>
75+
<label css={styles.label} htmlFor={id}>
76+
<span css={[styles.text, labelStyles]}>{label}</span>
77+
<span css={styles.toggle} />
78+
</label>
79+
</Flex>
80+
);
81+
};
82+
83+
export { Toggle };

‎src/components/common/cookie/CookieManager.jsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import React from 'react';
22
import { useCookieConsent } from '../../../context/CookieConsentContext';
33
import { Flex } from '../Flex';
4-
import { Reference } from '../Reference';
4+
import { css } from '@emotion/react';
5+
import { Toggle } from '../Toggle';
6+
7+
const styles = {
8+
label: css`
9+
font-weight: bold;
10+
`,
11+
};
512

613
const CookieManager = () => {
714
const { consent, acceptCookies, rejectCookies } = useCookieConsent();
815

9-
const updateCookieValue = async (e) => {
10-
e.preventDefault();
16+
const updateCookieValue = async () => {
1117
const nextValue = consent === null ? true : !consent;
1218
if (nextValue === true) {
1319
acceptCookies();
@@ -16,15 +22,15 @@ const CookieManager = () => {
1622
}
1723
};
1824

19-
const text = consent === true ? 'Reject cookies' : 'Allow cookies';
20-
2125
return (
2226
<Flex gap="1rem" margined alignItems="center">
23-
<strong>Cookies:</strong>&nbsp;
24-
<span>{consent ? 'Allowed' : 'Rejected'}</span>
25-
<Reference href="#" role="button" onClick={updateCookieValue}>
26-
{text}
27-
</Reference>
27+
<Toggle
28+
onChange={updateCookieValue}
29+
label="Cookies:"
30+
checked={consent}
31+
id="cookie-manager"
32+
labelStyles={styles.label}
33+
/>
2834
</Flex>
2935
);
3036
};

0 commit comments

Comments
 (0)