- Started working on the about page;
- Updated the translation; - Changed the language switch from flags to text
This commit is contained in:
Tiago Ribeiro
@@ -10,6 +10,14 @@ import {Dialog, Menu, Transition} from "@headlessui/react";
|
||||
import {useRouter} from "next/navigation";
|
||||
import translation from "@/translation/navbar.json";
|
||||
|
||||
const items = [
|
||||
{page: "/", key: "home"},
|
||||
{page: "/services", key: "services"},
|
||||
{page: "/about", key: "about"},
|
||||
{page: "/history", key: "history"},
|
||||
{page: "/contact", key: "contact"},
|
||||
];
|
||||
|
||||
export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
@@ -17,49 +25,20 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
|
||||
<>
|
||||
<header className="w-full px-11 py-3 md:flex justify-between items-center -md:hidden shadow-sm">
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
|
||||
</Link>
|
||||
<div className="flex gap-8 items-center w-fit">
|
||||
<Link
|
||||
href="/"
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
{translation.home[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/services" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
{translation.services[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/about" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
{translation.about[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/history" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
{translation.history[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/contact" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
{translation.contact[language]}
|
||||
</Link>
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={language === "ar" ? `/${language}${item.page}` : item.page}
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === item.page && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
{(translation as any)[item.key][language]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center w-fit gap-4">
|
||||
<Link
|
||||
@@ -68,29 +47,23 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="/join"
|
||||
href={language === "ar" ? `/${language}/join` : "join"}
|
||||
className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl">
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-8 h-8 relative">
|
||||
{language === "ar" ? (
|
||||
<Link href={`${currentPage}`}>
|
||||
<img
|
||||
src="uk-flag.png"
|
||||
alt="English"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/ar${currentPage}`}>
|
||||
<img
|
||||
src="oman-flag.jpg"
|
||||
alt="Arabic"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
|
||||
href={`${currentPage}`}>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
|
||||
href={`/ar${currentPage}`}>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -120,80 +93,42 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
|
||||
<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
|
||||
<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
|
||||
</Link>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
|
||||
{language === "ar" ? (
|
||||
<Link href={`${currentPage}`}>
|
||||
<img
|
||||
src="uk-flag.png"
|
||||
alt="English"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/ar${currentPage}`}>
|
||||
<img
|
||||
src="oman-flag.jpg"
|
||||
alt="Arabic"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
|
||||
href={`${currentPage}`}>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
|
||||
href={`/ar${currentPage}`}>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
|
||||
<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Title>
|
||||
<div className="flex flex-col gap-6 px-8 text-lg">
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={language === "ar" ? `/${language}${item.page}` : item.page}
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === item.page &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
{(translation as any)[item.key][language]}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
{translation.home[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/services" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
{translation.services[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/about" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
{translation.about[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/history" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
{translation.history[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/contact" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
{translation.contact[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="/join"
|
||||
href={language === "ar" ? `/${language}/join` : "join"}
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/join" &&
|
||||
@@ -217,25 +152,19 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
</Link>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
|
||||
{language === "ar" ? (
|
||||
<Link href={`${currentPage}`}>
|
||||
<img
|
||||
src="uk-flag.png"
|
||||
alt="English"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/ar${currentPage}`}>
|
||||
<img
|
||||
src="oman-flag.jpg"
|
||||
alt="Arabic"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
|
||||
href={`${currentPage}`}>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
|
||||
href={`/ar${currentPage}`}>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
|
||||
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user