responsive burger start

src/components/HomePage.js

@@ -9,6 +9,7 @@ import styled from 'styled-components';
 import { CheckCircle, Heart, AddressCard, ChartLine } from '@styled-icons/fa-solid';
 import { Bullseye } from "@styled-icons/fa-solid";
 import { StyledIconBase } from '@styled-icons/styled-icon'
+import Sidebar from './Sidebar';
 
 const IconStyler = styled.div`
   ${StyledIconBase} {
@@ -227,6 +228,7 @@ export default function HomePage() {
         </ContainerPadded>
       
       </ColoredSection>
+      <Sidebar />
 
       <div id="footer">
         <Footer />

src/components/NavBar.js

@@ -39,6 +39,9 @@ const Header = styled.header`
   transition: 0.6s;
 
    }
+   @media (max-width: 768px) {
+     display:none;
+    }
 `;
 const List = styled.ul`
 

src/components/Sidebar.js

@@ -0,0 +1,151 @@
+import React, {useState} from 'react';
+import styled from 'styled-components';
+
+const StyledMenu = styled.nav`
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: #EFFFFA;
+  transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
+  height: 100vh;
+  text-align: left;
+  padding: 2rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.3s ease-in-out;
+
+  @media (max-width: 576px) {
+      width: 100%;
+    }
+
+  a {
+    font-size: 2rem;
+    text-transform: uppercase;
+    padding: 2rem 0;
+    font-weight: bold;
+    letter-spacing: 0.5rem;
+    color: #0D0C1D;
+    text-decoration: none;
+    transition: color 0.3s linear;
+
+    @media (max-width: 576px) {
+      font-size: 1.5rem;
+      text-align: center;
+    }
+
+    &:hover {
+      color: #343078;
+    }
+  }
+`
+
+const Menu = ({ open }) => {
+  return (
+    <StyledMenu open={open}>
+      <a href="/#about-us">
+        <span role="img" aria-label="about us">💁🏻‍♂️</span>
+        About us
+      </a>
+      <a href="/pricing">
+        <span role="img" aria-label="pricing">💸</span>
+        Pricing
+        </a>
+      <a href="/#footer">
+        <span role="img" aria-label="contact us">📩</span>
+        Contact
+        </a>
+    </StyledMenu>
+  )
+}
+
+const StyledBurger = styled.button`
+  position: absolute;
+  top: 5%;
+  left: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 2rem;
+  height: 2rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+
+  &:focus {
+    outline: none;
+  }
+
+  div {
+    width: 2rem;
+    height: 0.25rem;
+    background: ${({ open }) => open ? '#0D0C1D' : '#EFFFFA'};
+    border-radius: 10px;
+    transition: all 0.3s linear;
+    position: relative;
+    transform-origin: 1px;
+
+    :first-child {
+      transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
+    }
+
+    :nth-child(2) {
+      opacity: ${({ open }) => open ? '0' : '1'};
+      transform: ${({ open }) => open ? 'translateX(20px)' : 'translateX(0)'};
+    }
+
+    :nth-child(3) {
+      transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
+    }
+  }
+  @media(min-width:768px){
+      display:none;
+  }
+`
+
+const Burger = ({ open, setOpen }) => {
+  return (
+    <StyledBurger open={open} onClick={() => setOpen(!open)}>
+      <div />
+      <div />
+      <div />
+    </StyledBurger>
+  )
+}
+
+
+const Sidebar = () => {
+  const [open, setOpen] = React.useState(false);
+  const node = React.useRef();
+  return (
+    <div>
+    
+      <div ref={node}>
+        <Burger open={open} setOpen={setOpen} />
+        <Menu open={open} setOpen={setOpen} />
+      </div>
+    </div>
+  )  
+}
+
+const useOnClickOutside = (ref, handler) => {
+  React.useEffect(() => {
+    const listener = event => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+    };
+  },
+  [ref, handler],
+  );
+};
+export default Sidebar;