React、Tailwind、Typescript汉堡菜单

Question

在移动视图中，我需要我的导航变成汉堡菜单。我不知道如何实现代码。

这是我当前的导航：

<div className="flex items-center">
<div className="text-xl font-extralight">
<a className="ml-24" href="#about">
About
</a>
<a className="ml-24" href="#pricing">
Pricing
</a>
<Button
className="store-login-btn text-xl font-extralight absolute right-0 mr-12"
onClick={handleClick}
>
Login
</Button>
</div>
</div>

我读到一些关于制作两个独立的东西。一个用于网络导航，一个用于移动导航？我只是不知道如何编写代码。任何帮助都将是惊人的！！

Answer 1

我不知道React，但我可以帮助您处理顺风部分。

事实上，你可以制作一个桌面和一个移动菜单，并根据断点显示其中任何一个。我在顺风操场上做了一个例子。如果您更改屏幕的大小，在md断点处，它将从桌面切换到移动菜单，反之亦然。

这里的主要内容是设置了md:hidden、hidden和md:flex类来切换md断点的可见性。您也可以选择另一个断点。

你只需要在点击汉堡图标时切换移动菜单的可见性。我现在已经用一种相当丑陋的香草javascript方式完成了这项工作。但你会明白的。

操场上的代码：

<div class="flex w-full items-center bg-slate-100 px-4 py-2">
<!-- Show menu on large screens -->
<div class="hidden w-full flex-row justify-between text-xl font-extralight md:flex">
<div class="flex gap-4">
<a class="" href="#about"> About </a>
<a class="" href="#pricing"> Pricing </a>
</div>
<div>
<button class="store-login-btn text-xl font-extralight" onClick="{handleClick}">Login</button>
</div>
</div>
<!-- Show hamburger on small screens: -->
<div class="md:hidden cursor-pointer" onClick="document.getElementById('mobilemenu').classList.toggle('hidden')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
</div>
<!-- Mobile menu -->
<div id="mobilemenu" class="flex flex-col bg-slate-50 p-8 justify-center items-start gap-2 hidden md:hidden">
<a class="" href="#about"> About </a>
<a class="" href="#pricing"> Pricing </a>
<button class="" onClick="{handleClick}">Login</button>
</div>