React + Tailwindcss Navbar Mobile not working

Question

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.

Change -z-1 to z-10 and you need to have relative as a parent for this to work. — krishnaacharyaa
– krishnaacharyaa, Commented Jan 8, 2023 at 1:43

krishnaacharyaa · Accepted Answer · 2023-01-08 01:45:42Z

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

Collectives™ on Stack Overflow

React + Tailwindcss Navbar Mobile not working

1 Answer 1

Toggle mobile navbar using hamburger menu

Code:

Output in small device with `hamburger menu`

When clicked on `hamburger menu`

Also refer: Tailwind how to overlap div in small device

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Toggle mobile navbar using hamburger menu

Code:

Output in small device with hamburger menu

When clicked on hamburger menu

Also refer: Tailwind how to overlap div in small device

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Output in small device with `hamburger menu`

When clicked on `hamburger menu`