210321_ TIL / 사이드메뉴

오늘 할 일

1. 프로젝트 화면 홈 레이아웃 작업,
2. 사이드 메뉴 만들기

스타일 컴포넌트를 사용하였다.

https://styled-components.com/releases

• styled-components

  styled-components 란 무엇일까요?

  styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다.

  Styled Components #1 Basic : 리액트 스타일 컴포넌트 기초

  Styled Components #2 Advanced : 리액트 스타일 컴포넌트 심화

  3. styled-components

  조건 부 사용 법

  const StyledButton = styled.button`
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid lightgray;
  
    color: ${(props) => props.color || "gray"};
    background: ${(props) => props.background || "white"};
  `function Button({ children, color, background }) {
    return (
      <StyledButton color={color} background={background} Î>
        {children}
      </StyledButton>
    )
  }
  
  <Button color="green" background="pink">
    Green Button
  </Button>
  
  /////
  const StyledButton = styled.button`
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid lightgray;
  
    ${(props) =>
      props.primary &&
      css`
        color: white;
        background: navy;
        border-color: navy;
      `}
  `
  
  function Button({ children, ...props }) {
    return <StyledButton {...props}>{children}</StyledButton>
  }
  
  <Button primary>Primary Button</Button>

사이드 메뉴 만들기

사이드 메뉴에서 메뉴 클릭시 active 상태, hover 시 이미지 및 color 변경이 있었다.

가변적으로 변경해야해서 props를 전달하여 스타일링 하였다.

코드

export const GnbItem = styled.div`
  & a::before {
    display: inline-block;
    content:"";
    width: 16px;
    height: 16px;
    margin-right: 14px;
    background-image:url(${props => props.pathname ? props.hover : props.img});   
    vertical-align:top;
  }
  &:hover a::before {
    background-image:url(${props => props.hover});
  }
  & a{
    color:${props => props.pathname ? "#36CFBD" : "#ccc"};
    text-decoration: none;
  }
  &:hover a,
  &:focus a{
    color:#36CFBD;
  }
`;

사이드 메뉴 클릭시 제목명도 바뀌어야하는데 바뀌지 않는다 ssr 이라서 그런 것 같다..
다른 방법을 생각해봐야겠다.