Skip to content

Commit 1e56153

Browse files
partyparrotgregpartyparrotgreg
committed
chore(header): update styles for mobile responsiveness and add mobile menu component
1 parent da56920 commit 1e56153

File tree

10 files changed

+237
-39
lines changed

10 files changed

+237
-39
lines changed

‎apps/insights/.env.development‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
DISABLE_ACCESSIBILITY_REPORTING=true

‎apps/insights/src/components/MobileMenu/mobile-menu.module.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.mobileMenuTrigger {
4+
display: none;
5+
@include theme.mobile {
6+
display: block;
7+
}
8+
}
9+
10+
.mobileMenuOverlay {
11+
background: rgba(0,0,0,0.4);
12+
position: fixed;
13+
inset: 0;
14+
z-index: 999;
15+
}
16+
17+
.mobileMenuContainer {
18+
border-top-left-radius: theme.border-radius("2xl");
19+
border-top-right-radius: theme.border-radius("2xl");
20+
background: theme.color("background", "modal");
21+
position: absolute;
22+
bottom: 0;
23+
left: 0;
24+
right: 0;
25+
padding: 1rem;
26+
display: flex;
27+
flex-flow: column nowrap;
28+
gap: theme.spacing(4);
29+
}
30+
31+
.mobileMenuHandle {
32+
background: theme.color("background", "secondary");
33+
width: 33%;
34+
height: 6px;
35+
border-radius: theme.border-radius("full");
36+
align-self: center;
37+
}
38+
39+
.mobileThemeSwitcher {
40+
display: flex;
41+
flex-flow: row nowrap;
42+
justify-content: space-between;
43+
align-items: center;
44+
}
45+
46+
.mobileThemeSwitcherFeedback {
47+
display: flex;
48+
flex-flow: row nowrap;
49+
align-items: center;
50+
gap: theme.spacing(3);
51+
text-transform: capitalize;
52+
font-weight: theme.font-weight("medium");
53+
}

‎apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
'use client';
2+
import { Lifebuoy } from "@phosphor-icons/react/dist/ssr/Lifebuoy";
3+
import { List } from "@phosphor-icons/react/dist/ssr/List";
4+
import { X } from "@phosphor-icons/react/dist/ssr/X";
5+
import { Button } from "@pythnetwork/component-library/Button";
6+
import clsx from "clsx";
7+
import { useTheme } from "next-themes";
8+
import { useState } from "react";
9+
10+
import styles from "./mobile-menu.module.scss";
11+
import { SupportDrawer } from "../Root/support-drawer";
12+
import { ThemeSwitch } from "../Root/theme-switch";
13+
14+
15+
export const MobileMenu = ({
16+
className,
17+
...props
18+
}: {
19+
className?: string | string[];
20+
}) => {
21+
const { theme } = useTheme();
22+
const [isOpen, setIsOpen] = useState(false);
23+
24+
const toggleMenu = () => {
25+
setIsOpen(!isOpen);
26+
};
27+
28+
return (
29+
<div className={clsx(styles.mobileMenuTrigger, className)} {...props}>
30+
<Button variant="ghost" size="sm" afterIcon={List} rounded onPress={toggleMenu}>Menu</Button>
31+
{isOpen && (
32+
<div className={styles.mobileMenuOverlay}>
33+
<div className={styles.mobileMenuContainer}>
34+
<div className={styles.mobileMenuHandle} />
35+
<Button
36+
href="https://docs.pyth.network"
37+
size="md"
38+
rounded
39+
target="_blank"
40+
>
41+
Dev Docs
42+
</Button>
43+
<SupportDrawer>
44+
<Button beforeIcon={Lifebuoy} variant="ghost" size="md" rounded>
45+
Support
46+
</Button>
47+
</SupportDrawer>
48+
<div className={styles.mobileThemeSwitcher}><div>Theme</div>
49+
<div className={styles.mobileThemeSwitcherFeedback}>
50+
<div>{theme}</div>
51+
<ThemeSwitch />
52+
</div>
53+
</div>
54+
<Button variant="outline" afterIcon={X} rounded onPress={toggleMenu}>Close</Button>
55+
</div>
56+
</div>
57+
)}
58+
59+
</div>
60+
);
61+
};

