Hiio.com

이전까지 헤더를 만들어 보았습니다.

이제 우측에 배치시킨 버튼을 누르면 사이드바가 나오게끔 만들어 보려고 합니다.

1. 버튼 클릭시 useState의 set을 통해 toggle 을 변경시켜 줍니다.

2. 변경된 toggle을 통해 현재 버튼 상태를 가져오고, True, False 일때 각가의 상태에 맞춰 사이드바를 노출시키고 사라지게 하면 될거 같습니다.

먼저 toggle 초기 상태를 false 로 해서 hooks을 만들어 줍니다.

// components/Header/index.js
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon icon={faBars} />
      </div>
    </header>
  );
}

이제 이 FontAwesomIcon 컴포넌트를 클릭하면 toggle 의 상태를 바쭤 주고 이 상태를 바탕으로 icon property를 faBars와 faClose로 바꿔 줍니다.

// components/Header/index.js
import { faBars, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);

  const onIconClick = useCallback(() => {
    setToggle((p) => !p);
  }, []);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon
          icon={toggle ? faClose : faBars}
          onClick={onIconClick}
        />
      </div>
    </header>
  );
}

이제 사이드바에 대한 태그 구조를 작성해 줍니다.

// components/Header/index.js
import { faBars, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);

  const onIconClick = useCallback(() => {
    setToggle((p) => !p);
  }, []);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon
          icon={toggle ? faClose : faBars}
          onClick={onIconClick}
        />
      </div>
      <nav>
        <ul>
          <li>
            <span>Introduction</span>
          </li>
          <li>
            <span>Work</span>
          </li>
          <li>
            <span>Demo</span>
          </li>
          <li>
            <span>Component</span>
          </li>
          <li>
            <span>Blog</span>
          </li>
        </ul>
      </nav>
    </header>
  );
}

로고옆에 붙어 있어 버리네요 

Style을 입혀 줍니다.

1. nav에 relative position 값을 주고 , ul에는 absolute 값을 줘서 오른쪽에 붙여 줍니다.

2. toggle 상태에 따라 className을 변경시켜 sidebar를 나타냈다 없앴다 해줍니다.

먼저 nav 태그의 스타일 부터 입혀줍니다.

nav {
  margin-top: var(--headerHeight);
  width: 100%;
  position: relative;
  background-color: rgba(180, 180, 180, 0.5);
  height: calc(100vh - var(--headerHeight));
  z-index: 998;
}

nav > ul {
  position: absolute;
  right: 0;
  height: calc(100% - 16px);
  width: 60vw;
  max-width: 300px;
  background-color: white;
  z-index: 999;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

nav 의 className에 2번에 해당하는 코드를 작성해 줍니다.

// components/Header/index.js
import { faBars, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);

  const onIconClick = useCallback(() => {
    setToggle((p) => !p);
  }, []);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon
          icon={toggle ? faClose : faBars}
          onClick={onIconClick}
        />
      </div>
      <nav className={toggle ? "show" : "hide"}>
        <ul>
          <li>
            <span>Introduction</span>
          </li>
          <li>
            <span>Work</span>
          </li>
          <li>
            <span>Demo</span>
          </li>
          <li>
            <span>Component</span>
          </li>
          <li>
            <span>Blog</span>
          </li>
        </ul>
      </nav>
    </header>
  );
}

show , hide class에 display block,none 값을 각각 작성해 만들어 줍니다.

이제 ul 안에 있는 li를 원하는데로 스타일을 입혀 주면 됩니다.

nav > ul > li {
  border-bottom: 8px solid #d9d9d9;
  width: calc(100% - 60px);
  cursor: pointer;
}
nav > ul > li > span {
  display: inline-block;
  margin: 8px;
  font-size: 22px;
}
nav > ul > li:hover {
  padding-bottom: 8px;
  background-color: #3eebad;
  border: none;
  font-weight: 600;
}

끝!!!

PortFolio : https://hiio420.com  

Figma: https://www.figma.com/file/WJVwsW99LwZ2B1W3PKDASM/Hiio420?node-id=0%3A1&t=W1IV0P9M12hXOVpp-1

