devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar synced for mobile and desktop

Browse Source
This commit is contained in:
Joao Ramos
2024-02-15 19:22:52 +00:00
parent b97f6d7b2e
commit a184166fac
1 changed files with 65 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/Navbar.tsx
View File

@@ -11,6 +11,16 @@ import { useRouter } from "next/navigation";
import translation from "@/translation/navbar.json";
import contacts from "@/contacts.json";
interface Item {
page: string;
key: string;
entries?: {
key: string;
label: string;
}[];
}
const items = [
{ page: "/", key: "home" },
{ page: "/services", key: "services" },
@@ -26,7 +36,7 @@ const items = [
label: data.label,
})),
},
];
] as Item[];
export default function Navbar({
currentPage,
@@ -36,6 +46,46 @@ export default function Navbar({
language: "en" | "ar";
}) {
const [isOpen, setIsOpen] = useState(false);
const renderItem = (item: Item, className: string) => {
if (item.entries) {
return (
<div
key={item.key}
className={clsx(
"group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer w-fit",
currentPage === item.page && "border-b-mti-purple-light border-b-2"
)}
>
<span className="py-2">
{translation[item.key as keyof typeof translation][language]}
</span>
<ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
{item.entries?.map((innerEntry) => (
<li
key={innerEntry.key}
className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
>
<Link href={`${item.page}/${innerEntry.key}`} className="w-full h-full flex items-center">
{innerEntry.label}
</Link>
</li>
))}
</ul>
</div>
);
}
return (
<Link
key={item.key}
href={language === "ar" ? `/${language}${item.page}` : item.page}
className={className}
>
{(translation as any)[item.key][language]}
</Link>
);
};
return (
<>
<header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
@@ -49,45 +99,13 @@ export default function Navbar({
</Link>
<div className={clsx("flex w-fit items-center gap-8")}>
{items.map((item) =>
item.entries ? (
<div
key={item.key}
className={clsx(
"group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer",
currentPage === item.page &&
"border-b-mti-purple-light border-b-2"
)}
>
<span className="py-2">
{translation[item.key as keyof typeof translation][language]}
</span>
<ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
{item.entries?.map((innerEntry) => (
<li
key={innerEntry.key}
className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
>
<Link href={`${item.page}/${innerEntry.key}`}>
{innerEntry.label}
</Link>
</li>
))}
</ul>
</div>
) : (
<Link
key={item.key}
href={
language === "ar" ? `/${language}${item.page}` : item.page
}
className={clsx(
"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
currentPage === item.page &&
"border-b-mti-purple-light border-b-2"
)}
>
{(translation as any)[item.key][language]}
</Link>
renderItem(
item,
clsx(
"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
currentPage === item.page &&
"border-b-mti-purple-light border-b-2"
)
)
)}
</div>
@@ -198,23 +216,16 @@ export default function Navbar({
language === "ar" && "items-end"
)}
>
{items.map((item) => (
<Link
key={item.key}
href={
language === "ar"
? `/${language}${item.page}`
: item.page
}
className={clsx(
{items.map((item) =>
renderItem(
item,
clsx(
"w-fit transition duration-300 ease-in-out",
currentPage === item.page &&
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
)}
>
{(translation as any)[item.key][language]}
</Link>
))}
)
)
)}
<Link
href="https://platform.encoach.com/register"
className="w-fit transition duration-300 ease-in-out"