Как мне разместить гамбургер-меню React sh в правом верхнем углу моего сайта? - PullRequest
Новая
       25

Как мне разместить гамбургер-меню React sh в правом верхнем углу моего сайта?

2 голосов
/ 05 мая 2020

Я хочу создать гамбургер-меню для отображения в мобильной версии моего приложения React 16.13.0. Я следую этому руководству - https://www.zacwillmington.com/how-to-add-a-hamburger-menu-to-your-website/. Итак, я создал компонент панели навигации следующим образом: 

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import HamburgerMenu from 'react-hamburger-menu';
import {isMobile} from 'react-device-detect';
import './NavBar.css';

class NavBar extends Component {
    constructor(){
        super()
        this.state = {
            open: false,
            hideOrShowHambugerDropDown: 'nav'
        }
    }

    handleClick = () => {
        this.setState({open: !this.state.open});
    }

    displayHamburgerMenu = () => {
        return (
            <HamburgerMenu
                    isOpen={this.state.open}
                    menuClicked={this.handleClick.bind(this)}
                    width={18}
                    height={15}
                    strokeWidth={1}
                    rotate={0}
                    color='black'
                    borderRadius={0}
                    animationDuration={0.5}
                />
        )
    }

    displayNavBar = () => {
        return (
            <ul className='nav'>
                    <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
                    <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
                </ul>
        )
    }

    displayMobileMenu = () => {
        return (
            <ul className='hamburgerDropDown'>
                    <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
                    <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
                </ul>
        )
    }

    render() {
        return (
            <div className='navbar'>
                { this.state.open ? this.displayMobileMenu() : null}
                {isMobile ? this.displayHamburgerMenu() : this.displayNavBar()}
            </div>
        );
    }
}

export default NavBar;

Я использую эту таблицу стилей для управления им ... 

.hamburgerDropDown {
  background-color: black;
  border: 1px solid bisque;
}

ul.hamburgerDropDown {
  padding: 10px;
}

.navbar div {
  display: inline-block;
}

Однако я столкнулся с парой проблем. В меню не отображается грипп sh в правом верхнем углу моего окна. Также под меню появляется кнопка закрытия «x». Как мне отрегулировать эти элементы? Если вы используете мобильный браузер, вы можете увидеть демонстрацию по адресу http://prod.chicommons.coop/, в противном случае см. Ниже

enter image description here

Изменить: Если вам интересно, вот код на GitHub - https://github.com/chicommons/maps/tree/master/client

Ответы [ 2 ]

4 голосов
/ 07 мая 2020

Есть несколько небольших изменений, которые вам нужно сделать

В раскрывающемся классе гамбургера вам нужно добавить свойство position: absolute и top and right 

.hamburgerDropDown {
  background-color: black;
  border: 1px solid bisque;
  position: absolute;
  top: 50px;
  right: -1rem;
}

Во-вторых, в компонент Navbar. js, вам необходимо изменить порядок рендеринга гамбургера и меню 

 handleSelect = () => {
    this.setState({ open: false });
  };
  displayMobileMenu = () => {
    return (
      <ul className="hamburgerDropDown" onClick={this.handleSelect}>
        <li className="nav-link">
          <NavLink to="/add">Add</NavLink>
        </li>
        <li className="nav-link">
          <NavLink to="/search">Search</NavLink>
        </li>
      </ul>
    );
  };
render() {
    return (
      <div className="navbar">
        {isMobile ? this.displayHamburgerMenu() : this.displayNavBar()}  // this rendered before menu
        {this.state.open ? this.displayMobileMenu() : null}
      </div>
    );
  }

Рабочая демонстрация, созданная на основе вашего проекта github

2 голосов
/ 07 мая 2020

Взглянул на ваш GitHub. У вас отличный старт, и вы определенно движетесь в правильном направлении. Тем не менее, есть несколько областей, в которых можно немного полюбить.

Сборка и архитектура

У вас есть несколько функциональных компонентов внутри вашего компонента класса. Я бы порекомендовал извлечь их для целей расширяемости и поддержки. вместо скобок.

Примечание: Вы можете рассмотреть возможность группировки вашего компонента c content (.js, .css, .test.js, et c) в свои собственные каталоги.

HamburgerMenu 

const HamburgerMenu = () => (
    <HamburgerMenu
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
    />
);

DesktopNav 

const DesktopNav = () => (
    <ul className='nav'>
        <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
        <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
    </ul>
);

MobileMenu 

const MobileMenu = () => (
    <ul className='hamburgerDropDown'>
        <li className='nav-link'><NavLink to='/add'>Add</NavLink></li>
        <li className='nav-link'><NavLink to='/search'>Search</NavLink></li>
    </ul>
);

NavBar

Теперь вы можете импортировать отдельные компоненты. Кроме того, поскольку вы ничего не делаете, кроме установки state в constructor, вы можете вытащить это из конструктора и установить его на уровне класса. При реализации новых компонентов вы можете просто вызывать их, как любой другой компонент, вместо того, чтобы создавать экземпляр функции.

_ Примечание: Я также обновил ваш div компонент к более семанти c и доступному nav компоненту. 

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import HamburgerMenu from 'react-hamburger-menu';
import {isMobile} from 'react-device-detect';

import HamburgerMenu from './HamburgerMenu';
import DesktopNav from './DesktopNav';
import MobileMenu from './MobileMenu';

import './NavBar.css';

class NavBar extends Component {
    state = {
        open: false,
        hideOrShowHambugerDropDown: 'nav'
    }

    handleClick = () => {
        this.setState({open: !this.state.open});
    }

    render() {
        return (
            <nav className='navbar'>
                { this.state.open ? <MobileMenu /> : null}
                {isMobile ? <HamburgerMenu /> : <DesktopNav />}
            </nav>
        );
    }
}

Стиль

Теперь по поводу вашего вопроса о стиле. Благодаря стилю родительских компонентов ваш контент находится там, где он должен быть. Вы можете либо настроить padding вокруг header, либо использовать margin для «pu sh» ваших компонентов там, где они вам нужны. Или, как упоминалось в @ drew-reese , вы можете использовать position (absolute или fix, в зависимости от того, что вы хотите), чтобы поместить значок в верхний правый угол.

Также имейте в виду, что Bootstrap CSS может влиять на компоновку ваших компонентов. Возможно, вам придется переопределить стили, установленные Bootstrap в ваших отдельных компонентах.

...