210321_ TIL / 사이드메뉴

rlatmdgns94·2021년 4월 16일
0

flow-clone_TIL

목록 보기
5/12

오늘 할 일

  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 이라서 그런 것 같다..
다른 방법을 생각해봐야겠다.

관심 있을 만한 포스트

0개의 댓글