<div class="text-center"> 

<div> 

<p> Hello World </p>

</div>

<p> This is just a test </p>

</div>

const [menus, setMenus] = useState([

    {

      id: 1,

      name: "Fashion",

      submenu: [

        {

          id: 121,

          name: "New Arrivals",

          submenu: [

            { id: 222, name: "Watches", submenu: null },

            { id: 223, name: "Shoes", submenu: null },

            { id: 224, name: "Bags", submenu: null },

            { id: 225, name: "Accessories", submenu: null },

            { id: 226, name: "Jwellary & Watches", submenu: null },

          ],

        },

        {

          id: 122,

          name: "Best Seller",

          submenu: [

            { id: 227, name: "Watches", submenu: null },

            { id: 228, name: "Shoes", submenu: null },

            { id: 229, name: "Bags", submenu: null },

            { id: 230, name: "Accessories", submenu: null },

            { id: 231, name: "Jwellary & Watches", submenu: null },

          ],

        },

        { id: 123, name: "Trending", submenu: null },

        { id: 124, name: "Clothing", submenu: null },

        { id: 125, name: "Shoes", submenu: null },

        { id: 126, name: "Bags", submenu: null },

        { id: 127, name: "Accessories", submenu: null },

        { id: 128, name: "Jwellary & Watches", submenu: null },

      ],

    },

    {

      id: 2,

      name: "Home & Garden",

      submenu: [

        { id: 231, name: "New Arrivals", submenu: null },

        { id: 232, name: "Best Seller", submenu: null },

        { id: 233, name: "Trending", submenu: null },

        { id: 234, name: "Furniture", submenu: null },

        { id: 235, name: "Decor", submenu: null },

        { id: 236, name: "Kitchenware", submenu: null },

        { id: 237, name: "Gardening", submenu: null },

        { id: 238, name: "Lighting", submenu: null },

      ],

    },

    {

      id: 3,

      name: "Electronics",

      submenu: [

        { id: 341, name: "Smartphones", submenu: null },

        { id: 342, name: "Laptops", submenu: null },

        { id: 343, name: "Tablets", submenu: null },

        { id: 344, name: "Accessories", submenu: null },

        { id: 345, name: "Cameras", submenu: null },

        { id: 346, name: "Audio", submenu: null },

        { id: 347, name: "Gaming", submenu: null },

        { id: 348, name: "Smart Home", submenu: null },

      ],

    },

    {

      id: 4,

      name: "Furniture",

      submenu: [

        { id: 451, name: "Living Room", submenu: null },

        { id: 452, name: "Bedroom", submenu: null },

        { id: 453, name: "Dining Room", submenu: null },

        { id: 454, name: "Office", submenu: null },

        { id: 455, name: "Outdoor", submenu: null },

      ],

    },

    {

      id: 5,

      name: "Health & Beauty",

      submenu: [

        { id: 561, name: "Skincare", submenu: null },

        { id: 562, name: "Makeup", submenu: null },

        { id: 563, name: "Hair Care", submenu: null },

        { id: 564, name: "Fragrances", submenu: null },

        { id: 565, name: "Personal Care", submenu: null },

        { id: 566, name: "Health & Wellness", submenu: null },

      ],

    },

    { id: 6, name: "Gift Ideas", submenu: null },

    { id: 7, name: "Toys & Games", submenu: null },

    { id: 8, name: "Cooking", submenu: null },

    { id: 9, name: "Smart Phones", submenu: null },

    { id: 10, name: "Cameras & Photo", submenu: null },

    { id: 11, name: "Accessories", submenu: null },

  ]);

​

​

// page.jsx 

​

 <main className="flex min-h-screen flex-col items-start justify-start p-24">

      <VerticalHoverDropdownMenu menus={menus} />

    </main>

​

​

// ======================  VerticalHoverDropdownMenu.js ===============================

"use client"

​

import React, { useState } from "react"

import { ChevronRight } from "lucide-react"

​

const MenuItem = ({ item, depth = 0 }) => {

  const [isHovered, setIsHovered] = useState(false)

​

  return (

    <li className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>

      <div className={`flex items-center justify-between p-2 hover:bg-gray-100 ${depth === 0 ? "font-semibold" : ""}`}>

        <span>{item.name}</span>

        {item.submenu && <ChevronRight className="h-4 w-4" />}

      </div>

      {item.submenu && (

        <ul

          className={`absolute top-0 left-full min-w-[200px] bg-white shadow-md transition-all duration-300 ease-in-out ${

            isHovered ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-2"

          }`}

          style={{

            visibility: isHovered ? "visible" : "hidden",

          }}

        >

          {item.submenu.map((subItem) => (

            <MenuItem key={subItem.id} item={subItem} depth={depth + 1} />

          ))}

        </ul>

      )}

    </li>

  )

}

​

const VerticalHoverDropdownMenu = ({ menus }) => {

  return (

    <nav className="bg-white shadow-md w-64">

      <ul className="py-2">

        {menus.map((item) => (

          <MenuItem key={item.id} item={item} />

        ))}

      </ul>

    </nav>

  )

}

​

export default VerticalHoverDropdownMenu

​

​

​