[#. React] Web/Mobile 웹/모바일 토글 메뉴바 toggle menubar 추가하기

 

 

 

 

 

 

네비게이션 바에 있는 메뉴를 웹에서는 펼쳐진 상태로 보고 모바일에서는 햄버거바 ☰ 형태로 접혀 있도록 하려고 한다

 

 

 

 

① packages 설치

 

antd  // UI Framework

@ant-design/icons  // UI Icon

styled-components  // scss 

react-device-detect  // web/mobile device 구분

 

이렇게 설치해서 사용할 것이다

 

npm install --save antd 
npm install --save @ant-design/icons 
npm install --save styled-components
npm install --save react-device-detect

 

 

 

 

 

② frontend/src/components/NavBar/NavBar.js

 

import React, { useState, useEffect } from 'react';
import { Menu, Button } from 'antd';
import styled from 'styled-components';
import { BrowserView, MobileView } from 'react-device-detect';
import { MenuOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const MenuList = styled.div`
  display: flex;
  justify-content: space-between;
`;

const NavTop = styled.div`
  display: flex;
  justify-content: flex-end;
  button {
    background: black;
    border: none;
  }
`;

function NavBar() {

  const [toggleMenu, setToggleMenu] = useState(false)
  const [toggleBar, setToggleBar] = useState(true)

  const toggleChange = () => {
    setToggleMenu(!toggleMenu)
    setToggleBar(!toggleBar)
  }

  const onMenuClick = () => {
    setToggleMenu(!toggleMenu)
    setToggleBar(!toggleBar)
  }

  return(
    <div>
      { /* web */ }
      <BrowserView>
        <MenuList>
          <Menu selectedKeys="mail" mode="horizontal">
            <Menu.Item key="subs">
              구독하기
            </Menu.Item>
            <Menu.Item key="product">
              상품 보기
            </Menu.Item>
            <Menu.Item key="cs">
              고객센터
            </Menu.Item>
          </Menu>
          <Menu mode="horizontal">
            <Menu.Item key="signin">
              <Link to="/login">
              로그인
              </Link>
            </Menu.Item>
            <Menu.Item key="signup">
              <Link to="/signup">
              회원가입
              </Link>
            </Menu.Item>
          </Menu>
        </MenuList>
      </BrowserView>
      { /* mobile */ }
      <MobileView>
        <NavTop>
          <Button type="primary" onClick={toggleChange} style={{ marginBottom: 16 }}>
            { toggleBar ? <MenuOutlined /> : <MenuFoldOutlined /> }
          </Button>
        </NavTop>
        { toggleMenu &&
          <Menu
            defaultSelectedKeys={['1']}
            mode="inline"
            theme="light"
            inlineCollapsed={toggleBar}
            onClick={onMenuClick}
          >
            <Menu.Item key="subs">
              구독하기
            </Menu.Item>
            <Menu.Item key="product">
              상품 보기
            </Menu.Item>
            <Menu.Item key="cs">
              고객센터
            </Menu.Item>
            <Menu.Item key="signin">
              <Link to="/login">
              로그인
              </Link>
            </Menu.Item>
            <Menu.Item key="signup">
              <Link to="/signup">
              회원가입
              </Link>
            </Menu.Item>
          </Menu>
        }
      </MobileView>
    </div>
  )
}

export default NavBar;

 

 

 

 

 

웹(WEB) 화면에서 네비게이션 바

 

 

 

 

 

모바일(MOBILE) 화면에서 네비게이션 바

 

메뉴바 접혀있을 때

 

 

메뉴바 펼쳤을 때