Fixes console error issue and some functional issues. (#75)

* Fixes console errors issue. * Fixes 4 functional issues. --------- Co-authored-by: Rajat Rajdeep <[email protected]>
pythonindia · Jun 19, 2023 · bcf11d7 · bcf11d7
1 parent 9a2b558
commit bcf11d7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 56 deletions.
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -53,7 +53,6 @@ const Footer: React.FC = () => {
   return (
     <footer
       className="bg-footer"
-      style={{ backgroundImage: `url(images/bg-header-dot.png)` }}
     >
       <div className="container">
         <div className="row pt-5 pb-5">

diff --git a/components/header.js b/components/header.js
@@ -1,25 +1,52 @@
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
+
 import logo from "../public/images/logo.png";
+
 export default function Header() {
-  function handleClick() {
-    let navDrop = document.getElementById("navbarNavDropdown");
-    let hamburger = document.getElementsByClassName("navbar-toggler")[0];
-    // TODO
-    if (
-      navDrop.classList[0] == "collapse" ||
-      navDrop.classList[1] == "collapse"
-    ) {
-      navDrop.classList.remove("collapse");
-      hamburger.setAttribute("aria-expanded", "true");
-    } else {
-      navDrop.classList.add("collapse");
-      hamburger.setAttribute("aria-expanded", "false");
+  const [activeNavBarItem, setActiveNavBarItem] = useState(0);
+  const [navBarToggle, setNavBarToggle] = useState(false);
+  const navBarItems = [
+    {
+      name: "Home",
+      href: "/",
+      openInNewTab: false,
+    },
+    {
+      name: "Journey",
+      href: "/#journey",
+      openInNewTab: false,
+    },
+    {
+      name: "Attend",
+      href: "/#attend",
+      openInNewTab: false,
+    },
+    {
+      name: "Sponsors",
+      href: "/#sponsors",
+      openInNewTab: false,
+    },
+    {
+      name: "Blog",
+      href: "https://in.pycon.org/blog/",
+      openInNewTab: true,
+    },
+    {
+      name: "FAQ",
+      href: "/faq",
+      openInNewTab: false,
+    },
+    {
+      name: "COC",
+      href: "/code-of-conduct",
+      openInNewTab: false,
     }
-    // TODO
-  }
+  ]
 
   return (
     <header className="bg-header sticky-top">
@@ -46,29 +73,29 @@ export default function Header() {
                   data-bs-toggle="collapse"
                   data-bs-target="#navbarNavDropdown"
                   aria-controls="navbarNavDropdown"
-                  aria-expanded="true"
+                  aria-expanded={navBarToggle ? "true" : "false"}
                   aria-label="Toggle navigation"
-                  onClick={handleClick}
+                  onClick={() => setNavBarToggle((prv) => (!prv))}
                 >
                   <FontAwesomeIcon icon={faBars} />
                 </button>
                 <div
-                  className="collapse navbar-collapse"
+                  className={"navbar-collapse" + (navBarToggle ? "" : " collapse")}
                   id="navbarNavDropdown"
                 >
                   <ul className="navbar-nav">
-                    <li className="nav-item">
-                      <Link href="/"><span className="nav-link active">Home</span></Link>
-                    </li>
-                    <li className="nav-item">
-                      <Link href="/#journey"><span className="nav-link">Journey</span></Link>
-                    </li>
-                    <li className="nav-item">
-                      <Link href="/#attend"><span className="nav-link">Attend</span></Link>
-                    </li>
-                    <li className="nav-item">
-                      <Link href="/#sponsors"><span className="nav-link">Sponsors</span></Link>
-                    </li>
+                    {navBarItems.map((item, index) => (
+                      <li key={index} className="nav-item">
+                        <Link
+                          href={item.href}
+                          target={item.openInNewTab ? "_blank" : "_self"}
+                          onClick={() => setNavBarToggle(false)}
+                        >
+                          <span className={"nav-link" + (index == activeNavBarItem ? " active" : "")}>
+                            {item.name}</span>
+                        </Link>
+                      </li>
+                    ))}
                     {/* <li className="nav-item">
                       <Link href="/#keynote"><span className="nav-link">Keynotes</span></Link>
                     </li> */}
@@ -78,17 +105,6 @@ export default function Header() {
                     {/* <li className="nav-item">
                       <Link href="/#events"><span className="nav-link">Events</span></Link>
                     </li> */}
-                    <li className="nav-item">
-                      <Link href="https://in.pycon.org/blog/" passHref>
-                        <span className="nav-link" target="_blank">Blog</span>
-                      </Link>
-                    </li>
-                    <li className="nav-item">
-                      <Link href="/faq"><span className="nav-link">FAQ</span></Link>
-                    </li>
-                    <li className="nav-item">
-                      <Link href="/code-of-conduct"><span className="nav-link">COC</span></Link>
-                    </li>
                     {/* <li className="nav-item dropdown">
                       <span
                         className="nav-link dropdown-toggle"

diff --git a/components/registration.js b/components/registration.js
@@ -14,8 +14,8 @@ const RegistrationSection = () => {
               deep into the world of python and explore its limitless
               potentials.
             </p>
-            <div className="row register-btn mt-5">
-              <div className="col-md-5 col-8">
+            <div className="row register-btn">
+              <div className="col-md-5 col-8 pt-3">
                 <Button
                   buttonClassName="green-btn"
                   anchorClassName="text-decoration-none text-light"
@@ -24,7 +24,7 @@ const RegistrationSection = () => {
                   disabled={true}
                 />
               </div>
-              <div className="col-md-5 col-8">
+              <div className="col-md-5 col-8 pt-3">
                 <Button
                   buttonClassName="submit-btn"
                   anchorClassName="text-decoration-none"

diff --git a/pages/pycon-landing.tsx b/pages/pycon-landing.tsx
@@ -31,17 +31,6 @@ export default function PyConIndiaWeb() {
       />
       <meta name="robots" content="index, follow" />
       <title>PyCon India Hyderabad, 2023</title>
-      <link rel="icon" type="image/png" href="images/favicon.png" />
-      <link rel="stylesheet" href="css/style.css" />
-      <link href="css/aos.css" rel="stylesheet" />
-      <link href="css/font-awesome.min.css" rel="stylesheet" />
-      <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" />
-      <link
-        href="css/owl.theme.default.min.css"
-        rel="stylesheet"
-        type="text/css"
-      />
-      <link href="css/bootstrap.min.css" rel="stylesheet" />
       {/* header section started */}
       <Header />
       {/* header section ended */}