Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
15 kB
0
Indexable
Never
"use client";
import logo from "@/public/ptdi.png";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";

export default function Navbar() {
  const NavMenu = [
    {
      menu: "Customer",
      megamenu: [],
      submenu: [
        {
          name: "Dashboard",
          link: "#",
        },
        {
          name: "Settings",
          link: "#",
        },
      ],
    },
    {
      menu: "Aircraft",
      megamenu: [],
      submenu: [
        {
          name: "Dashboard",
          link: "#",
        },
        {
          name: "Settings",
          link: "#",
        },
      ],
    },
    {
      menu: "Services",
      megamenu: [
        {
          title: "Technical Support",
          submenu: [
            {
              name: "ADAM",
              link: "#",
            },
            {
              name: "RAM",
              link: "#",
            },
            {
              name: "Warranty Terms",
              link: "#",
            },
          ],
        },
        {
          title: "Manuals",
          submenu: [
            {
              name: "Aircraft Manuals",
              subsubmenu: [
                {
                  name: "Load Index",
                  link: "#",
                },
                {
                  name: "SB Index",
                  link: "#",
                },
              ],
            },
            {
              name: "IETM",
              link: "#",
            },
          ],
        },

        {
          title: "Spare Parts",
          submenu: [
            {
              name: "Stock",
              link: "#",
            },
            {
              name: "How To Order",
              link: "#",
            },
          ],
        },
        {
          title: "Training",
          submenu: [
            {
              name: "N219 Training",
              link: "#",
            },
            {
              name: "CN235 Training",
              link: "#",
            },
            {
              name: "NC212i Training",
              link: "#",
            },
          ],
        },
        {
          title: "MRO",

          submenu: [
            {
              name: "Aircraft",
              subsubmenu: [
                {
                  name: "Maintenance Capabilities",
                  link: "#",
                },
                {
                  name: "Refurbishment Interior & Modification",
                  link: "#",
                },
                {
                  name: "Repainting",
                  link: "#",
                },
              ],
            },
            {
              name: "Engine",
              link: "#",
            },
            {
              name: "Component",
              link: "#",
            },
            {
              name: "Non-Destructive Test",
              link: "#",
            },
            {
              name: "Modification",
              link: "#",
            },
          ],
        },
      ],
      submenu: [],
    },
    {
      menu: "Scheduled Maintenance Level",
      megamenu: [],
      submenu: [],
    },
    {
      menu: "Certificates",
      megamenu: [],
      submenu: [],
    },
  ];

  const [isShow, setIsShow] = useState(false);

  const Sidebar = () => {
    return (
      <div
        className={`absolute h-screen bg-gray-800 top-0 p-5 right-0 w-64 ${
          isShow ? "block" : "hidden"
        }`}
      >
        <div className="flex flex-row items-center justify-between">
          <p className="text-white text-xl">Menu</p>
          <button
            className="p-1 bg-gray-800 rounded-md focus:outline-none focus:ring-2 text-white hover:bg-gray-700 focus:ring-gray-600 peer/sidebar"
            onClick={() => setIsShow(false)}
          >
            <svg
              fill="none"
              stroke="currentColor"
              strokeWidth={1.5}
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              className="h-8 w-8"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <div className="flex flex-col gap-3 mt-5">
          <div className="flex flex-col gap-3 lg:hidden">
            {NavMenu.map((menu, index) => {
              return (
                <button
                  className="w-full rounded-md bg-gray-800 hover:bg-gray-700 flex flex-row text-white p-2 gap-3 group text-left"
                  key={index}
                >
                  <span>{menu.menu}</span>
                </button>
              );
            })}
          </div>
          <button className="w-full rounded-md bg-gray-800 hover:bg-gray-700 flex flex-row text-white p-2 gap-3 group">
            <svg
              fill="none"
              stroke="currentColor"
              strokeWidth={1.5}
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              className="h-5 w-5"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
              />
            </svg>
            <span>Gallery</span>
          </button>
          <button className="w-full rounded-md bg-gray-800 hover:bg-gray-700 flex flex-row text-white p-2 gap-3 group">
            <svg
              fill="none"
              stroke="currentColor"
              strokeWidth={1.5}
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              className="h-5 w-5"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
              />
            </svg>
            <span>Contact Us</span>
          </button>
          <button className="w-full rounded-md bg-gray-800 hover:bg-gray-700 flex flex-row text-white p-2 gap-3 group">
            <svg
              fill="none"
              stroke="currentColor"
              strokeWidth={1.5}
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
              />
            </svg>
            <span>Login</span>
          </button>
        </div>
      </div>
    );
  };

  return (
    <div className="relative">
      {/* <Navbar /> */}
      <div className="bg-gray-900">
        <div className="flex flex-row justify-between items-center max-w-screen-xl mx-auto h-16 px-3">
          <div className="">
            <Image src={logo.src} alt="logo-pt" height={300} width={300} />
          </div>
          <div className="flex gap-8">
            <div className="text-white flex-row gap-1 hidden lg:flex">
              {NavMenu.map((nav, index) => {
                return (
                  <div className="static" key={index}>
                    <button className="flex items-center justify-center gap-1 peer/tes hover:bg-gray-800 px-3 py-2 rounded-md focus:ring-gray-700 focus:ring-2">
                      <span className="font-medium truncate">{nav.menu}</span>
                      {nav.submenu.length !== 0 || nav.megamenu.length !== 0 ? (
                        <svg
                          fill="none"
                          stroke="currentColor"
                          strokeWidth={1.5}
                          viewBox="0 0 24 24"
                          xmlns="http://www.w3.org/2000/svg"
                          aria-hidden="true"
                          className="h-4 w-4 stroke-[3]"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                          />
                        </svg>
                      ) : (
                        <></>
                      )}
                    </button>
                    {nav.submenu.length !== 0 ? (
                      <div className="absolute bg-gray-800 hidden peer-focus/tes:block translate-y-4 rounded-md w-36">
                        <div className="flex flex-col py-3">
                          {nav.submenu.map((submenu, index) => {
                            return (
                              <Link
                                href={submenu.link}
                                className="py-1 px-2 hover:bg-gray-700"
                                key={index}
                              >
                                {submenu.name}
                              </Link>
                            );
                          })}
                        </div>
                      </div>
                    ) : (
                      <></>
                    )}
                    {nav.megamenu.length !== 0 ? (
                      <div className="absolute bg-opacity-90 bg-gray-800 hidden peer-focus/tes:block translate-y-4 max-w-screen-xl mx-auto inset-x-0 rounded-md ">
                        <div className="flex flex-row py-3 items-start justify-around p-5 gap-3">
                          {nav.megamenu.map((submenu, index) => {
                            return (
                              <div
                                className="flex flex-col w-full gap-1"
                                key={index}
                              >
                                <div className="border-b-2 py-1">
                                  <p className="text-xl font-semibold">{submenu.title}</p>
                                </div>
                                {submenu.submenu.map((menu, index) => {
                                  return (
                                    <div key={index}>
                                      <button className="p-1 hover:bg-gray-700 rounded-md flex truncate">
                                        {menu.name}
                                      </button>
                                      {menu.subsubmenu &&
                                        menu.subsubmenu.length > 0 && (
                                          <div className="ml-4">
                                            {menu.subsubmenu.map(
                                              (subsubmenu, subIndex) => (
                                                <button
                                                  className="p-1 hover:bg-gray-700 rounded-md flex truncate"
                                                  key={subIndex}
                                                >
                                                  <svg
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="1.5"
                                                    viewBox="0 0 24 24"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    aria-hidden="true"
                                                    className="w-4 h-4 mr-2" // You can adjust the width and height of the SVG icon using these classes
                                                  >
                                                    <path d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                  </svg>
                                                  {subsubmenu.name}
                                                </button>
                                              )
                                            )}
                                          </div>
                                        )}
                                    </div>
                                  );
                                })}
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    ) : (
                      <></>
                    )}
                  </div>
                );
              })}
            </div>
            <button
              className="p-1 bg-gray-900 rounded-md focus:outline-none focus:ring-2 text-white hover:bg-gray-800 focus:ring-gray-700 peer/sidebar"
              onClick={() => setIsShow(!isShow)}
            >
              <svg
                fill="none"
                stroke="currentColor"
                strokeWidth={1.5}
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
                className="h-8 w-8"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                />
              </svg>
            </button>
            <Sidebar />
          </div>
        </div>
      </div>
    </div>
  );
}