fix: navbar menu button not showing

ufosc · Jun 22, 2024 · 84294fc · 84294fc
1 parent 59e8206
commit 84294fc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
diff --git a/src/components/Index/ContactSection.tsx b/src/components/Index/ContactSection.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import axios from "axios"
 
 export type ContactFormInput = {
   Email:     string;
@@ -8,12 +7,6 @@ export type ContactFormInput = {
   Subscribe: boolean;
 }
 
-// Mailchimp does not have embeddable contact forms. Instead of
-// redirecting the user to another page, we implement our own
-// contact form and manually route the request.
-const MAILCHIMP_ENDPOINT = "https://us14.list-manage.com/contact-form/post?u=db783e723b7d1d98b155e95fb&form_id=80783a94938d6eda182e75cc327ece48"
-const CORS_PROXY = "https://api.allorigins.win/post?url="
-
 export default function ContactSection() {
   type TextEvent = { target: { value: string }}
   type CheckboxEvent = { target: { checked: boolean }}
@@ -32,20 +25,7 @@ export default function ContactSection() {
 
   const onSubmit = (event: { preventDefault: Function }) => {
     event.preventDefault()
-    axios.post(`${CORS_PROXY}${encodeURIComponent(MAILCHIMP_ENDPOINT)}`, {
-      fields: {
-        "1": form.Email,
-        "2": form.Subject,
-        "3": form.Message,
-      },
-      subscribe: form.Subscribe,
-      "mc-SMSPHONE-ack": false,
-    }).then((res) => {
-      console.log(res)
-      setForm({Email: "", Subject: "", Message: "", Subscribe: true})
-    }).catch((error) => {
-      console.log(error)
-    })
+    alert("Contact form is temporarily unavailable")
   }
 
   return (

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -84,13 +84,18 @@
 }
 
 .menu-btn {
+    min-width: 0px;
     margin-right: 30px;
     height: 1rem;
     background-color: transparent;
     border: none;
     outline: none;
 }
 
+.menu-btn:hover {
+    background: none;
+}
+
 .menu-btn img {
     height: inherit;
 }
@@ -103,7 +108,7 @@
 }
 
 /* ---- for devices under 730 px (tablet view) -------*/
-@media only screen and (min-width: 600px) and (max-width: 730px) {
+@media only screen and (min-width: 600px) and (max-width: 800px) {
     #navbar-title {
         font-size: 1rem;
     }
@@ -151,7 +156,7 @@
 }
 
 /* ----- for devices under (mobile view)-------*/
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 650px) {
     #navigation-bar {
         justify-content: flex-start;
         gap: 0;

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -27,12 +27,12 @@ const NavBar = (props: { children: any }) => {
   const [showMenu, setShowMenu] = useState<boolean>(false)
   const [forceShowMenu, setForceShowMenu] = useState<boolean>(false)
   useEffect(() => {
-    if (window.innerWidth >= 601) {
+    if (window.innerWidth >= 650) {
       setShowMenu(true)
     }
 
     window.addEventListener('resize', () => {
-      if (window.innerWidth >= 601) {
+      if (window.innerWidth >= 650) {
         setShowMenu(true)
         setForceShowMenu(false)
         return
@@ -58,8 +58,11 @@ const NavBar = (props: { children: any }) => {
         }
         {
           (!showMenu) ? (
-            <button className="menu-btn" onClick={() => setForceShowMenu(!forceShowMenu)}>
-              <StaticImage src={HBMenu} alt="menu" width={22} />
+            <button className="menu-btn"
+              onClick={() => setForceShowMenu(!forceShowMenu)}>
+              <div style={{ width: 22 }}>
+                <StaticImage src={HBMenu} alt="menu" width={22} />
+              </div>
             </button>
           ): null
         }