Navigation.jsx needed for eccomerce website

import { Fragment, useEffect, useState } from "react"; import { Dialog, Popover, Tab, Transition } from "@headlessui/react"; import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon, } from "@heroicons/react/24/outline";

import { Avatar, Button, Menu, MenuItem } from "@mui/material"; import { deepPurple } from "@mui/material/colors"; import {navigation} from './dataNavigation'; import { useNavigate } from 'react-router-dom'; function classNames(...classes) { return classes.filter(Boolean).join(" "); }

export default function Navigation() { const [open, setOpen] = useState(false);

const navigate=useNavigate();

const [openAuthModal, setOpenAuthModal] = useState(false); const [anchorEl, setAnchorEl] = useState(null); const openUserMenu = Boolean(anchorEl); const jwt = localStorage.getItem("jwt");

const handleUserClick = (event) => { setAnchorEl(event.currentTarget); }; const handleCloseUserMenu = (event) => { setAnchorEl(null); };

const handleOpen = () => { setOpenAuthModal(true); }; const handleClose = () => { setOpenAuthModal(false); };

const handleCategoryClick = (category, section, item, close) => { navigate(/${category.id}/${section.id}/${item.id}); close(); };

return (

{/* Mobile menu */}

{/* Links */}

{navigation.categories.map((category) => ( classNames( selected ? "border-indigo-600 text-indigo-600" : "border-transparent text-gray-900", "flex-1 whitespace-nowrap border-b-2 px-1 py-4 text-base font-medium border-none" ) } > {category.name} ))}

{navigation.categories.map((category) => (

{category.featured.map((item) => (

))}

{category.sections.map((section) => (

{section.name}

{/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}

{"item.name"}

))} ))}

{navigation.pages.map((page) => (

{page.name}

))}

CAD , change currency

    </Dialog>
  </Transition.Root>

  <header className="relative bg-white">
    <p className="flex h-10 items-center justify-center bg-indigo-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">
      Get free delivery on orders over $100
    </p>

    <nav aria-label="Top" className="mx-auto">
      <div className="border-b border-gray-200">
        <div className="flex h-16 items-center px-11">
          <button
            type="button"
            className="rounded-md bg-white p-2 text-gray-400 lg:hidden"
            onClick={() => setOpen(true)}
          >
            <span className="sr-only">Open menu</span>
            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
          </button>

          {/* Logo */}
          <div className="ml-4 flex lg:ml-0">

              <span className="sr-only">Your Company</span>
              <img
                src="https://res.cloudinary.com/ddkso1wxi/image/upload/v1675919455/Logo/Copy_of_Zosh_Academy_nblljp.png"
                alt="Shopwithzosh"
                className="h-8 w-8 mr-2"
              />

          </div>

          {/* Flyout menus */}
          <Popover.Group className="hidden lg:ml-8 lg:block lg:self-stretch z-10">
            <div className="flex h-full space-x-8">
              {navigation.categories.map((category) => (
                <Popover key={category.name} className="flex">
                  {({ open, close }) => (
                    <>
                      <div className="relative flex">
                        <Popover.Button
                          className={classNames(
                            open
                              ? "border-indigo-600 text-indigo-600"
                              : "border-transparent text-gray-700 hover:text-gray-800",
                            "relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out"
                          )}
                        >
                          {category.name}
                        </Popover.Button>
                      </div>

                      <Transition
                        as={Fragment}
                        enter="transition ease-out duration-200"
                        enterFrom="opacity-0"
                        enterTo="opacity-100"
                        leave="transition ease-in duration-150"
                        leaveFrom="opacity-100"
                        leaveTo="opacity-0"
                      >
                        <Popover.Panel className="absolute inset-x-0 top-full text-sm text-gray-500">
                          {/* Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow */}
                          <div
                            className="absolute inset-0 top-1/2 bg-white shadow"
                            aria-hidden="true"
                          />

                          <div className="relative bg-white">
                            <div className="mx-auto max-w-7xl px-8">
                              <div className="grid grid-cols-2 gap-x-8 gap-y-10 py-16">
                                <div className="col-start-2 grid grid-cols-2 gap-x-8">
                                  {category.featured.map((item) => (
                                    <div
                                      key={item.name}
                                      className="group relative text-base sm:text-sm"
                                    >
                                      <div className="aspect-h-1 aspect-w-1 overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">
                                        <img
                                          src={item.imageSrc}
                                          alt={item.imageAlt}
                                          className="object-cover object-center"
                                        />
                                      </div>
                                      <a
                                        href={item.href}
                                        className="mt-6 block font-medium text-gray-900"
                                      >
                                        <span
                                          className="absolute inset-0 z-10"
                                          aria-hidden="true"
                                        />
                                        {item.name}
                                      </a>
                                      <p
                                        aria-hidden="true"
                                        className="mt-1"
                                      >
                                        Shop now
                                      </p>
                                    </div>
                                  ))}
                                </div>
                                <div className="row-start-1 grid grid-cols-3 gap-x-8 gap-y-10 text-sm">
                                  {category.sections.map((section) => (
                                    <div key={section.name}>
                                      <p
                                        id={`${section.name}-heading`}
                                        className="font-medium text-gray-900"
                                      >
                                        {section.name}
                                      </p>
                                      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
                                      <ul
                                        role="list"
                                        aria-labelledby={`${section.name}-heading`}
                                        className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
                                      >
                                        {section.items.map((item) => (
                                          <li
                                            key={item.name}
                                            className="flex"
                                          >
                                            <p
                                              onClick={() =>
                                                handleCategoryClick(
                                                  category,
                                                  section,
                                                  item,
                                                  close
                                                )
                                              }
                                              className="cursor-pointer hover:text-gray-800"
                                            >
                                              {item.name}
                                            </p>
                                          </li>
                                        ))}
                                      </ul>
                                    </div>
                                  ))}
                                </div>
                              </div>
                            </div>
                          </div>
                        </Popover.Panel>
                      </Transition>
                    </>
                  )}
                </Popover>
              ))}

              {navigation.pages.map((page) => (
                <a
                  key={page.name}
                  href={page.href}
                  className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
                >
                  {page.name}
                </a>
              ))}
            </div>
          </Popover.Group>

          <div className="ml-auto flex items-center">
            <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
              {true ? (
                <div className="mt-6">
                  <Avatar
                    className="text-white"
                     onClick={handleUserClick}
                    aria-controls={open ? "basic-menu" : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? "true" : undefined}
                    //  onClick={handleUserClick}
                    sx={{
                      bgcolor: deepPurple[500],
                      color: "white",
                      cursor: "pointer",
                    }}
                  >
                    R
                  </Avatar>
                  <Button
                    id="basic-button"
                    aria-controls={open ? "basic-menu" : undefined}
                    aria-haspopup="true"
                    aria-expanded={open ? "true" : undefined}
                    onClick={handleUserClick}
                  >
                    {/* Dashboard */}
                  </Button>
                  <Menu
                    id="basic-menu"
                    anchorEl={anchorEl}
                    open={openUserMenu}
                     onClose={handleCloseUserMenu}
                    MenuListProps={{
                      "aria-labelledby": "basic-button",
                    }}
                  >
                    <MenuItem  onClick={handleCloseUserMenu}>
                      Profile
                    </MenuItem>
                    <MenuItem onClick={()=>navigate("/account/order")}>
                      {/* {true?.role === "ROLE_ADMIN"
                        ? "Admin Dashboard"
                        : "My Orders"} */}
                        My Orders
                    </MenuItem>
                    <MenuItem >Logout</MenuItem>
                  </Menu>
                </div>
              ) : (
                <Button
                  onClick={handleOpen}
                  className="text-sm font-medium text-gray-700 hover:text-gray-800"
                >
                  Signin
                </Button>
              )}
            </div>

            {/* Search */}
            <div className="flex items-center lg:ml-6">

              <p  className="p-2 text-gray-400 hover:text-gray-500">
                <span className="sr-only">Search</span>

                <MagnifyingGlassIcon
                  className="h-6 w-6"
                  aria-hidden="true"
                />
              </p>
            </div>

            {/* Cart */}
            <div className="ml-4 flow-root lg:ml-6">
              <Button

                className="group -m-2 flex items-center p-2"
              >
                <ShoppingBagIcon
                  className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
                  aria-hidden="true"
                />
                <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
                 2
                </span>
                <span className="sr-only">items in cart, view bag</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>

</div>

); }

tejasborse8114 commented 1 month ago