|
|
@@ -1,20 +1,23 @@
|
|
|
-import React, {useState} from 'react';
|
|
|
+import React, { useState } from 'react';
|
|
|
import Sidebar from "./Sidebar.jsx";
|
|
|
import Navbar from "./navbar/index.jsx";
|
|
|
|
|
|
const Header = () => {
|
|
|
- // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태
|
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
|
|
- // 햄버거 버튼 클릭 시 메뉴 토글
|
|
|
- const toggleMenu = () => {
|
|
|
- setIsMenuOpen(!isMenuOpen);
|
|
|
- };
|
|
|
+ const toggleMenu = () => setIsMenuOpen(prev => !prev);
|
|
|
+ const closeMenu = () => setIsMenuOpen(false); // 닫는 함수 분리
|
|
|
|
|
|
return (
|
|
|
<header className="fixed w-full z-10">
|
|
|
- <Sidebar isOpen={isMenuOpen} onClose={toggleMenu}/>
|
|
|
- <Navbar onClickHamburgerBtn={toggleMenu}/>
|
|
|
+ {/* 디머 */}
|
|
|
+ <article
|
|
|
+ id="sidebar-dimmer"
|
|
|
+ className={`fixed top-0 left-0 w-full h-full z-[9998] transition-opacity duration-500 ease-in-out ${isMenuOpen ? 'bg-black/50 opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
|
|
|
+ onClick={closeMenu}
|
|
|
+ />
|
|
|
+ <Sidebar isOpen={isMenuOpen} onClose={closeMenu} />
|
|
|
+ <Navbar onClickHamburgerBtn={toggleMenu} />
|
|
|
</header>
|
|
|
);
|
|
|
};
|
home
