Merge pull request #9 from sthgml/8-fix-모바일에서-nav-형태-및-포지션-수정

🐛 fix: 모바일에서 nav 형태 및 포지션 수정
sthgml · Dec 8, 2023 · 4590a74 · 4590a74
2 parents 128de5f + 28ceb5c
commit 4590a74
Show file tree

Hide file tree

Showing 16 changed files with 251 additions and 195 deletions.
diff --git a/src/GlobalStyle.jsx b/src/GlobalStyle.jsx
@@ -1,6 +1,88 @@
 import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
+  /* http://meyerweb.com/eric/tools/css/reset/ 
+  v2.0 | 20110126
+  License: none (public domain)
+  */
+
+  * {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  .txt-hide {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    width: 1px;
+    height: 1px;
+  }
+
+  img {
+    vertical-align: top;
+  }
+
+  button {
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
   .a11y-hidden {
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -116,89 +198,6 @@ const GlobalStyle = createGlobalStyle`
   strong {
     font-weight: bold;
   }
-  
-  /* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-  * {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  /* HTML5 display-role reset for older browsers */
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  section {
-    display: block;
-  }
-
-  body {
-    line-height: 1;
-  }
-
-  ol,
-  ul {
-    list-style: none;
-  }
-
-  blockquote,
-  q {
-    quotes: none;
-  }
-
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: '';
-    content: none;
-  }
-
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-
-  a {
-    text-decoration: none;
-    color: #000;
-  }
-
-  .txt-hide {
-    position: absolute;
-    overflow: hidden;
-    clip-path: inset(50%);
-    width: 1px;
-    height: 1px;
-  }
-
-  img {
-    vertical-align: top;
-  }
-
-  button {
-    background: none;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-
 `
 
 export default GlobalStyle;
diff --git a/src/components/organisms/Header/Hamburger.jsx b/src/components/organisms/Header/Hamburger.jsx
@@ -1,16 +1,88 @@
 import React from 'react'
+import styled from 'styled-components'
+
+const DivHamburger = styled.div`
+  #hamburger {
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  #hamburger div {
+    width: 100%;
+    height: 2px;
+    border-radius: 4px;
+    background-color: var(--icon);
+    transition: all 0.3s;
+  }
+  /* hover */
+  #hamburger:hover div:first-child{
+    transform: rotate(45deg);
+  }
+
+  #hamburger:hover div:nth-child(2){
+    transform: translate(-1em);
+  }
+
+  #hamburger:hover div:nth-child(3){
+    transform: rotate(-45deg);
+  }
+  /* active */
+  #hamburger:active div:first-child{
+    transform: translate(0.5em) rotate(45deg) ;
+  }
+
+  #hamburger:active div:nth-child(2){
+    transform: translate(-0.5em) ;
+  }
+
+  #hamburger:active div:nth-child(3){
+    transform: translate(0.5em) rotate(-45deg) ;
+  }
+
+  /* opened */
+  /* opened:hover */
+  #hamburger.opened:hover div:first-child{
+    transform: translate(-1em) rotate(-45deg) ;
+  }
+
+  #hamburger.opened:hover div:nth-child(2){
+    transform: translate(0) ;
+  }
+
+  #hamburger.opened:hover div:nth-child(3){
+    transform: translate(-1em) rotate(45deg) ;
+  }
+  /* opened:active */
+  #hamburger.opened:active div:first-child{
+    transform: translate(-1.5em) rotate(-45deg) ;
+  }
+
+  #hamburger.opened:active div:nth-child(2){
+    transform: translate(-0.5em) ;
+  }
+
+  #hamburger.opened:active div:nth-child(3){
+    transform: translate(-1.5em) rotate(45deg) ;
+  }
+`
 
 export default function Hamburger({ isMenuOpen, handleMenu }) {
   return (
-    <button 
-    type="button" 
-    id="hamburger" 
-    className={`menu-btn 
-    ${isMenuOpen ? 'opened' : ''}`} 
-    onClick={handleMenu}>
-        <div></div>
-        <div></div>
-        <div></div>
-    </button>
+    <DivHamburger>
+      <button 
+      type="button" 
+      id="hamburger" 
+      className={`menu-btn 
+      ${isMenuOpen ? 'opened' : ''}`} 
+      onClick={handleMenu}>
+          <div></div>
+          <div></div>
+          <div></div>
+      </button>
+    </DivHamburger>
   )
 }
diff --git a/src/components/organisms/Header/Header.jsx b/src/components/organisms/Header/Header.jsx
@@ -1,7 +1,6 @@
 import { useAuthContext } from "../../../hooks/useAuthContext";
 import { useLogout } from "../../../hooks/useLogout"
 import { Link, useLocation } from "react-router-dom";
-import logoSm from "../../../images/당장복습헤_logo @4x.png";
 import iconLogout from "../../../images/icon/icon-logout.svg";
 import iconLogin from "../../../images/icon/icon-login.svg";
 import iconJoin from "../../../images/icon/icon-join.svg";
@@ -25,7 +24,7 @@ function Header ({ isMenuOpen, setIsMenuOpen }) {
                     <h1>
                         <p className="a11y-hidden">당장복습헤_logo</p>
                         <Link href="./">
-                            <img src={logoSm} alt="당장복습헤 로고" className="logo-sm" />
+                            <div alt="당장복습헤 로고" className="logo-sm" />
                         </Link>
                     </h1>
                 </div>