PR to fix Issue #29 - Mobile menu not respecting device viewport

website/package.json

@@ -17,6 +17,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "autoprefixer": "^10.4.15",
     "gatsby": "^5.11.0",
     "gatsby-plugin-image": "^3.11.0",

website/src/components/ExternalLink.tsx

@@ -0,0 +1,37 @@
+import React, { useContext, useState } from 'react';
+import Navbar from './Navbar';
+
+type Props = {
+	href: string;
+	textToShow: string;
+	onClick?: Function;
+};
+
+function ExternalLink({ href, textToShow, onClick }: Props) {
+	const [isHovered, setIsHovered] = useState(false);
+	const value = useContext(Navbar.state);
+	const handleMouseEnter = () => {
+		setIsHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setIsHovered(false);
+	};
+
+	return (
+		<a
+			href={`${href}`}
+			target="_blank"
+			rel="noopener noreferrer"
+			className={`${
+				isHovered ? `border-none` : `border-b-2`
+			} text-white  border-solid border-sky-500`}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+			// onClick={() => setIsMenuShown(false)}
+		>
+			{textToShow}
+		</a>
+	);
+}
+
+export default ExternalLink;

website/src/components/H1.tsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+
+type Props = {
+	heading: string;
+};
+
+function H1({ heading }: Props) {
+	return <h1 className="text-4xl pb-3 mb-2">{heading}</h1>;
+}
+
+export default H1;

website/src/components/Navbar.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { Link } from 'gatsby';
-
-import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"
+// import mobileMenu from '../../static/mobile-menu.js';
+import { AiOutlineMenu } from '@react-icons/all-files/ai/AiOutlineMenu';
+import { AiOutlineClose } from '@react-icons/all-files/ai/AiOutlineClose';
 
 function Navbar() {
 	const [isMenuShown, setIsMenuShown] = useState(false);
 	return (
-		<nav className="navbar-container flex justify-end container py-4 px-4">
+		<nav className="flex justify-end container p-4">
 			{!isMenuShown && (
 				<button
 					className="md:hidden text-white text-3xl"
@@ -28,22 +29,29 @@ function Navbar() {
 			<ul
 				className={`${
 					isMenuShown ? `absolute` : `hidden`
-				} top-0 left-0 w-full h-screen text-right p-4 bg-[#14161c] gap-10 md:flex md:top-[unset] md:left-[unset] md:w-auto md:h-auto md:gap-8 justify-end`}
+				} top-0 left-0 w-full h-[100dvh] text-right p-4 gap-10 md:flex md:top-[unset] md:left-[unset] md:w-auto md:h-auto md:gap-8 justify-end`}
 			>
-				<div className="container flex flex-col h-full justify-end gap-10 text-2xl md:flex-row md:h-auto md:gap-8 md:text-lg">
+				<div className="flex flex-col h-full justify-end gap-10 text-2xl md:flex-row md:h-auto md:gap-8 md:text-lg">
 					<li>
-						<Link to="/">Home</Link>
+						<Link to="/" onClick={() => setIsMenuShown(false)}>
+							Home
+						</Link>
 					</li>
 					<li>
-						<a href="https://blog.fullstack.chat/" target="_blank">
-							Blog
-						</a>
+						<ExternalLink
+							href="https://blog.fullstack.chat/"
+							textToShow="Blog"
+						/>
 					</li>
 					<li>
-						<Link to="#about">About</Link>
+						<Link to="#about" onClick={() => setIsMenuShown(false)}>
+							About
+						</Link>
 					</li>
 					<li>
-						<Link to="#rules">Join Us</Link>
+						<Link to="#rules" onClick={() => setIsMenuShown(false)}>
+							Join Us
+						</Link>
 					</li>
 				</div>
 			</ul>

website/src/pages/index.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { HeadFC, PageProps } from 'gatsby';
+import H1 from '../components/H1';
+import ExternalLink from '../components/ExternalLink';
 import ChatBubble from '../components/ChatBubble';
 import Navbar from '../components/Navbar';
 import { useState } from 'react';
@@ -15,7 +17,7 @@ function IndexPage() {
 	}
 
 	return (
-		<main className="scroll-smooth motion-reduce:scroll-auto">
+		<main className="font-sans m-0 px-2 pb-8 leading-normal bg-zinc-900 scroll-smooth motion-reduce:scroll-auto">
 			<Navbar />
 			<div className="container mx-auto px-20 h-screen flex flex-wrap justify-center items-center">
 				<div className="w-full md:w-3/12">
@@ -28,12 +30,12 @@ function IndexPage() {
 					{/* <!-- Shown on large creens --> */}
 					{/* <!-- <g-image alt="fullstack.chat logo" src="/assets/images/logo-2.png" className="logo img-fluid d-none d-lg-block" /> --> */}
 				</div>
-				<div className="md:w-6/12">
-					<h1>👋 Welcome to fullstack.chat!</h1>
+				<div className="md:w-6/12 flow-root">
+					<H1 heading="👋 Welcome to fullstack.chat!" />
 					<div className="welcome-text">
 						We are a welcome and opening community of developers of all
 						skillsets and experience levels. Scroll down to see what our
-						community is all about!
+						community is all about! h1H A
 					</div>
 				</div>
 			</div>