From c31c5dfe66adce1f60d3b41e54da40565f943b0d Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Wed, 6 Apr 2022 16:23:38 +0800
Subject: [PATCH] Fix height on mobile

---
 components/NavBar.tsx | 10 +++++++---
 pages/index.tsx       |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 2c3f1a8..c7cdd69 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import Link from 'next/link';
-import { FC, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import dynamic from 'next/dynamic';
 
@@ -26,6 +26,9 @@ const txtMenu = [
 
 const HeadBar: FC = () => {
   const [showMenu, setShowMenu] = useState(false);
+  const handleClick = useCallback(() => {
+    setShowMenu((showMenu) => !showMenu);
+  }, []);
 
   return (
     <>
@@ -51,7 +54,7 @@ const HeadBar: FC = () => {
 
         <FiMenu
           className="cursor-pointer w-7 h-7 md:hidden"
-          onClick={() => setShowMenu(!showMenu)}
+          onClick={handleClick}
         />
         <nav
           className={cn(
@@ -62,7 +65,7 @@ const HeadBar: FC = () => {
             'p-5 right-6 top-14',
             'md:bg-transparent md:p-[unset]',
             'md:right-[unset] md:top-[unset]',
-            'w-1/3 md:w-auto',
+            'w-1/3 md:w-auto z-10',
             'md:dark:bg-transparent',
             showMenu || 'hidden'
           )}
@@ -71,6 +74,7 @@ const HeadBar: FC = () => {
             {txtMenu.map((m) => (
               <li
                 key={m.id}
+                onClick={handleClick}
                 className={cn('mb-2 last:mb-0 md:mb-0', 'md:mr-4 md:last:mr-0')}
               >
                 <Link href={m.path}>{m.name}</Link>
diff --git a/pages/index.tsx b/pages/index.tsx
index ce8fcca..7aea7b4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -14,8 +14,8 @@ const Home: NextPageWithLayout = () => {
         <title>RUA - HOME</title>
       </Head>
 
-      <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
-        <div className="fixed w-full max-w-3xl px-10 text-2xl">
+      <main className="min-h-[calc(100vh-142px)] flex justify-center items-center text-xl">
+        <div className="z-0 w-full max-w-3xl px-10 my-4 text-2xl md:fixed">
           <div className="max-w-xl leading-10">
             <h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1>
             <p>I&apos;m a Fron-end developer. Yes, that&apos;s mean</p>