웹 페이지 레이아웃에서 "header"는 일반적으로 페이지 상단에 위치한 영역으로, 페이지의 로고, 메뉴, 검색 창 등 중요한 내용을 담고 있습니다. 이를 통해 사용자가 웹 사이트에서 어디에 있는지, 그리고 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다.
Header는 일반적으로 사이트의 브랜드, 제목, 로고 등과 같은 정보를 제공하며, 일반적으로 메뉴와 검색 기능이 포함됩니다. 일부 웹 사이트에서는 헤더 영역에서 사용자가 많이 찾는 정보를 제공하기도 합니다.

이전까지 Layout 을 통해서 헤더-컨텐츠-푸터로 이루어지도록 만들었습니다.

이번에는 Header를 좀더 원하는 방향으로 완성 시켜 보려고 합니다.

3부분으로 이루진 Layout에 상간에 위치한 Header에는 최종적으로 로고 + 사이드바 버튼이 들어 가게 됩니다.

1. 로고 이미지 import 

2. 좌측 으로 배치

3. 사이드바 버튼 import 

4. 우측으로 배치

이 순서대로 진행 되지 않을까 싶네요.

먼저 로고 이미지를 배치 시켜 보겠습니다.

// components/Header/index.js
import "./header.css";
import logo from "../../resources/svg/logo.svg";

export default function Header() {
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb"></div>
    </header>
  );
}

이미지가 header보다 커서 맞지가 않네요.

이미지 크기를 조정 시켜 줍니다.

header {
  height: var(--headerHeight);
  width: 100%;
}
header > #logo {
  height: calc(100% - 32px);
  padding: 16px;
}
header > #logo > img {
  max-height: 100%;
}

padding을 줘서 간격을 주고 max-height 로 높이를 조절해 줬습니다.

알맞게 들어간 듯?

이제 사이드바 버튼을 추가 해 봐야겠습니다.

icon은 font-awesome을 사용하려고 합니다.

설치해 줍니다.

https://fontawesome.com/docs/web/use-with/react/

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome@latest

FontAwesome 컴포넌트에 icon props 의 값으로 faBars를 넣어서 div#gnb 태그 안에 넣어 줍니다.

// components/Header/index.js
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon icon={faBars} />
      </div>
    </header>
  );
}

그런데 로고 밑에 붙어 버려서 내려가 버렸습니다.

float 속성을 줘서 오른쪽에 붙여 봅니다.

header {
  height: var(--headerHeight);
  width: 100%;
}
header > #logo {
  height: calc(100% - 32px);
  padding: 16px;
}
header > #logo > img {
  max-height: 100%;
}

header > #gnb {
  float: right;
}

오른쪽으로 이동하긴 했지만, 헤더 아래로 위치 해 있습니다.

float:left 값을 #logo에 추가해 줍니다. 주고 div#gnb에도 padding 과 height 값을 줍니다.

header {
  height: var(--headerHeight);
  width: 100%;
}
header > #logo {
  height: calc(100% - 32px);
  padding: 16px;
  float: left;
}
header > #logo > img {
  max-height: 100%;
}

header > #gnb {
  float: right;
  padding: 16px;
  height: calc(100% - 32px);
}

잘나오는 것 같습니다만, 사이즈가 맞질 않네요

font-size 를 24px로 줘봅니다.

header {
  height: var(--headerHeight);
  width: 100%;
}
header > #logo {
  height: calc(100% - 32px);
  padding: 16px;
  float: left;
}
header > #logo > img {
  max-height: 100%;
}

header > #gnb {
  float: right;
  padding: 16px;
  height: calc(100% - 32px);
  font-size: 24px;
}

원하는 데로 잘 들어 간 것 같습니다 !

다름은 사이드바를 한번 작업해 봐야겠습니다.

PortFolio : https://hiio420.com  

Figma: https://www.figma.com/file/WJVwsW99LwZ2B1W3PKDASM/Hiio420?node-id=0%3A1&t=W1IV0P9M12hXOVpp-1