Merge pull request #94 from Lee-Na-eun/feat/nav.js

[Client] / #24 / Nav.js : onclick했을 시 반응 구현
codestates · Aug 29, 2021 · 363ba88 · 363ba88
2 parents 7ae2f50 + 1600bc7
commit 363ba88
Showing 1 changed file with 71 additions and 54 deletions.
diff --git a/client/src/comp/Nav.js b/client/src/comp/Nav.js
@@ -1,72 +1,87 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 import profile from "../none_profile.jpeg";
 
+// 768px 이상에서는 nav가 보이고, 아이콘 안보임
+// 768px 이하는 nav 안보이고 아이콘 보임
+
 function Nav({ isLogin }) {
+  const [isShow, setIsShow] = useState("none");
+  const onClick = () => {
+    isShow === "none" ? setIsShow("flex") : setIsShow("none");
+  };
+
+  const NavBtn = styled.button`
+    position: absolute;
+    top: 0px;
+    background-color: transparent;
+    width: max(3vw, 60px);
+    height: max(3vw, 60px);
+    font-size: max(3vw, 30px);
+    transition: all 0.3s;
+    cursor: pointer;
+    z-index: 100;
+    :hover {
+      color: #fff;
+    }
+    @media screen and (min-width: 768px) {
+      display: block;
+    }
+  `;
+
   const NavWrap = styled.nav`
+    @media screen and (max-width: 767px) {
+      flex: none;
+      position: absolute;
+      width: 100%;
+      height: 100vh;
+      display: ${isShow};
+      justify-content: center;
+      align-items: center;
+    }
     background-color: #38372e;
     flex: 1 1 auto;
-    display:flex;
-    min-height:100vh;
-    justify-content:center;
-    align-items:center;
-    /* display: grid;
-    place-items: center; */
+    display: flex;
+    min-height: 100vh;
+    justify-content: center;
+    align-items: center;
+    /* z-index:100; */
   `;
 
   const Button1 = styled.button`
     width: 20vh;
     height: 7vh;
     border: none;
     border-radius: 40px;
-    font-size: max(0.85vw, 12px);
+    font-size: 0.98rem;
     font-weight: 700;
     display: block;
     margin-top: 5vh;
-    cursor: pointer;
-    transition: 0.3s;
-    :hover {
-      background-color: black;
-      color: white;
-    }
     &:nth-child(1) {
       margin-top: 0;
     }
-    :hover {
-      background-color: black;
-      color: white;
-    }
   `;
 
   const Button2 = styled.button`
     width: 20vh;
     height: 7vh;
     border: none;
     border-radius: 40px;
-    font-size: max(0.85vw, 12px);
+    font-size: 0.98rem;
     font-weight: 700;
     display: block;
     margin: 5vh auto 0;
-    cursor: pointer;
-    transition: 0.3s;
-    :hover {
-      background-color: black;
-      color: white;
-    }
     &:nth-child(1) {
       margin-top: 0;
     }
-    :hover {
-      background-color: black;
-      color: white;
-    }
   `;
 
   const ProfileWrap = styled.div`
     width: 100%;
     text-align: center;
-    cursor: pointer;
     > img {
       width: 22vh;
       height: 22vh;
@@ -79,41 +94,43 @@ function Nav({ isLogin }) {
       height: 7vh;
       border: none;
       border-radius: 40px;
-      font-size: max(0.85vw, 12px);
+      font-size: 0.98rem;
       font-weight: 700;
       display: block;
       margin: 0 auto;
-      transition: 0.3s;
-    }
-    > button:hover {
-      background-color: black;
-      color: white;
-      cursor: pointer;
     }
   `;
 
   return (
     <>
       {isLogin ? (
-        <NavWrap>
-          <div>
-            <ProfileWrap>
-              <img src={profile} alt="none" />
-              <button>EDIT PROFILE</button>
-            </ProfileWrap>
-            <Button2>LOGOUT</Button2>
-            <Button2>
-              <Link to="/mypage">MYPAGE</Link>
-            </Button2>
-          </div>
-        </NavWrap>
+        <>
+          <NavBtn onClick={onClick}>
+            <FontAwesomeIcon icon={faBars} />
+          </NavBtn>
+          <NavWrap>
+            <div>
+              <ProfileWrap>
+                <img src={profile} alt="none" />
+                <button>EDIT PROFILE</button>
+              </ProfileWrap>
+              <Button2>LOGOUT</Button2>
+              <Button2>
+                <Link to="/mypage">MYPAGE</Link>
+              </Button2>
+            </div>
+          </NavWrap>
+        </>
       ) : (
-        <NavWrap>
-          <div>
-            <Button1>LOGIN / SIGNUP</Button1>
-            <Button1>MYPAGE</Button1>
-          </div>
-        </NavWrap>
+        <>
+          <NavBtn>햄버거</NavBtn>
+          <NavWrap>
+            <div>
+              <Button1>LOGIN / SIGNUP</Button1>
+              <Button1>MYPAGE</Button1>
+            </div>
+          </NavWrap>
+        </>
       )}
     </>
   );