chore: update docs

Multiform-Validator · May 29, 2024 · c5773af · c5773af
1 parent cbb4774
commit c5773af
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 61 deletions.
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -30,7 +30,7 @@ export default function Home() {
 				</Link>{" "}
 				{t("ForMoreInfo").toLowerCase()}
 			</p>
-			<div className="my-7 flex w-48 flex-col items-center justify-center gap-6 self-center">
+			<div className="my-7 flex w-52 flex-col items-center justify-center gap-6 self-center sm:w-56">
 				<Link
 					className="text-blue-500 hover:underline"
 					href="https://github.com/gabriel-logan/multiform-validator"

diff --git a/docs/src/components/Footer/index.tsx b/docs/src/components/Footer/index.tsx
@@ -2,13 +2,16 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import { FaYoutube, FaInstagram, FaGithub, FaLinkedin } from "react-icons/fa";
 
 import { playfair, sofiaPro } from "@/fonts";
 
 import translation, { getBrowserLang } from "../Internationalization";
 
 export default function Footer() {
+	const [isClient, setIsClient] = useState(false);
+
 	const browserLang = getBrowserLang();
 
 	const t = (text: string) =>
@@ -20,6 +23,9 @@ export default function Footer() {
 		path.startsWith("/documentation/js") ||
 		path.startsWith("/documentation/py");
 
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
 	return (
 		<>
 			{!show && (
@@ -48,46 +54,48 @@ export default function Footer() {
 								href="/"
 								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
-								{t("Home")}
+								{isClient ? t("Home") : "Home"}
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/documentation/"
 								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
-								{t("Services")}
+								{isClient ? t("Services") : "Services"}
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/about/"
 								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
-								{t("About")}
+								{isClient ? t("About") : "About"}
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/terms/"
 								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
-								{t("Terms")}
+								{isClient ? t("Terms") : "Terms"}
 							</Link>
 						</li>
 						<li className="mx-2 inline-block px-2">
 							<Link
 								href="/privacity-polices/"
 								className={`text-inherit text-white opacity-80 hover:underline hover:opacity-100 ${playfair.className}`}
 							>
-								{t("Privacy Policy")}
+								{isClient ? t("Privacy Policy") : "Privacy Policy"}
 							</Link>
 						</li>
 					</ul>
 					<p
 						className={`mb-0 mt-8 text-center text-sm text-gray-400 ${sofiaPro.className}`}
 					>
-						{t("CopyRightMsg")}
+						{isClient
+							? t("CopyRightMsg")
+							: "Multiform Validator © 2023 - Gabriel Logan"}
 					</p>
 				</footer>
 			)}

diff --git a/docs/src/components/Header/index.tsx b/docs/src/components/Header/index.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import { FaCaretDown } from "react-icons/fa";
 
@@ -11,6 +11,8 @@ import { roboto700 } from "@/fonts";
 import translation, { getBrowserLang } from "../Internationalization";
 
 export default function Header() {
+	const [isClient, setIsClient] = useState(false);
+
 	const browserLang = getBrowserLang();
 
 	const t = (text: string) =>
@@ -24,13 +26,16 @@ export default function Header() {
 		path.startsWith("/documentation/js") ||
 		path.startsWith("/documentation/py");
 
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
 	return (
 		<>
 			{!show && (
 				<>
 					<header className="flex h-32 items-center justify-around bg-header md:h-28">
 						<h1 className={`w-44 text-lg text-white ${roboto700.className}`}>
-							{t("header_title")}
+							{isClient ? t("header_title") : "Multiform Validator"}
 						</h1>
 						<div className="flex md:hidden">
 							<button onClick={() => setIsMenuOpen(!isMenuOpen)}>
@@ -48,10 +53,10 @@ export default function Header() {
 										onClick={() => setIsSubMenuOpen(!isSubMenuOpen)}
 										className="flex items-center gap-1 text-white"
 									>
-										{t("header_home")}
+										{isClient ? t("header_home") : "Home"}
 										<FaCaretDown size={12} />
 									</button>
-									{isSubMenuOpen && (
+									{isSubMenuOpen && isClient && (
 										<div className="absolute left-0 top-full z-10 flex w-52 flex-col gap-2 rounded border-x border-y border-black bg-dropdownMenu p-3">
 											<Link
 												onClick={() => setIsSubMenuOpen(false)}
@@ -84,68 +89,70 @@ export default function Header() {
 							</li>
 							<li className="nav-item pl-md-0 ml-md-4 ml-0 pl-4">
 								<Link className="nav-link text-white" href="/documentation/">
-									{t("header_docs")}
+									{isClient ? t("header_docs") : "Docs"}
 								</Link>
 							</li>
 							<li className="nav-item pl-md-0 ml-md-4 ml-0 pl-4">
 								<Link className="nav-link text-white" href="/info/">
-									{t("header_info")}
+									{isClient ? t("header_info") : "Info"}
 								</Link>
 							</li>
 						</ul>
 					</header>
 					<div
 						className={`flex justify-around bg-header md:hidden ${!isMenuOpen ? "h-0" : "h-32"} transition-all`}
 					>
-						<ul className={`w-44 ${!isMenuOpen ? "hidden" : "block"}`}>
-							<div className="relative mb-2">
-								<li
-									onClick={() => setIsSubMenuOpen(!isSubMenuOpen)}
-									className="ml-4 cursor-pointer list-disc text-white"
-								>
-									{t("header_home")}
+						{isClient && (
+							<ul className={`w-44 ${!isMenuOpen ? "hidden" : "block"}`}>
+								<div className="relative mb-2">
+									<li
+										onClick={() => setIsSubMenuOpen(!isSubMenuOpen)}
+										className="ml-4 cursor-pointer list-disc text-white"
+									>
+										{t("header_home")}
+									</li>
+									{isSubMenuOpen && (
+										<div className="absolute left-0 top-full z-10 flex w-52 flex-col gap-2 rounded border-x border-y border-black bg-dropdownMenu p-3">
+											<Link
+												onClick={() => setIsSubMenuOpen(false)}
+												className="text-blue-500"
+												href={path === "/" ? "#" : "/"}
+											>
+												{path === "/"
+													? t("header_already_here")
+													: t("header_go_home")}
+											</Link>
+											<Link
+												onClick={() => setIsSubMenuOpen(false)}
+												className="ml-5 text-white"
+												target="_blank"
+												href="https://www.buymeacoffee.com/gabriellogan"
+											>
+												{t("header_buy_coffee")}
+											</Link>
+											<Link
+												onClick={() => setIsSubMenuOpen(false)}
+												className="ml-5 text-white"
+												target="_blank"
+												href="https://github.com/gabriel-logan/multiform-validator#readme"
+											>
+												{t("header_github")}
+											</Link>
+										</div>
+									)}
+								</div>
+								<li className="mb-2 ml-4 cursor-pointer list-disc text-white">
+									<Link className="nav-link text-white" href="/documentation/">
+										{t("header_docs")}
+									</Link>
 								</li>
-								{isSubMenuOpen && (
-									<div className="absolute left-0 top-full z-10 flex w-52 flex-col gap-2 rounded border-x border-y border-black bg-dropdownMenu p-3">
-										<Link
-											onClick={() => setIsSubMenuOpen(false)}
-											className="text-blue-500"
-											href={path === "/" ? "#" : "/"}
-										>
-											{path === "/"
-												? t("header_already_here")
-												: t("header_go_home")}
-										</Link>
-										<Link
-											onClick={() => setIsSubMenuOpen(false)}
-											className="ml-5 text-white"
-											target="_blank"
-											href="https://www.buymeacoffee.com/gabriellogan"
-										>
-											{t("header_buy_coffee")}
-										</Link>
-										<Link
-											onClick={() => setIsSubMenuOpen(false)}
-											className="ml-5 text-white"
-											target="_blank"
-											href="https://github.com/gabriel-logan/multiform-validator#readme"
-										>
-											{t("header_github")}
-										</Link>
-									</div>
-								)}
-							</div>
-							<li className="mb-2 ml-4 cursor-pointer list-disc text-white">
-								<Link className="nav-link text-white" href="/documentation/">
-									{t("header_docs")}
-								</Link>
-							</li>
-							<li className="mb-2 ml-4 cursor-pointer list-disc text-white">
-								<Link className="nav-link text-white" href="/info/">
-									{t("header_info")}
-								</Link>
-							</li>
-						</ul>
+								<li className="mb-2 ml-4 cursor-pointer list-disc text-white">
+									<Link className="nav-link text-white" href="/info/">
+										{t("header_info")}
+									</Link>
+								</li>
+							</ul>
+						)}
 						<div className="invisible">
 							<AiOutlineClose size={24} />
 						</div>