Styled-Componentを使ったハンバーガーメニュー🍔

やりたいこと

CSSで日頃から使っているハンバーガーメニューをReact環境のStyled-Componentを使っての実装

記事を書いた理由

違うプロジェクトでいちいち書くのが面倒だし、忘れちゃうのでコピペ用に置いとこうと思った

JSX側コード

//JSX側
<Styled.ListItem>
   <Styled.HumbergerButton onClick={hundleMenu}>
      <Styled.HumbergerSpan className={toggleMenu ? "active" : ""} />
      <Styled.HumbergerSpan className={toggleMenu ? "active" : ""} />
      <Styled.HumbergerSpan className={toggleMenu ? "active" : ""} /> 
   </Styled.HumbergerButton>
</Styled.ListItem>

Styled-Component側コード

//Styled-component側
export const HumbergerButton = styled.div``;

export const HumbergerSpan = styled.span`
  display: inline-block;
  position: absolute;
  right: 14px;
  height: 3px;
  border-radius: 2px;
  background: black;
  width: 8%;
  :nth-of-type(1) {
    top: 15px;
  }
  :nth-of-type(2) {
    top: 23px;
  }
  :nth-of-type(3) {
    top: 31px;
  }
  &.active {
    :nth-of-type(1) {
      top: 18px;
      right: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 8%;
    }
    :nth-of-type(2) {
      opacity: 0;
    }
    :nth-of-type(3) {
      top: 30px;
      right: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 8%;
    }
  }
`;

HumbergerButtonに関してButtonなのにdivになってますけど？

これに関してはおっしゃる通りです
もし、見た人は変数名と中身は同一のものにしてください。。。😭