CODEWITHSUNDEEP
reactjstailwind-csshamburger-menu
Jennifer De Goede
Jennifer De Goede

Reputation: 459

React, Tailwind, Typescript burger menu

I need my nav to turn into a hamburger menu when in mobile view. Im not sure how to implement the code.

This is my current nav:

  <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>

I read something about making 2 separate 's one for the web nav and one for the mobile nav? I am just not sure how to write the code. Any help would be amazing!!

Upvotes: 0

Views: 2325

Answers (1)

Gabe
Gabe

Reputation: 2626

I do not know React, but I can help you with the tailwind part.

Indeed you could make a desktop and a mobile menu and depending on the breakpoint show either one. I have made an example in the Tailwind playground. If you change the size of your screen, at the md-breakpoint it will switch from the desktop to the mobile menu and vice versa.

The main thing here is that there are md:hidden and hidden and md:flex classes set to toggle the visibility on the md breakpoint. You may also choose another breakpoint.

The only thing you need to do is toggle the visibility of the mobile menu when the hamburger icon is clicked. I have made made this work in a rather ugly vanilla javascript way now. But you will get the idea.

Code in the playground:

<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>

Upvotes: 2

Related Questions