Added improved navbar

miguelaenlle · Nov 26, 2022 · 919d46e · 919d46e
1 parent cde89c7
commit 919d46e
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 28 deletions.
diff --git a/src/components/landing/LandingPage.tsx b/src/components/landing/LandingPage.tsx
@@ -2,13 +2,16 @@ import * as React from "react";
 import Content from "./content/Content";
 import Footer from "./footer/Footer";
 import IntroSection from "./intro/IntroSection";
+
+import NavbarWrapper from "./intro/Navbar/NavbarWrapper";
+
 const LandingPage: React.FC<{}> = (props) => {
     return (
-        <div>
+        <NavbarWrapper>
             <IntroSection />
             <Content />
             <Footer />
-        </div>
+        </NavbarWrapper>
     );
 }
 export default LandingPage
diff --git a/src/components/landing/intro/Header.tsx b/src/components/landing/intro/Header.tsx
@@ -17,7 +17,7 @@ const Header: React.FC<{}> = (props) => {
                 animate={{ opacity: 1, y: 0, scale: 1 }}
                 transition={{ delay: 0.8, duration: 0.5 }}
                 className={
-                    "text-4xl md:text-8xl font-bold text-white font-Poppins text-center"
+                    "text-5xl md:text-8xl font-bold text-white font-Poppins text-center"
                 }
             >
                 JHHS Hack Club

diff --git a/src/components/landing/intro/IntroSection.tsx b/src/components/landing/intro/IntroSection.tsx
@@ -18,7 +18,6 @@ const IntroSection: React.FC<{}> = (props) => {
         play
       />
       <div className={"absolute z-10 w-full p-5 pb-20 h-screen"}>
-        <Navbar />
         <div
           className={
             "flex flex-col  py-16 md:py-32 items-center justify-center h-full w-full"

diff --git a/src/components/landing/intro/Navbar/NavItem.tsx b/src/components/landing/intro/Navbar/NavItem.tsx
@@ -3,12 +3,13 @@ import React from "react";
 const NavItem: React.FC<{
   link: string;
   text: string;
+  transparent: boolean;
 }> = (props) => {
   return (
     <a
       href={props.link}
       className={
-        "text-md md:text-lg font-light text-white font-Poppins hover:cursor-pointer hover:font-bold transition-all"
+        `text-xl md:text-lg font-light ${props.transparent ? "text-white": "text-dark"} font-Poppins hover:cursor-pointer hover:text-zinc-400 transition-all`
       }
     >
       {props.text}

diff --git a/src/components/landing/intro/Navbar/Navbar.tsx b/src/components/landing/intro/Navbar/Navbar.tsx
@@ -1,30 +1,60 @@
-import React from "react";
-import NavItem from "./NavItem";
+import React, { useState } from "react";
 import navimg from "./navimg.png";
-import { ReactDOM } from "react";
-import join from "../../content/Content";
+import NavItem from "./NavItem";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import { useWindowDimensions } from "./hooks/get-window-dimensions";
+
+const Navbar: React.FC<{
+  transparent: boolean;
+}> = (props) => {
+  const windowDimensions = useWindowDimensions();
+  const [opened, setOpened] = useState(false);
+
+  const handleOpen = () => {
+    setOpened(true);
+  }
+
+  const handleClose = () => {
+    setOpened(false);
+  }
 
-const Navbar: React.FC<{}> = (props) => {
   return (
-    <div className={"flex items-start items-center"}>
-      <img className={"w-10"} alt="logo" src={navimg}></img>
-      <a
-        href={"/projects"}
-        className={
-          "ml-2 mr-12 text-xl lg:text-xl font-bold text-white font-Poppins hover:cursor-pointer hover:font-bold transition-all"
-        }
-      >
-        JHHS Hack Club
-      </a>
-      <div className={"flex mr-8 items-end"}>
-        <NavItem link={"/showcase"} text={"Showcase"} />
-      </div>
-      <div className={"flex mr-8 items-end"}>
-        <NavItem link={"/workshops"} text={"Workshops"} />
+    <div className={`fixed top-0 left-0 flex flex-col md:flex-row md:items-start md:items-center z-20 p-5 ${!props.transparent ? "bg-zinc-50 bg-opacity-90 shadow-lg" : ""} transition-all w-full`}>
+      <div className={"flex justify-between"}>
+        <div className={"group flex items-start items-center gap-1 hover:cursor-pointer"}>
+          <img className={"w-9 group-hover:opacity-100 transition-all"} alt="logo" src={navimg}></img>
+          <a
+            href={"/"}
+            className={
+              `ml-2 mr-12 text-xl font-bold ${props.transparent ? "text-white" : "text-black"} font-Poppins hover:font-bold transition-all`
+            }
+          >
+            JHHS Hack Club
+          </a>
+        </div>
+        <div className={"md:hidden"}>
+          {
+            opened ? (
+              <XMarkIcon onClick={handleClose} className={`w-7 text-zinc-400 hover:${props.transparent ? "text-white" : "text-black"} transition-all hover:cursor-pointer`} />
+            ) : (
+              <Bars3Icon onClick={handleOpen} className={`w-7 text-zinc-400 hover:${props.transparent ? "text-white" : "text-black"} transition-all hover:cursor-pointer`} />
+            )
+          }
+        </div>
       </div>
-      <div className={"flex items-end"}>
-        <NavItem link={""} text={"Join Hack Club"} />
+
+      <div className={`flex flex-col md:flex-row mt-5 md:mt-0 ${((opened)) ? "mobile:visible" : "mobile:hidden"} md:visible transition-all`}>
+        <div className={"flex mr-8 md:mt-0 items-end"}>
+          <NavItem link={"/showcase"} text={"Showcase"} transparent={props.transparent} />
+        </div>
+        <div className={"flex mr-8 items-end"}>
+          <NavItem link={"/workshops"} text={"Workshops"} transparent={props.transparent} />
+        </div>
+        <div className={"flex items-end"}>
+          <NavItem link={""} text={"Join Hack Club"} transparent={props.transparent} />
+        </div>
       </div>
+      {/* </div> */}
     </div>
   );
 };

diff --git a/src/components/landing/intro/Navbar/NavbarWrapper.tsx b/src/components/landing/intro/Navbar/NavbarWrapper.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+import * as React from "react"
+import Navbar from "./Navbar"
+
+const NavbarWrapper: React.FC<React.PropsWithChildren<{}>> = (props) => {
+    const [isTransparent, setIsTransparent] = useState(true);
+    useEffect(() => {
+        const handleScroll = () => {
+            const location = window.scrollY;
+            const show = location < 100;
+            if (show) {
+                setIsTransparent(true);
+            } else {
+                setIsTransparent(false);
+            }
+        };
+        handleScroll()
+        document.addEventListener("scroll", handleScroll);
+    }, []);
+
+    return (
+        <div className={"relative"}>
+            <Navbar
+                transparent={isTransparent}
+            />
+            <div className={"z-1"}>
+                {props.children}
+            </div>
+        </div>
+    );
+}
+export default NavbarWrapper
diff --git a/src/components/landing/intro/Navbar/hooks/get-window-dimensions.ts b/src/components/landing/intro/Navbar/hooks/get-window-dimensions.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+export const getWindowDimensions = (): { [key: string]: number } => {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+};
+
+export const useWindowDimensions = () => {
+    const [windowDimensions, setWindowDimensions] = useState(
+        getWindowDimensions()
+    );
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return windowDimensions;
+};
+
diff --git a/src/components/shared/BackButton.tsx b/src/components/shared/BackButton.tsx
@@ -1,9 +1,10 @@
 import * as React from "react"
+import { Link } from "react-router-dom";
 const BackButton: React.FC<{
     link: string;
 }> = (props) => {
     return (
-        <a href={props.link} className={"text-md md:text-lg font-medium text-gray-300 font-Poppins hover:cursor-pointer hover:text-white transition-colors"}>{"< Go Back"}</a>
+        <Link to={props.link} className={"text-md md:text-lg font-medium text-gray-300 font-Poppins hover:cursor-pointer hover:text-white transition-colors"}>{"< Go Back"}</Link>
     );
 }
 export default BackButton
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,6 +12,11 @@ module.exports = {
       },
       backgroundImage: {
         "discord": "linear-gradient(to right bottom, rgba(81, 161, 188, 0.9), rgba(142, 48, 182, 0.9)), url('/src/img/app-idea.PNG')"
+      },
+      screens: {
+        mobile: {
+          max: "768px"
+        }
       }
     },
   },