Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 155ed02

Browse files
fix mobile nav issue and clean up style
1 parent 07e4112 commit 155ed02

File tree

3 files changed

+45
-22
lines changed

3 files changed

+45
-22
lines changed

‎src/components/Header.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Animate, AnimateGroup } from "react-simple-animate"
22
import { useRouter } from "next/router"
3-
// import Bday from "./Bday"
43
import home from "../data/home"
54
import typographyStyles from "../styles/typography.module.css"
65
import buttonStyles from "../styles/button.module.css"
@@ -136,7 +135,7 @@ export default function Header({
136135
router.push("get-started")
137136
}}
138137
>
139-
{home.getStarted} &nbsp;<span>▶</span>
138+
{home.getStarted}
140139
</button>
141140
</div>
142141
)}

‎src/components/Nav.module.css

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
.icon {
1010
z-index: 10;
1111
max-width: 50px;
12-
min-width: 35px;
12+
min-width: 30px;
1313
flex: 1;
1414
}
1515

@@ -34,12 +34,15 @@
3434
left: 0;
3535
width: 100%;
3636
position: fixed;
37-
height: 43px;
37+
height: 48px;
3838
}
3939

4040
:global(.dark) .actionButtonGroup {
4141
background: var(--color-button-blue);
4242
box-shadow: 0 2px 2px 0 #000;
43+
background: rgba(3, 9, 22, .8);
44+
-webkit-backdrop-filter: blur(.3rem);
45+
backdrop-filter: blur(.3rem);
4346
width: 100%;
4447
z-index: 20;
4548
}
@@ -57,15 +60,7 @@
5760
color: white;
5861
text-decoration: none;
5962
position: relative;
60-
min-width: 40px;
61-
}
62-
63-
.actionButtonGroup a:nth-child(6),
64-
.actionButtonGroup a:nth-child(7),
65-
.actionButtonGroup a:nth-child(8),
66-
.actionButtonGroup a:nth-child(9),
67-
.actionButtonGroup a:nth-child(10) {
68-
display: none;
63+
min-width: 48px;
6964
}
7065

7166
.actionButtonGroup a:first-child {
@@ -115,6 +110,10 @@ a.legacyLink {
115110
padding: 0 0.5rem;
116111
}
117112

113+
.mobileNav {
114+
display: none;
115+
}
116+
118117
:global(.light) .actionButtonWrapper {
119118
background: var(--color-primary);
120119
border-bottom: 3px solid var(--color-light-pink);
@@ -137,22 +136,34 @@ a.legacyLink {
137136
margin-left: 0.1rem;
138137
}
139138

139+
.donate a {
140+
color: #bf1650;
141+
font-size: 1.2rem;
142+
line-height: 1.4;
143+
text-decoration: none;
144+
}
145+
140146
@media (min-width: 768px) {
141147
.gitHubButtonWrap {
142148
right: 10px;
143149
}
144150

145-
.actionButtonGroup a:nth-child(6),
146-
.actionButtonGroupa:nth-child(7),
147-
.actionButtonGroupa:nth-child(8),
148-
.actionButtonGroupa:nth-child(9),
149-
.actionButtonGroupa:nth-child(10) {
151+
.actionButtonGroup a:nth-child(12) {
152+
display: none;
153+
}
154+
155+
.mobileNav {
150156
display: block;
151157
}
152158

153-
.actionButtonGroup a:nth-child(12) {
159+
.donate,
160+
.donate a {
154161
display: none;
155162
}
163+
164+
:global(.dark) .actionButtonGroup {
165+
background: var(--color-button-blue);
166+
}
156167
}
157168

158169
@media (min-width: 1040px) {

‎src/components/Nav.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,23 @@ export default function Nav() {
6060
title="React Hook Form Discord"
6161
>
6262
<svg viewBox="0 0 127.14 96.36">
63-
<path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
63+
<path
64+
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
6465
</svg>
6566
</a>
6667
</span>
6768

69+
<span className={`${styles.icon} ${styles.donate}`}>
70+
<a
71+
href="https://opencollective.com/react-hook-form"
72+
target="_blank"
73+
rel="noreferrer noopener"
74+
title="Donate to the project"
75+
>
76+
♥
77+
</a>
78+
</span>
79+
6880
<span className={styles.icon}>
6981
<a
7082
href="https://twitter.com/HookForm"
@@ -73,7 +85,8 @@ export default function Nav() {
7385
title="React Hook Form Twitter"
7486
>
7587
<svg viewBox="0 0 1200 1227">
76-
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
88+
<path
89+
d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
7790
</svg>
7891
</a>
7992
</span>
@@ -225,7 +238,7 @@ export default function Nav() {
225238
<span>{nav.advanced}</span>
226239
</Link>
227240
<Link
228-
className={router.asPath == "/faqs" ? "active" : ""}
241+
className={`desktopOnly ${router.asPath == "/faqs" ? "active" : ""}`}
229242
href="/faqs"
230243
>
231244
<div className={styles.iconWrapper}>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /