Untitled
unknown
plain_text
2 years ago
20 kB
7
Indexable
"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((nav, index) => {
return (
<div className="static" key={index}>
<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 peer/tes px-3 py-2 focus:ring-gray-700 focus:ring-2">
<span className="font-medium">{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="bg-gray-700 hidden peer-focus/tes:block translate-y-4 rounded-md w-36 text-white mb-3">
<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
id="mega-menu-full-dropdown"
className="hidden mt-4 shadow-sm bg-gray-700 fixed w-full top-50 left-0 peer-focus/tes:block h-screen overflow-y-scroll overflow-x-auto"
>
<div className="grid max-w-screen-xl px-4 py-5 mx-auto text-white sm:grid-cols-2 md:px-6">
{nav.megamenu.map((submenu, index) => {
return (
<div
className="flex flex-col w-full gap-1"
key={index}
>
<div className="border-b-2 pt-5 pb-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="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">
<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>
);
}
Editor is loading...