|
|
@@ -18,22 +18,28 @@ const ResponsiveNavbar = () => {
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
- <header className="fixed bg-sky-200 flex h-17 w-full justify-center z-10">
|
|
|
- <nav className="flex w-full max-w-screen-xl items-center">
|
|
|
- <div className="flex">
|
|
|
- <a className="" href="#">
|
|
|
- <img src={logo} alt="logo"/>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div className="flex ml-auto h-full z-50 px-1">
|
|
|
- {menuItems.map((item, index) => (
|
|
|
- <div key={index} className="flex w-[196px] h-full justify-center items-center">
|
|
|
- <a href="#">
|
|
|
- {item.label}
|
|
|
- </a>
|
|
|
+ <header className="fixed w-full z-10">
|
|
|
+ <nav>
|
|
|
+ <section className="flex items-center max-w-[1200px] mx-auto">
|
|
|
+ <article className="md:w-full lg:w-1/6 xl:[width:20.8333%] p-4 lg:p-0">
|
|
|
+ <a className="block w-[150px] lg:inline lg:w-auto" href="#">
|
|
|
+ <img className="max-w-full align-middle" src={logo} alt="logo"/>
|
|
|
+ </a>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ {/* 데스크탑 메뉴 */}
|
|
|
+ <article className="ml-auto pl-[0.5rem] pr-[0.5rem] lg:w-2/3 lg:inline-block lg:align-top">
|
|
|
+ <div className="hidden lg:flex justify-center text-center flex-row flex-wrap content-start text-gray-800">
|
|
|
+ {menuItems.map((item, index) => (
|
|
|
+ <div key={index} className="relative inline-block w-1/4 align-top">
|
|
|
+ <a className="inline-block py-[1.2rem] px-[1.5rem] w-full text-[19px] font-[800] text-[#010101] whitespace-nowrap transition ease-in-out duration-300" href="#">
|
|
|
+ {item.label}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
</div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
+ </article>
|
|
|
+ </section>
|
|
|
</nav>
|
|
|
</header>
|
|
|
);
|
home