mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 01:01:38 +00:00
Fix height on mobile
This commit is contained in:
@ -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>
|
||||||
|
@ -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'm Arthur. </h1>
|
<h1 className="pb-4 text-4xl">Hi there 👋, I'm Arthur. </h1>
|
||||||
<p>I'm a Fron-end developer. Yes, that's mean</p>
|
<p>I'm a Fron-end developer. Yes, that's mean</p>
|
||||||
|
Reference in New Issue
Block a user