86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
"use client"
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
import Link from 'next/link'
|
|
import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
|
|
import { CoursesProps } from '@/types'
|
|
//define props type
|
|
type Props = {
|
|
showNav: boolean;
|
|
closeNav: () => void
|
|
courses: CoursesProps[]
|
|
}
|
|
|
|
const MobileNav = ({ closeNav, showNav, courses }: Props) => {
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
useEffect(() => {
|
|
if (showNav) {
|
|
document.body.classList.add('overflow-hidden');
|
|
} else {
|
|
document.body.classList.remove('overflow-hidden');
|
|
}
|
|
|
|
return () => {
|
|
document.body.classList.remove('overflow-hidden');
|
|
};
|
|
}, [showNav]);
|
|
|
|
const navOpen = showNav ? 'translate-x-0' : 'translate-x-[-100%]'
|
|
const navClose = !showNav ? 'translate-x-[-100%]' : 'translate-x-0'
|
|
|
|
return (
|
|
<div>
|
|
{/*overlay*/}
|
|
<div className={`fixed ${navOpen} ${navClose} transform transition-all duration-500 top-[7vh] inset-x-0 bottom-0 z-[1000]`}>
|
|
|
|
{/* nav links*/}
|
|
<div className={`text-white ${navOpen} fixed flex flex-col h-full w-[80%] sm:w-[60%] bg-[#F9E7E9] z-[10000] `}>
|
|
|
|
<div className='w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F5DADF]'>
|
|
<Link key={"01"} href={"#"} >
|
|
<p className="text-xl ml-6 text-black">
|
|
主頁
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
<div className={`w-full flex flex-col ${dropdownOpen ? "border-b-[0px]" : "border-b-[1.5px]"} border-[#F5DADF]`}>
|
|
<div
|
|
className='h-16 flex justify-between items-center px-6 cursor-pointer'
|
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
|
>
|
|
<p className="text-xl text-black">課程</p>
|
|
{dropdownOpen ? <FiChevronUp className='text-black' size={30}/> : <FiChevronDown className='text-black' size={30}/>}
|
|
</div>
|
|
{dropdownOpen && (
|
|
<div>
|
|
{courses?.map((course) => (
|
|
<div className='bg-[#F5DADF] w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F9E7E9]'>
|
|
<Link key={course.id} href={`/courses/${course.id}`}>
|
|
<p className="text-lg text-black ml-8 ">
|
|
{course.title}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className='w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F5DADF]'>
|
|
<Link key={"03"} href={"#"} >
|
|
<p className="text-xl ml-6 text-black">
|
|
關於我們
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MobileNav
|
|
|