From f57847151f3d1281bcd8357bbea04e892f0a0d77 Mon Sep 17 00:00:00 2001 From: Youngseo Kang Date: Sun, 29 Aug 2021 15:27:09 +0900 Subject: [PATCH 1/2] =?UTF-8?q?:lipstick:=20[Client]=20nav.js=20:=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20nav=20bar=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/comp/Nav.js | 116 +++++++++++++++++++++++------------------ 1 file changed, 65 insertions(+), 51 deletions(-) diff --git a/client/src/comp/Nav.js b/client/src/comp/Nav.js index d05b966..5d44f82 100644 --- a/client/src/comp/Nav.js +++ b/client/src/comp/Nav.js @@ -1,18 +1,49 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { Link } from "react-router-dom"; +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 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:none; + } + ` + const NavWrap = styled.nav` + @media screen and (max-width: 767px){ + flex:none; + position:absolute; + width:100%; + height:100vh; + display:flex; + 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; */ + /* z-index:100; */ `; const Button1 = styled.button` @@ -20,23 +51,13 @@ 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-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` @@ -44,29 +65,18 @@ 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: 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 +89,45 @@ 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 ? ( - -
- - none - - - LOGOUT - - MYPAGE - -
- + <> + + + + +
+ + none + + + LOGOUT + + + MYPAGE + + +
+ + ) : ( - -
- LOGIN / SIGNUP - MYPAGE -
- + <> + 햄버거 + +
+ LOGIN / SIGNUP + MYPAGE +
+ + )} ); From 1600bc73099b4c319655a0aa3cf02e9631743e50 Mon Sep 17 00:00:00 2001 From: Lee Naeun Date: Sun, 29 Aug 2021 15:46:44 +0900 Subject: [PATCH 2/2] =?UTF-8?q?:lipstick:=20[Client]=20Nav.js=20:=20menu?= =?UTF-8?q?=20bar=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/comp/Nav.js | 73 ++++++++++++++++++++++-------------------- 1 file changed, 38 insertions(+), 35 deletions(-) diff --git a/client/src/comp/Nav.js b/client/src/comp/Nav.js index 5d44f82..c6376c8 100644 --- a/client/src/comp/Nav.js +++ b/client/src/comp/Nav.js @@ -1,48 +1,53 @@ 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 { 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; + 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:none; + @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:flex; - justify-content:center; - align-items:center; - } + @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: flex; + min-height: 100vh; + justify-content: center; + align-items: center; /* z-index:100; */ `; @@ -100,8 +105,8 @@ function Nav({ isLogin }) { <> {isLogin ? ( <> - - + +
@@ -111,9 +116,7 @@ function Nav({ isLogin }) { LOGOUT - - MYPAGE - + MYPAGE