owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix layout issues & co-locate components (#46)

Browse Source 
* Fix layout issues & co-locate components

* Fix front page

* Fix centering
This commit is contained in:
Timothy Armes
2023-07-04 13:26:25 +02:00
committed by GitHub
parent a9822b65fe
commit 75a6c74306
26 changed files with 306 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/components/Navbar.tsx
+65
View File
@@ -0,0 +1,65 @@
import Link from "next-intl/link";
import { useTranslations } from "next-intl";
import ThemeSwitcher from "./ThemeSwitcher";
import Hamburger from "./Hamburger";
export default function Navbar() {
const t = useTranslations("Nav");
return (
<nav
className="relative mt-0 h-16 w-full overflow-x-clip border-b-[1px] bg-white px-5 dark:border-gray-700 dark:bg-gray-800"
data-test="navbar"
>
<div className="container mx-auto flex h-full items-center">
<div className="flex w-full justify-center font-extrabold md:w-1/2 md:justify-start">
<Link
className="text-gray-900 no-underline hover:no-underline dark:text-white"
href="/"
>
<span className="text-2xl">{t("title")}</span>
</Link>
</div>
<div className="pb-2 md:hidden" data-test="mobile-menu">
<Hamburger />
</div>
<div
className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
data-test="desktop-menu"
>
<ul className="list-reset flex h-full flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
<li className="mr-10 h-full">
<Link
className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
href="/tournois"
>
{t("tournaments")}
</Link>
</li>
<li className="mr-10 h-full">
<Link
className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
href="/qui-sommes-nous"
>
{t("about")}
</Link>
</li>
<li className="mr-10 h-full">
<Link
className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
href="/contactez-nous"
>
{t("contact")}
</Link>
</li>
<li>
<ThemeSwitcher />
</li>
</ul>
</div>
</div>
</nav>
);
}