CODEWITHSUNDEEP
reactjsmobileresponsive-designtailwind-cssresponsive
Dave S.
Dave S.

Reputation: 88

React + Tailwindcss Navbar Mobile not working

I'm fairly new to react development, and I was experimenting a bit with tailwindcss. I'm trying to build a small example of a navbar for mobile, but the transition from the right isn't smooth.

I've looked forums, and other answers here, yet none of them work in my case.

This is the navbar component:

import {useState} from "react";
import {GiHamburgerMenu} from "react-icons/gi";

export const SideMenuBar = () => {
    const [sidebar, setSidebar] = useState(false)
    const showSideBar = () => setSidebar(!sidebar)

    return (
        <div className={'side_bar_menu'}>
            <GiHamburgerMenu onClick={showSideBar}/>
                {
                    sidebar ? <div className={'side_menu_data_items'}/> : null
                }
        </div>
    )
}

The css configuration on tailwind:

theme: {
    extend: {
      fontSize: {
        'mobile-title': '2.60rem'
      },
      colors: {
        'dark-blue': '#0A0F2E',
        'dark-blue-2': '#181c64',
        'grey-blue': '#3c0e66',
        'light-blue-purple': '#344ff0',
        'dark-shade-blue-500': '#221C5D'
      },
      spacing: {
        '720': '45rem',
        '336': '21rem'
      },
      zIndex: {
        '1': '1'
      },
      transitionProperty: {
        'width': 'width'
      }
    },
  },

Finally, the css classes that I'm using on the navbar component.

  .side_menu_data_items {
    @apply bg-dark-blue-2 left-0 top-0 w-screen absolute -z-1 h-screen transition-width ease-in-out duration-500
  }

Any idea on what I'm doing wrong or a hint is greatly appreciated.

Upvotes: 1

Views: 751

Answers (1)

krishnaacharyaa
krishnaacharyaa

Reputation: 25080

Refer this example:

Toggle mobile navbar using hamburger menu

Code:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="bg-yellow-400 h-screen relative z-0 flex">
      <div class="hidden md:block bg-blue-400 w-1/3">
        <div class="flex h-full items-center justify-center text-4xl">
          Desktop Navbar
        </div>
      </div>
      <div class="text-4xl pl-24 md:p-0 main_content">
        The main content of the file and it has it's content all over the page
        and i want to build a navbar on top of this
      </div>
      <div
        class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden"
      >
        <div class="flex h-full items-center justify-center text-4xl">
          Mobile Navbar
        </div>
      </div>
      <div
        class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
      >
        <span class="block w-8 h-1 bg-white"></span>
        <span class="block w-8 h-1 bg-white"></span>
        <span class="block w-8 h-1 bg-white"></span>
      </div>
    </div>
    <script type="text/javascript">
      document
        .querySelector(".hamburger_menu")
        .addEventListener("click", () => {
          console.log("Hello");
          document.querySelector(".mobile_navbar").classList.toggle("hidden");
        });

      document.querySelector(".main_content").addEventListener("click", () => {
        console.log("Touch me");
        console.log(
          document
            .querySelector(".mobile_navbar")
            .classList.contains("hidden") == false &&
            document.querySelector(".mobile_navbar").classList.toggle("hidden")
        );
      });
    </script>
  </body>
</html>

Output in small device with hamburger menu

Enter description

When clicked on hamburger menu

Also refer: Tailwind how to overlap div in small device

Upvotes: 1

Related Questions