React NextJS 앱에서 햄버거 메뉴 만들기

저는 최근에 Wes Bos의 놀라운Advanced React 과정을 완료했습니다. 과정에서 그는 아래 나열된 최신 기술을 갖춘 온라인 상점을 구축하도록 가르쳤습니다.

최신 기술

대부분의 학생들은 배운 후에 그가 가르친 내용으로 다른 것을 만들었습니다. 배운 내용을 바탕으로 Indian Restaurant Billing App을 만들겠습니다.

내 github에서 앱을 계속 업데이트할 것이지만 블로그에서 만드는 전체 단계는 제공하지 않을 것입니다. 전체 단계는 복잡하고 Wes에 의해 저작권이 있으며 동일한 과정을 생성하고 싶지 않습니다.

Wes가 전자 상거래 앱에 적용한 변경 사항을 게시하여 Restaurant Billing App으로 만들 예정입니다.

이제 저는 아래와 같이 앱에서 사용되는 전통적인 메뉴가 마음에 들지 않습니다.

전통적인 메뉴

태블릿에서도 쉽게 사용할 수 있도록 햄버거 메뉴로 변환하고 싶었습니다.

이 햄버거 메뉴를 만들기 위해 약간의 프런트엔드 흐름을 이해할 것입니다. NextJs 앱은 아래 스크린샷에 있는 _app.js 파일에서 시작합니다.

_app.js

다음으로 페이지 구성 요소를 만듭니다. 여기서는 테마와 함께 사용되는 몇 가지 기본 스타일 구성 요소와 모든 구성 요소에 전역 스타일을 주입하는 데 사용되는 스타일 구성 요소의 injectGlobal도 있습니다.

    import React, { Component } from "react";
    import Header from "./Header";
    import Meta from "./Meta";
    import styled, { ThemeProvider, injectGlobal } from "styled-components";

    const theme = {
    …
    …
    };

    const StyledPage = styled.div`
    background: white;
    color: ${props => props.theme.black};
    `;

    const Inner = styled.div`
    max-width: ${props => props.theme.maxWidth};
    margin: 0 auto;
    padding: 2rem;
    `;

    injectGlobal`
    @font-face {
    font-family: 'radnika_next';
    src: url('/static/radnikanext-medium-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    }
    …
    …
    `;

    class Page extends Component {
    render() {
    return (
    <ThemeProvider theme={theme}>
    <StyledPage>
    <Meta />
    <Header />
    <Inner>{this.props.children}</Inner>
    </StyledPage>
    </ThemeProvider>
    );
    }
    }

    export default Page;

또한 앱에 두 페이지가 있습니다. 하나는 홈용이고 다른 하나는 요리를 추가하는 페이지용입니다.

index.js

adddish.js

이제 Nave 메뉴, 제목 및 청구서를 저장하기 위한 미래 버튼을 포함하는 헤더 구성 요소를 생성합니다.

헤더.js

이제 드디어 햄버거 메뉴를 만들어 보겠습니다. 이를 위해 react-burger-menu를 사용합니다.

햄버거

햄버거 메뉴가 제대로 작동하려면 전역 수준에서 일부 CSS를 주입해야 합니다.

따라서 스타일이 지정된 구성 요소 프로젝트에서 injectGlobal 내부의 Page.js에 주입합니다.

    /*Below Styles for the burger menu*/

    /* Position and sizing of burger button */

    .bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    left: 26px;
    top: 26px;
    }

    /* Color/shape of burger icon bars */

    .bm-burger-bars {
    background: #373a47;
    }

    /* Color/shape of burger icon bars on hover*/

    .bm-burger-bars-hover {
    background: #a90000;
    }

    /* Position and sizing of clickable cross button */

    .bm-cross-button {
    height: 24px;
    width: 24px;
    }

    /* Color/shape of close button cross */

    .bm-cross {
    background: #FFFAFA;
    }

    /*

    Sidebar wrapper styles

    Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases

    */

    .bm-menu-wrap {
    position: fixed;
    height: 100%;
    }

    /* General sidebar styles */

    .bm-menu {
    background: rgba(169,169,169,0.8);
    padding: 2.5em 1.5em 0;
    font-size: 1.15em;
    }

    /* Morph shape necessary with bubble or elastic */

    .bm-morph-shape {
    fill: #373a47;
    }

    /* Wrapper for item list */

    .bm-item-list {
    color: #b8b7ad;
    padding: 0.8em;
    display: flex;
    flex-direction: column;
    }

이제 Nav.js에서 navbar에 대한 코드를 작성합니다.

Link 및 react-burger-menu 가져오기부터 시작합니다. 다음으로 Link 태그 내부에서 사용할 앵커 태그에 대한 스타일 구성 요소를 작성합니다.



다음으로 메뉴를 작성하고 일부 사용자 정의 속성을 제공합니다. 이들은 모두 react-burger-menu 문서에서 가져온 것입니다. 사용자가 메뉴의 항목을 클릭할 때마다 상태를 사용하여 메뉴를 닫는다는 점에 유의하십시오.



이제 localhost:7777로 이동하여 햄버거를 클릭하면 오른쪽에서 메뉴가 나타납니다. 해당 페이지로 변경하려면 요리 추가를 클릭하십시오.

지금까지 앱

this 링크의 내 github 저장소에서 동일한 코드를 찾을 수 있습니다.