8000 Add menu in responsive · immutable-js/immutable-js@265a941 · GitHub
[go: up one dir, main page]
Skip to content

Commit 265a941

Browse files
jdeniaujdeniau
committed
Add menu in responsive
1 parent 0845579 commit 265a941

File tree

3 files changed

+129
-17
lines changed

3 files changed

+129
-17
lines changed

‎website/src/BurgerNav.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
'use client';
2+
import React, { JSX } from 'react';
3+
4+
function BurgerNav(props: React.SVGProps<SVGSVGElement>): JSX.Element {
5+
return (
6+
<div className="MenuButton__Toggle">
7+
<button
8+
type="button"
9+
onClick={() => {
10+
document
11+
.getElementsByClassName('sideBar')[0]
12+
.classList.toggle('sideBar--visible');
13+
}}
14+
>
15+
<svg
16+
width={32}
17+
height={32}
18+
viewBox="0 0 32 32"
19+
fill="none"
20+
xmlns="http://www.w3.org/2000/svg"
21+
aria-label="Open menu"
22+
{...props}
23+
>
24+
<rect
25+
x="6"
26+
y="9"
27+
width="20"
28+
height="2.5"
29+
rx="1.25"
30+
fill="currentColor"
31+
/>
32+
<rect
33+
x="6"
34+
y="15"
35+
width="20"
36+
height="2.5"
37+
rx="1.25"
38+
fill="currentColor"
39+
/>
40+
<rect
41+
x="6"
42+
y="21"
43+
width="20"
44+
height="2.5"
45+
rx="1.25"
46+
fill="currentColor"
47+
/>
48+
</svg>
49+
</button>
50+
</div>
51+
);
52+
}
53+
54+
export default BurgerNav;

‎website/src/DocHeader.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import BurgerNav from './BurgerNav';
12
import { HeaderLinks, HeaderLogoLink } from './Header';
23

34
export function DocHeader({
@@ -14,6 +15,8 @@ export function DocHeader({
1415
<HeaderLogoLink />
1516
<HeaderLinks versions={versions} currentVersion={currentVersion} />
1617
</div>
18+
19+
<BurgerNav />
1720
</div>
1821
</div>
1922
);

‎website/styles/globals.css

Lines changed: 72 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66

77
html,
88
body {
9+
--line-height: 1.625;
10+
--font-size: 16px;
11+
--font-size-small-screen: 14px;
12+
--header-content-padding: 12px;
13+
914
--link-color: #4183c4;
1015
--link-hover-color: #2b6db0;
1116
--header-color: #212325;
@@ -46,14 +51,14 @@ body,
4651
input {
4752
color: var(--body-color);
4853
font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
49-
font-size: 16px;
50-
line-height: 1.625;
54+
font-size: var(--font-size);
55+
line-height: var(--line-height);
5156
}
5257

5358
@media only screen and (max-width: 680px) {
5459
body,
5560
input {
56-
font-size: 14px;
61+
font-size: var(--font-size-small-screen);
5762
}
5863
}
5964

@@ -243,24 +248,54 @@ img {
243248
.miniHeaderContents {
244249
margin: 0 auto;
245250
max-width: 1024px;
246-
padding: 12px 36px;
251+
padding: var(--header-content-padding) 36px;
247252
position: relative;
248253
text-align: right;
249254
}
250255

251-
@media only screen and (max-width: 680px) {
252-
.miniHeaderContents {
253-
padding: 12px;
254-
}
255-
}
256-
257256
.miniLogo {
258257
float: left;
259258
left: -140px;
260-
top: 12px;
259+
top: var(--header-content-padding);
260+
}
261+
262+
.MenuButton__Toggle {
263+
display: none;
264+
}
265+
266+
.MenuButton__Toggle > button {
267+
background: transparent;
268+
border: none;
269+
color: #fff;
270+
cur F438 sor: pointer;
271+
font-size: 1.5em;
272+
padding: 0;
261273
}
262274

263275
@media only screen and (max-width: 680px) {
276+
.sideBar .MenuButton__Toggle {
277+
display: block;
278+
text-align: right;
279+
margin-top: 8px;
280+
margin-right: -15px;
281+
}
282+
283+
.miniHeader .MenuButton__Toggle {
284+
display: grid;
285+
place-items: center;
286+
padding: 0 5px;
287+
}
288+
289+
.miniHeader {
290+
display: flex;
291+
flex-direction: row;
292+
justify-content: flex-end;
293+
}
294+
295+
.miniHeaderContents {
296+
margin: 0;
297+
padding: var(--header-content-padding);
298+
}
264299
.miniLogo {
265300
display: none;
266301
}
@@ -493,19 +528,39 @@ img {
493528
transform: rotate(180deg);
494529
}
495530

496-
@media only screen and (max-width: 680px) {
497-
.sideBar {
498-
display: none;
499-
}
500-
}
501-
502531
.sideBar .scrollContent {
503532
box-sizing: border-box;
504533
height: 100%;
505534
width: 300px;
506535
overflow: hidden auto;
507536
}
508537

538+
@media only screen and (max-width: 680px) {
539+
.sideBar {
540+
display: none;
541+
position: absolute;
542+
z-index: 1;
543+
top: 0;
544+
height: 100vh;
545+
}
546+
547+
.sideBar--visible {
548+
display: block;
549+
}
550+
551+
.sideBar__background {
552+
position: absolute;
553+
margin-left: 0;
554+
padding-left: 12px;
555+
right: -12px;
556+
}
557+
558+
.sideBar .scrollContent {
559+
width: auto;
560+
padding: 0 20px;
561+
}
562+
}
563+
509564
.sideBar h2 {
510565
font-size: 1em;
511566
margin: 1em 0;

0 commit comments

Comments
 (0)
0