Fix height on mobile

This commit is contained in:
Defectink
2022-04-06 16:23:38 +08:00
parent 112309940c
commit c31c5dfe66
2 changed files with 9 additions and 5 deletions

View File

@ -1,6 +1,6 @@
import cn from 'classnames'; import cn from 'classnames';
import Link from 'next/link'; import Link from 'next/link';
import { FC, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { FiMenu } from 'react-icons/fi'; import { FiMenu } from 'react-icons/fi';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
@ -26,6 +26,9 @@ const txtMenu = [
const HeadBar: FC = () => { const HeadBar: FC = () => {
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const handleClick = useCallback(() => {
setShowMenu((showMenu) => !showMenu);
}, []);
return ( return (
<> <>
@ -51,7 +54,7 @@ const HeadBar: FC = () => {
<FiMenu <FiMenu
className="cursor-pointer w-7 h-7 md:hidden" className="cursor-pointer w-7 h-7 md:hidden"
onClick={() => setShowMenu(!showMenu)} onClick={handleClick}
/> />
<nav <nav
className={cn( className={cn(
@ -62,7 +65,7 @@ const HeadBar: FC = () => {
'p-5 right-6 top-14', 'p-5 right-6 top-14',
'md:bg-transparent md:p-[unset]', 'md:bg-transparent md:p-[unset]',
'md:right-[unset] md:top-[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', 'md:dark:bg-transparent',
showMenu || 'hidden' showMenu || 'hidden'
)} )}
@ -71,6 +74,7 @@ const HeadBar: FC = () => {
{txtMenu.map((m) => ( {txtMenu.map((m) => (
<li <li
key={m.id} key={m.id}
onClick={handleClick}
className={cn('mb-2 last:mb-0 md:mb-0', 'md:mr-4 md:last:mr-0')} className={cn('mb-2 last:mb-0 md:mb-0', 'md:mr-4 md:last:mr-0')}
> >
<Link href={m.path}>{m.name}</Link> <Link href={m.path}>{m.name}</Link>

View File

@ -14,8 +14,8 @@ const Home: NextPageWithLayout = () => {
<title>RUA - HOME</title> <title>RUA - HOME</title>
</Head> </Head>
<main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl"> <main className="min-h-[calc(100vh-142px)] flex justify-center items-center text-xl">
<div className="fixed w-full max-w-3xl px-10 text-2xl"> <div className="z-0 w-full max-w-3xl px-10 my-4 text-2xl md:fixed">
<div className="max-w-xl leading-10"> <div className="max-w-xl leading-10">
<h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1> <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> <p>I&apos;m a Fron-end developer. Yes, that&apos;s mean</p>