Slider from TailwindUI issue.

Unanswered

Bald Eagle posted this in #help-forum

Bald EagleOP

2023-10-17T14:49:41.000Z

I have a navbar and use client component (hamburger).
everything outside the component cannot be clicked when the slider is out.

2 Replies

Bald EagleOP

2023-10-17T14:50:59.000Z

When sidebar is opened, It cannot be clicked.

"use client";
import React, { useState, useRef, useEffect, Fragment } from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { Dialog, Transition } from "@headlessui/react";
import { GiHamburgerMenu } from "react-icons/Gi";

const HamburgerMenu: React.FC = () => {
  const [isSidebarVisible, setSidebarVisible] = useState(false);

  const handleCloseSidebar = () => {
    setSidebarVisible(false);
  };

  const handleOpenSidebar = () => {
    setSidebarVisible(true);
  };

  useEffect(() => {
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        handleCloseSidebar();
      }
    });

    return () => {
      document.removeEventListener("keydown", (event) => {
        if (event.key === "Escape") {
          handleCloseSidebar();
        }
      });
    };
  }, []);

  const navbarHeight: string = "52px";

  return (
    <div className="z-1">
      {/* Hamburger Icon */}
      <button onClick={handleOpenSidebar}>
        <GiHamburgerMenu className="text-white" size={24} />
      </button>

      {/* Sidebar */}
      <Transition.Root show={isSidebarVisible}>
        <Dialog
          as="div"
          className="fixed overflow-hidden z-1"
          style={{ height: `calc(100% - ${navbarHeight})`, top: navbarHeight }}
          onClose={handleCloseSidebar}
        >
          <div className="absolute overflow-hidden" style={{ height: "100%" }}>
            <Dialog.Overlay
              className="fixed inset-0 bg-black bg-opacity-75 transition-opacity"
              style={{
                height: `calc(100% - ${navbarHeight})`,
                top: navbarHeight,
              }}
            />
            <div className="fixed inset-y-0 right-0 max-w-full flex pl-10">
              <Transition.Child
                as={Fragment}
                enter="transform transition ease-in-out duration-200"
                enterFrom="translate-x-full"
                enterTo="translate-x-0"
                leave="transform transition ease-in-out duration-200"
                leaveFrom="translate-x-0"
                leaveTo="translate-x-full"
              >
                <div className="max-w-md">
                  <Dialog.Panel
                    className="bg-gray-800 h-full"
                    style={{ marginTop: navbarHeight }}
                  >
                    <div className="px-4 py-6">
                      <button
                        type="button"
                        className="absolute top-0 right-0 -mt-8 -mr-8 text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
                        onClick={handleCloseSidebar}
                      >
                        <span className="sr-only">Close panel</span>
                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                      </button>

                      <h2 className="text-lg font-semibold leading-6 text-white">
                        Sidebar Title
                      </h2>
                    </div>
                    <div className="px-4 sm:px-6 overflow-y-scroll">
                      {/* Your content goes here */}
                    </div>
                  </Dialog.Panel>
                </div>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition.Root>
    </div>
  );
};

export default HamburgerMenu;

This is my code right now

As youy can see here i already set

<Dialog.Panel
                    className="bg-gray-800 h-full"
                    style={{ marginTop: navbarHeight }}
                  >

And

 <Dialog.Overlay
              className="fixed inset-0 bg-black bg-opacity-75 transition-opacity"
              style={{
                height: `calc(100% - ${navbarHeight})`,
                top: navbarHeight,
              }}
            />

I don';t understand what's wrong now