Мне удалось выполнить некоторые уроки, чтобы получить отзывчивую навигационную панель, но я думаю, что использование тумблера делает его немного прикольным.
Мой компонент ниже.
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>
)
}
}
Когда я открываю закрытое меню в небольшом окне и оставляю ссылки появляющимися. Они переместились на место, как и планировалось, когда я изменил размеры в большее окно.
, когда я оставляю меню закрытым, а при переходе к большему окну ссылки не появляются. Это потому, что я неправильно использую состояние переключения?
Переключатель открывает меню, как и предполагалось, но когда меню не открывается, ссылки не отображаются на большом экране. Если я уже не открыл меню.
есть идеи, как это исправить?