[React] Navigation 만들기 (8) - SideBar 현재페이지일때 스타일링주기

Sidebar.js

import Link from './Link';

function Sidebar(){
  const links = [
    {label : 'Main', path:'/'},
    {label : 'Signup', path:'/signup'},
  ];

  const renderedLinks = links.map((link) => {
    return <Link
      key={link.labe}
      to={link.path}
      className="mb-3"
      activeClassName="font-bold border-l-4 border-blue-500 pl-2"
    >{link.label}</Link>
  });
  return(
    <div className='sticky top-0 overflow-y-scroll flex flex-col'>
      {renderedLinks}
    </div>
  );

}

export default Sidebar;

Sidebar에서는 activeClassName으로 현재 페이지일때 bold와 줄이 표시되게 하는 스타일링을 props로 받을 수 있도록 추가한다.

 

 

Link.js

import useNavigation from "../hooks/use-navigation";
import classNames from "classnames";

function Link({ to, children, className, activeClassName }){
  const {navigate, currentPath} = useNavigation();

  const classes = classNames('text-blue-500',
    className,
    currentPath === to && activeClassName
  );
  const handleClick = (event) => {    
    if(event.metaKey || event.ctrlKey){ // ctrl 키 눌렀을 때 새로운 탭에서 열기
      return;
    }
    event.preventDefault();
    navigate(to);
  }
  return <a className={classes} href={to} onClick={handleClick}>{children}</a>
}

export default Link;

Link.js에서는 navigation context에서 가져온 currentPath와 to와 일치하면 activeclass를 주도록 수정

 

 

결과