fix mobile nav issue and clean up style

Author: bluebill1049

src/components/Header.tsx

@@ -1,6 +1,5 @@
 import { Animate, AnimateGroup } from "react-simple-animate"
 import { useRouter } from "next/router"
-// import Bday from "./Bday"
 import home from "../data/home"
 import typographyStyles from "../styles/typography.module.css"
 import buttonStyles from "../styles/button.module.css"
@@ -136,7 +135,7 @@ export default function Header({
                     router.push("get-started")
                   }}
                 >
-                  {home.getStarted} &nbsp;<span>▶</span>
+                  {home.getStarted}
                 </button>
               </div>
             )}

src/components/Nav.module.css

@@ -9,7 +9,7 @@
 .icon {
   z-index: 10;
   max-width: 50px;
-  min-width: 35px;
+  min-width: 30px;
   flex: 1;
 }
 
@@ -34,12 +34,15 @@
   left: 0;
   width: 100%;
   position: fixed;
-  height: 43px;
+  height: 48px;
 }
 
 :global(.dark) .actionButtonGroup {
   background: var(--color-button-blue);
   box-shadow: 0 2px 2px 0 #000;
+  background: rgba(3, 9, 22, .8);
+  -webkit-backdrop-filter: blur(.3rem);
+  backdrop-filter: blur(.3rem);
   width: 100%;
   z-index: 20;
 }
@@ -57,15 +60,7 @@
   color: white;
   text-decoration: none;
   position: relative;
-  min-width: 40px;
-}
-
-.actionButtonGroup a:nth-child(6),
-.actionButtonGroup a:nth-child(7),
-.actionButtonGroup a:nth-child(8),
-.actionButtonGroup a:nth-child(9),
-.actionButtonGroup a:nth-child(10) {
-  display: none;
+  min-width: 48px;
 }
 
 .actionButtonGroup a:first-child {
@@ -115,6 +110,10 @@ a.legacyLink {
   padding: 0 0.5rem;
 }
 
+.mobileNav {
+  display: none;
+}
+
 :global(.light) .actionButtonWrapper {
   background: var(--color-primary);
   border-bottom: 3px solid var(--color-light-pink);
@@ -137,22 +136,34 @@ a.legacyLink {
   margin-left: 0.1rem;
 }
 
+.donate a {
+  color: #bf1650;
+  font-size: 1.2rem;
+  line-height: 1.4;
+  text-decoration: none;
+}
+
 @media (min-width: 768px) {
   .gitHubButtonWrap {
     right: 10px;
   }
 
-  .actionButtonGroup a:nth-child(6),
-  .actionButtonGroup a:nth-child(7),
-  .actionButtonGroup a:nth-child(8),
-  .actionButtonGroup a:nth-child(9),
-  .actionButtonGroup a:nth-child(10) {
+  .actionButtonGroup a:nth-child(12) {
+    display: none;
+  }
+
+  .mobileNav {
     display: block;
   }
 
-  .actionButtonGroup a:nth-child(12) {
+  .donate,
+  .donate a {
     display: none;
   }
+
+  :global(.dark) .actionButtonGroup {
+    background: var(--color-button-blue);
+  }
 }
 
 @media (min-width: 1040px) {

src/components/Nav.tsx

@@ -60,11 +60,23 @@ export default function Nav() {
             title="React Hook Form Discord"
           >
             <svg viewBox="0 0 127.14 96.36">
-              <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" />
+              <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"/>
             </svg>
           </a>
         </span>
 
+        <span className={`${styles.icon} ${styles.donate}`}>
+          <a
+            href="https://opencollective.com/react-hook-form"
+            target="_blank"
+            rel="noreferrer noopener"
+            title="Donate to the project"
+          >
+          ♥
+          </a>
+        </span>
+
         <span className={styles.icon}>
           <a
             href="https://twitter.com/HookForm"
@@ -73,7 +85,8 @@ export default function Nav() {
             title="React Hook Form Twitter"
           >
             <svg viewBox="0 0 1200 1227">
-              <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" />
+              <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"/>
             </svg>
           </a>
         </span>
@@ -225,7 +238,7 @@ export default function Nav() {
             <span>{nav.advanced}</span>
           </Link>
           <Link
-            className={router.asPath == "/faqs" ? "active" : ""}
+            className={`desktopOnly ${router.asPath == "/faqs" ? "active" : ""}`}
             href="/faqs"
           >
             <div className={styles.iconWrapper}>