TypeScript、Tailwind 和 React。使导航响应到汉堡菜单

【问题标题】：TypeScript, Tailwind and React. Making a nav responsive into a hamburger menuTypeScript、Tailwind 和 React。使导航响应到汉堡菜单
【发布时间】：2022-08-13 22:28:48
【问题描述】：

我有一个小导航部分，当您在移动设备上查看时，我想尝试进入汉堡菜单。我对如何做到这一点感到困惑。

这是我的网络代码：

  <div className=\"flex m-12\">
    <img className=\"store-page-logo\" src={Logo} alt=\"logo\" />
    <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>
        <a
          className=\"store-login-btn text-xl font-extralight absolute right-0 mr-12\"
          href=\"/login\"
        >
          Login
        </a>
      </div>
    </div>
  </div>

我正在为 css 使用 React、TypeScript 和 Tailwind。如果有人可以帮忙请。

标签： reactjs typescript tailwind-css

【解决方案1】：

您可以拥有 2 个divs（导航和汉堡菜单）并以桌面屏幕尺寸隐藏汉堡（隐藏移动屏幕尺寸的导航）。

这是一个 Tailwind Play 沙盒。您可以将引用从 class 更改为 className 以使用 React 中的代码。

https://play.tailwindcss.com/gyYJXV99oV

【讨论】：

你能给我一个如何获得汉堡图标的例子吗？也许还有代码？？
大多数情况下，我从https://fonts.google.com/icons?icon.query=hamburger 获取图标作为 Svg 文件格式，这里有一个使用 Svg 反应的小例子https://codesandbox.io/s/react-live-editor-forked-4wq5zp?file=/src/index.js @JenniferDeGoede