nav menu tailwind for mobile react

Imran Khan answered on December 2, 2023 Popularity 6/10 Helpfulness 2/10

answer nav menu tailwind for mobile react

nav menu tailwind for mobile react

Comment

import React, { useState } from 'react';
import Menu from './Menu';
 
function App() {
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  return (
    <nav className="bg-gray-400">
      <div className="flex items-center justify-between h-16 px-4 border-b border-solid border-slate-600">
        <div className="flex-shrink-0 font-bold tracking-wider">
          LOGO
        </div>
        <button
          type="button"
          className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out"
          onClick={() => setShowMobileMenu(!showMobileMenu)}>
          <svg
            className="h-6 w-6"
            stroke="currentColor"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </button>
      </div>
      {showMobileMenu && <Menu />}
    </nav>
  );
}
 
export default App;

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: www.cluemediator.com

Tags: javascript menu mobile nav

Link to this answer
Share Copy Link

Contributed on Dec 02 2023

Imran Khan

0 Answers Avg Quality 2/10

nav menu tailwind for mobile react

Contents

More Related Answers

nav menu tailwind for mobile react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.