переключение навигационной панели в реакцию и попутный ветер - PullRequest
0 голосов
/ 09 ноября 2019

Мне удалось выполнить некоторые уроки, чтобы получить отзывчивую навигационную панель, но я думаю, что использование тумблера делает его немного прикольным.

Мой компонент ниже.

export default class navbar extends Component {
    state = {
        on: false,
    }

    toggle = () => {
        this.setState({
            on: !this.state.on,
        })
    }

    render() {
        return (
            <nav className="sm:flex sm:justify-between sm:items-center sm:px-4 sm:py-3">
                <div className="flex items-center justify-between px-4 py-3 sm:p-0">
                    <div>
                        <img src={require("../images/logo.svg")} alt="Fracture Group Logo" className="h-5 mb-0"></img>
                    </div>
                    <div class="sm:hidden">
                        <button type="button" class="block text-gray-500 hover:text-white focus:text-white focus:outline-none" onClick={this.toggle}>
                            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                                {/* <path v-if="isOpen" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/> */}
                                <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
                            </svg>
                        </button>
                    </div>
                </div>

                {this.state.on && (
                    <nav className="px-2 pt-2 pb-4 sm:block sm:flex sm:p-0">
                        <a href="#" className="block px-2 py-1 text-white font-semibold font-sans rounded hover:bg-gray-800">
                            our listings
                        </a>
                        <a href="#" className="block mt-1 px-2 py-1 text-white font-semibold font-sans rounded hover:bg-gray-800 sm:mt-0 sm:ml-2">
                            our listings
                        </a>
                        <a href="#" className="block mt-1 px-2 py-1 text-white font-semibold font-sans rounded hover:bg-gray-800 sm:mt-0 sm:ml-2">
                            our listings
                        </a>
                    </nav>
                )}
            </nav>
        )
    }
}

Когда я открываю закрытое меню в небольшом окне и оставляю ссылки появляющимися. Они переместились на место, как и планировалось, когда я изменил размеры в большее окно.

, когда я оставляю меню закрытым, а при переходе к большему окну ссылки не появляются. Это потому, что я неправильно использую состояние переключения?

Переключатель открывает меню, как и предполагалось, но когда меню не открывается, ссылки не отображаются на большом экране. Если я уже не открыл меню.

есть идеи, как это исправить?

...