[react] 네비게이션 구현

 

react, 웹 admin, dashbord에서

필요한 nav 바를 구현합니다.

 

구현 화면

 

구현 영상

 

구현 내용
1. react, hooks를 이용한 Nav 바 구현
2. style은 tailiwind 사용
3. 하위 메뉴 hidden에서 상위 메뉴 클릭 시 하위 메뉴 출현

 

상위 폴더 

const Nav = () => {
    const menus = [
        { id: 1, upperMenu: '상위 메뉴1', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' },
        { id: 2, upperMenu: '상위 메뉴2', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' },
        { id: 3, upperMenu: '상위 메뉴3', lowerMenu1: '하위 메뉴1', lowerMenu2: '하위 메뉴2' },
    ]

    return (
        <nav>
            <ul>
                {menus.map(menu => <NavContents key={menu.id} menu={menu} />)}
            </ul>
        </nav >
    );
};

export default Nav;

 

하위 폴더

import React, { useState } from 'react';

const NavContents = ({ menu }) => {
    const [openMenu, setOpenMenu] = useState(false);
    const onOpenMenu = () => {
        setOpenMenu(!openMenu)
    }

    return (
        <li>
            <div onClick={onOpenMenu} className="w-full flex justify-between items-center 
            p-4 my-2 transition-colors duration-20 border-r-4 border-white hover:border-blue-500">
                <span className="flex">
                    <span className="mx-4">
                        {menu.upperMenu}
                    </span>
                </span>

                <span className={"transition-transform duration-200 " 
               	+ (openMenu ? "transform rotate-90" : "")}>
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                    </svg>
                </span>
            </div>
            <ul className={"gap-4 items-center pl-8 " + (openMenu ? "flex flex-col" : "hidden")}>
                <li className="w-full transition-colors duration-200 justify-start border-r-4 
                border-white hover:text-blue-500 hover:border-blue-500">
                    <span className="mx-4 text-sm">
                        &middot; {menu.lowerMenu1}
                    </span>
                </li>
                <li className="w-full items-center transition-colors duration-200 justify-start 
                border-r-4 border-white hover:text-blue-500 hover:border-blue-500">
                    <span className="mx-4 text-sm">
                        &middot; {menu.lowerMenu2}
                    </span>
                </li>
            </ul>
        </li>
    );
};

export default NavContents;