ساخت منوی همبرگری با قلاب های React — از صفر تا صد

1import React, { useState } from "react";
2import styled from "styled-components";
3
4import { colors } from "../../global";
5
6import Hamburger from "../Hamburger/Hamburger";
7
8const StyledMenu = styled.nav<{ open: boolean }>`
9  top: 0;
10  left: 0;
11  height: 100vh;
12  width: 35vw;
13  position: fixed;
14  background-color: ${colors.lightbrown};
15  z-index: 1;
16  padding: 10rem 0;
17  flex-direction: column;
18  display: ${({ open }) => (open ? "flex" : "none")};
19`;
20const StyledLink = styled.a`
21  padding: 0 2rem;
22  font-size: 2rem;
23  color: ${colors.pearl};
24  text-decoration: none;
25  
26  :hover {
27    color: ${colors.yellowmellow};
28    cursor: pointer;
29  }
30`;
31
32const Menu = () => {
33  const [open, setOpen] = useState<boolean>(false);
34  const close = () => setOpen(false);
35  return (
36    <div>
37      <StyledMenu open={open}>
38        <StyledLink onClick={() => close()}>Link 1</StyledLink
39        <StyledLink onClick={() => close()}>Link 2</StyledLink
40        <StyledLink onClick={() => close()}>Link 3</StyledLink
41      </StyledMenu>
42      <Hamburger open={open} setOpen={setOpen} />
43     </div>
44   );
45};

1import React from "react";
2import styled from "styled-components";
3
4import { colors } from "../../global";
5
6const StyledHamburger = styled.button<{ open: boolean }>`
7  position: fixed;
8  left: 3vw;
9  top: 3vw;
10  width: 2rem;
11  height: 2rem;
12  padding: 0;
13  background: transparent;
14  
15  display: flex;
16  flex-direction: column;
17  justify-content: space-around;
18  border: none;
19  cursor: pointer;
20  outline: none;
21  z-index: 1;
22  div {
23    position: relative;
24    width: 2rem;
25    height: 0.25rem;
26    border-radius: 10px;
27    background-color: ${({ open }) =>
28      open ? colors.pearl : colors.lightbrown};
29  }
30`;
31
32type Props = {
33  open: boolean;
34  setOpen: (v: boolean) => void;
35};
36
37const Hamburger = (props: Props) => (
38  <StyledHamburger
39    open={props.open}
40    onClick={() => props.setOpen(!props.open)}
41  >
42    <div />
43    <div />
44    <div />
45  </StyledHamburger>
46);

1// Menu
2const StyledMenu = styled.nav<{ open: boolean }>`
3  //...
4  transition: transform 0.3s ease-in-out;
5  transform: ${({ open }) =>
6    (open ? "translateX(0)" :"translateX(-100%)")};
7`;
8
9// Hamburger
10const StyledHamburger = styled.button<{ open: boolean }>`
11  //...
12  left: ${({ open }) => (open ? "29vw" : "3vw")};
13  div {
14    //...
15    transition: all 0.3s linear;
16    transform-origin: 1px;
17  
18    :first-child {
19      transform: ${({ open }) =>
20        (open ? "rotate(45deg)" : "rotate(0)")};
21    }
22    :nth-child(2) {
23      opacity: ${({ open }) => (open ? "0" : "1")};
24      transform: ${({ open }) => 
25        (open ? "translateX(20px)":"translateX(0)")};
26    }
27    :nth-child(3) {
28      transform: ${({ open }) =>
29        (open ? "rotate(-45deg)" : "rotate(0)")};
30    }
31  }
32`;

1//Menu
2export const StyledMenu = styled.nav<{ open: boolean }>`
3  //...
4  @media (max-width: 600px) {
5    width: 100%;
6  }
7`;
8
9//Hamburger
10const StyledHamburger = styled.button<{ open: boolean }>`
11  //...
12  @media (max-width: 600px) {
13    left: ${({ open }) => (open ? "initial" : "3vw")};
14    right: ${({ open }) => (open ? "2vw" : "initial")};
15  }
16  //...
17`;

1const [open, setOpen] = useState<boolean>(false);

1import { useEffect, RefObject } from "react";
2
3const useOnClickOutside = (
4  ref: RefObject<HTMLDivElement>,
5  closeMenu: () => void
6) => {
7  useEffect(() => {
8    const listener = (event: MouseEvent) => {
9      if (ref.current && event.target &&
10        ref.current.contains(event.target as Node)
11      ) {
12        return;
13      }
14      closeMenu();
15    };
16    
17    document.addEventListener("mousedown", listener);
18    return () => {
19      document.removeEventListener("mousedown", listener);
20    };
21  }, [ref, closeMenu]);
22};
23const Menu = (props: Props) => {
24  const [open, setOpen] = useState<boolean>(false);
25  
26  const node = useRef<HTMLDivElement>(null);
27  useOnClickOutside(node, () => props.setOpen(false));
28  return (
29    <div ref={node}>
30      ....
31    </div>
32  );
33};