Web uygulamalarında kullanıcı deneyimi çok önemlidir ve kullanıcılarla etkileşimli arayüz öğeleri bu deneyimi artırabilir. Bu gönderide, React kullanarak bir kullanıcı dropdown menüsü oluşturmayı ve bu menüyü yönetmek için useState, useRef ve useEffect hook'larını kullanmayı ele alacağız.
Kullanıcı Dropdown Menüsü Oluşturma

İlk adım olarak, userDropdown adında bir fonksiyon oluşturacağız. Bu fonksiyon, dropdown menüsünün durumunu ve açılma/kapanma işlemlerini yönetecek. İşte bu fonksiyonun kodu:

import { useState, useRef, useEffect } from "react";

const userDropdown = (): any => {
  const [options, setOptions] = useState(false);
  const optionsElement = useRef<HTMLDivElement>(null);

  const toggleDropdown = (): void => {
    setOptions(!options);
  };

  useEffect(() => {
    const handleClickOutside = (event: Event) => {
      if (
        optionsElement.current &&
        !optionsElement.current.contains(event.target as Node)
      ) {
        setOptions(false);
      }
    };

    if (options) {
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }
  }, [options]);

  return { toggleDropdown, options, optionsElement };
};

export default userDropdown;

Yukarıdaki kod, dropdown menüsünün durumunu ve açılma/kapanma işlemlerini yönetmek için gerekli olan hook'ları içerir.

Navbar Bileşeni ve Kullanıcı Dropdown Menüsü

Şimdi, NavbarComp adında bir bileşen oluşturacağız ve bu bileşen içinde kullanıcı dropdown menüsünü kullanacağız. İşte bu bileşenin kodu:

import React from "react";
import { Link } from "react-router-dom";
import userDropdown from "../composables/user-dropdown";
import useAuthStore from "../stores/auth-store";
import ThemeMode from "../components/theme/theme-mode";

function NavbarComp() {
  const { toggleDropdown, options, optionsElement } = userDropdown();

  const logout = useAuthStore((state) => state.logout);

  return (
    <>
      <header className="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 body-font">
        <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
          {/* Kullanıcı dropdown menüsü */}
           {/* çalışması için dropdown button ve elementleri aynı div içinde 
            ref ve optionElement ile sarılmalı */}
          <div
            ref={optionsElement} 
            className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse relative"
          >
            <button
              type="button"
              className="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
              id="user-menu-button"
              aria-expanded={options ? "true" : "false"}
              onClick={toggleDropdown}
            >
              <span className="sr-only">Open user menu</span>
              {/* Kullanıcı fotoğrafı */}
              <img
                className="w-8 h-8 rounded-full"
                src="https://avatar.iran.liara.run/public/2"
                alt="user photo"
              />
            </button>
            {/* Dropdown menü içeriği */}
            {options && (
              <div
                className="z-50 top-5 right-0 absolute my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
                id="user-dropdown"
              >
                {/* Kullanıcı bilgileri */}
                <div className="px-4 py-3">
                  <span className="block text-sm text-gray-900 dark:text-white">
                    Bonnie Green
                  </span>
                  <span className="block text-sm text-gray-500 truncate dark:text-gray-400">
                    [email protected]
                  </span>
                </div>
                {/* Dropdown menü seçenekleri */}
                <ul className="py-2" aria-labelledby="user-menu-button">
                  <li>
                    <Link
                      to="#"
                      className="block px-4 py-2 mx-2 rounded-lg text-sm text-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Dashboard
                    </Link>
                  </li>
                </ul>
              </div>
            )}
          </div>
          <ThemeMode />
        </div>
      </header>
    </>
  );
}

export default NavbarComp;

Yukarıdaki kodda, NavbarComp bileşeni oluşturulmuş ve kullanıcı dropdown menüsü kullanılmıştır. Kullanıcı dropdown menüsü, userDropdown fonksiyonu ile yönetilir ve açılma/kapanma işlemleri toggleDropdown fonksiyonu ile sağlanır.

Sonuç

Bu gönderide, React kullanarak kullanıcı dropdown menüsü oluşturmayı ve bu menüyü yönetmek için useState, useRef ve useEffect hook'larını kullanmayı öğrendik. Kullanıcıların etkileşimli arayüz öğeleriyle etkileşimde bulunmasını sağlayan bu tür bileşenler, web uygulamalarının kullanıcı deneyimini artırır.