Increased Responsiveness of Navbar Hamburger Menu

Kevin-Kwan · Jan 10, 2024 · 4b1179c · 4b1179c
1 parent 59f8cd5
commit 4b1179c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
@@ -9,9 +9,19 @@ type NavbarProps = {
 };
 
 const Navbar = ({ isMenuOpen, toggleMenu }: NavbarProps) => {
-  const memoizedToggleMenu = useCallback(() => {
-    toggleMenu();
-  }, [toggleMenu]);
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 916 && isMenuOpen) {
+        toggleMenu();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isMenuOpen, toggleMenu]);
   return (
     <nav
       style={{
@@ -36,7 +46,7 @@ const Navbar = ({ isMenuOpen, toggleMenu }: NavbarProps) => {
           </a>
         </Link>
       </div>
-      <div className="hidden md:flex items-center justify-center flex-1 md:pl-0 lg:pl-24">
+      <div className="hidden md:flex items-center justify-center flex-1 md:pl-0 lg:pl-10 xl:pl-24">
         <div className="flex justify-end">
           <Link legacyBehavior href="/resume">
             <a className="text-white mx-4 text-lg hover:text-2xl transition-fontSize duration-200 ease-in-out hover:text-blue-500 text-center">
@@ -93,7 +103,7 @@ const Navbar = ({ isMenuOpen, toggleMenu }: NavbarProps) => {
       <div className="flex items-center justify-center md:hidden">
         <button
           className="text-white hover:text-gray-300 focus:outline-none"
-          onClick={memoizedToggleMenu}
+          onClick={toggleMenu}
         >
           <svg
             className="h-6 w-6 fill-current"

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import Link from 'next/link';
 import { FaGithub, FaGlobe } from 'react-icons/fa';
 
@@ -8,6 +8,7 @@ interface ProjectCardProps {
   githubLink: string;
   demoLink?: string;
   demoText?: string;
+  Icon?: ReactNode;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({
@@ -16,6 +17,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   githubLink,
   demoLink,
   demoText = 'Demo',
+  Icon = FaGlobe,
 }) => {
   return (
     <div className="w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 p-2 md:p-4">
@@ -39,7 +41,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
           {demoLink && (
             <Link href={demoLink} rel="noopener noreferrer" target="_blank">
               <div className="bg-slate-400 hover:bg-green-700 text-black font-bold py-2 px-4 rounded inline-flex items-center text-xs md:text-base">
-                <FaGlobe className="mr-2 text-sm md:text-base" />
+                <Icon className="mr-2 text-sm md:text-base" />
                 <span>{demoText}</span>
               </div>
             </Link>

diff --git a/pages/projects.tsx b/pages/projects.tsx
@@ -2,6 +2,7 @@
 import Head from 'next/head';
 import Layout from '../components/RootLayout';
 import ProjectCard from '../components/ProjectCard';
+import { FaHackerrank } from 'react-icons/fa';
 
 const github_pat = process.env.GITHUB_PAT;
 
@@ -190,13 +191,15 @@ export default function Projects({ descriptions }: ProjectsProps) {
             githubLink="https://github.com/Kevin-Kwan/leetcode"
             demoLink="https://leetcode.com/kevinkwan/"
             demoText="Profile"
+            // There is no LeetCode Icon from FontAwesome yet
           />
           <ProjectCard
             name="My Personal HackerRank Solutions"
             description={descriptions['hackerrank'] || loadingMessage}
             githubLink="https://github.com/Kevin-Kwan/hackerrank"
             demoLink="https://www.hackerrank.com/profile/kevinkwan"
             demoText="Profile"
+            Icon={FaHackerrank}
           />
         </div>
       </main>