‎apps/insights/src/components/Root/header.module.scss‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
top: 0;
66
width: 100%;
77
background-color: theme.color("background", "nav-blur");
8-
backdrop-filter: blur(32px);
8+
// TODO: This causes that navigation is not fixed
9+
// backdrop-filter: blur(32px);
910

1011
.content {
1112
height: 100%;
@@ -16,18 +17,24 @@
1617

1718
.leftMenu {
1819
flex: none;
19-
gap: theme.spacing(6);
20+
gap: theme.spacing(4);
21+
position: relative;
2022

2123
@include theme.row;
2224

2325
.logoLink {
2426
padding: theme.spacing(3);
25-
margin: -#{theme.spacing(3)};
2627
color: theme.color("foreground");
28+
position: absolute;
29+
left: -#{theme.spacing(16)};
30+
@include theme.mobile {
31+
left: 0;
32+
position: relative;
33+
}
2734

2835
.logoWrapper {
29-
width: theme.spacing(9);
30-
height: theme.spacing(9);
36+
width: theme.spacing(8);
37+
height: theme.spacing(8);
3138
position: relative;
3239

3340
.logo {
@@ -52,33 +59,43 @@
5259

5360
.rightMenu {
5461
flex: none;
62+
position: relative;
5563
gap: theme.spacing(2);
5664

5765
@include theme.row;
5866

59-
margin-right: -#{theme.button-padding("sm", false)};
60-
6167
.themeSwitch {
62-
margin-left: theme.spacing(1);
63-
}
64-
}
65-
66-
@media screen and (min-width: #{theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))}) {
67-
.leftMenu {
68-
margin-left: -#{theme.spacing(9) + theme.spacing(7)};
69-
70-
.logoLink {
71-
margin-right: -#{theme.spacing(2)};
72-
}
73-
}
74-
75-
.rightMenu {
76-
margin-right: -#{theme.spacing(9) + theme.spacing(7)};
77-
78-
.themeSwitch {
79-
margin-left: theme.spacing(5);
68+
position: absolute;
69+
right: -#{theme.spacing(16)};
70+
top: 0;
71+
@include theme.mobile {
72+
display: none;
8073
}
8174
}
8275
}
76+
// Reason: you can absolute position relatively to a container and disable this behavior on mobile
77+
// @media screen and (min-width: #{theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))}) {
78+
// .leftMenu {
79+
// margin-left: -#{theme.spacing(9) + theme.spacing(7)};
80+
81+
// .logoLink {
82+
// margin-right: -#{theme.spacing(2)};
83+
// }
84+
// }
85+
86+
// .rightMenu {
87+
// margin-right: -#{theme.spacing(9) + theme.spacing(7)};
88+
89+
// .themeSwitch {
90+
// margin-left: theme.spacing(5);
91+
// }
92+
// }
93+
// }
94+
}
95+
}
96+
97+
.hideOnMobile {
98+
@include theme.mobile {
99+
display: none;
83100
}
84101
}

‎apps/insights/src/components/Root/header.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { Lifebuoy } from "@phosphor-icons/react/dist/ssr/Lifebuoy";
24
import { Button } from "@pythnetwork/component-library/Button";
35
import { Link } from "@pythnetwork/component-library/Link";
@@ -10,6 +12,7 @@ import { SearchButton } from "./search-button";
1012
import { SupportDrawer } from "./support-drawer";
1113
import { MainNavTabs } from "./tabs";
1214
import { ThemeSwitch } from "./theme-switch";
15+
import { MobileMenu } from "../MobileMenu/mobile-menu.v2";
1316

1417
export const Header = ({ className, ...props }: ComponentProps<"header">) => (
1518
<header className={clsx(styles.header, className)} {...props}>
@@ -25,22 +28,29 @@ export const Header = ({ className, ...props }: ComponentProps<"header">) => (
2528
<MainNavTabs />
2629
</div>
2730
<div className={styles.rightMenu}>
28-
<SupportDrawer>
29-
<Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
30-
Support
31-
</Button>
32-
</SupportDrawer>
31+
<div className={styles.hideOnMobile}>
32+
<SupportDrawer>
33+
<Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
34+
Support
35+
</Button>
36+
</SupportDrawer>
37+
</div>
3338
<SearchButton />
34-
<Button
35-
href="https://docs.pyth.network"
36-
size="sm"
37-
rounded
38-
target="_blank"
39-
>
40-
Dev Docs
41-
</Button>
39+
<div className={styles.hideOnMobile}>
40+
<Button
41+
href="https://docs.pyth.network"
42+
size="sm"
43+
rounded
44+
target="_blank"
45+
>
46+
Dev Docs
47+
</Button>
48+
</div>
4249
<ThemeSwitch className={styles.themeSwitch ?? ""} />
50+
<MobileMenu />
4351
</div>
4452
</div>
4553
</header>
4654
);
55+
56+

‎apps/insights/src/components/Root/index.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ $header-height: theme.spacing(20);
77
headerHeight: $header-height;
88
}
99

10+
11+
1012
.root {
1113
scroll-padding-top: $header-height;
1214
overflow-x: hidden;

‎packages/component-library/src/Button/index.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
text-decoration: none;
1313
outline-offset: 0;
1414
outline: theme.spacing(1) solid transparent;
15+
text-align: center;
1516

1617
.iconWrapper {
1718
display: inline-grid;

‎packages/component-library/src/Html/base.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
line-height: 1;
1111
}
1212

13+
nextjs-portal {
14+
display: none;
15+
}
16+
1317
html {
1418
// We use `scrollbar-gutter: stable` which prevents the page from jumping when
1519
// adding or removing the scrollbar. However, react-aria [tries to add a

‎packages/component-library/src/MainNavTabs/index.module.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,25 @@
5959
}
6060
}
6161
}
62+
63+
64+
@include theme.mobile {
65+
.mainNavTabs {
66+
background: red;
67+
position: fixed;
68+
bottom: 0;
69+
left: 0;
70+
right: 0;
71+
z-index: 900;
72+
padding: 0.5rem;
73+
display: flex;
74+
justify-content: space-between;
75+
align-items: center;
76+
height: 3rem;
77+
border-top: 1px solid theme.color("border");
78+
}
79+
.tab {
80+
flex-grow: 1;
81+
text-align: center;
82+
}
83+
}

‎packages/component-library/src/theme.scss‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ $border-radius: (
8181
}
8282

8383
$brakpoints: (
84-
"sm": 480px,
84+
"xs": 480px,
85+
"sm": 720px,
8586
"md": 768px,
8687
"lg": 1024px,
8788
"xl": 1280px,
@@ -92,6 +93,25 @@ $brakpoints: (
9293
@return map-get-strict($brakpoints, $breakpoint);
9394
}
9495

96+
97+
@mixin mobile() {
98+
@media screen and (max-width: breakpoint("sm")) {
99+
@content;
100+
}
101+
}
102+
103+
@mixin tablet() {
104+
@media screen and (min-width: breakpoint("md")) {
105+
@content;
106+
}
107+
}
108+
109+
@mixin desktop() {
110+
@media screen and (min-width: breakpoint("xl")) {
111+
@content;
112+
}
113+
}
114+
95115
$color-pallette: (
96116
"black": #000,
97117
"white": #fff,
@@ -738,6 +758,9 @@ $max-width: 96rem;
738758
max-width: $max-width;
739759
padding: 0 spacing(6);
740760
box-sizing: content-box;
761+
@include mobile {
762+
padding: 0 spacing(4);
763+
}
741764
}
742765

743766
@mixin row {
@@ -778,6 +801,8 @@ $elevations: (
778801
box-shadow: map-get-strict($elevations, $elevation...);
779802
}
780803

804+
805+
781806
@mixin h3 {
782807
font-size: font-size("2xl");
783808
font-style: normal;
@@ -803,3 +828,5 @@ $elevations: (
803828
font-style: normal;
804829
line-height: 1;
805830
}
831+
832+

0 commit comments

Comments
 (0)