themes and dimensions

This commit is contained in:
Owen Rees
2023-06-12 15:41:09 +02:00
parent 95f0a37c76
commit 254d4603aa
18 changed files with 204 additions and 34 deletions
+17 -8
View File
@@ -1,19 +1,25 @@
import Link from "next/link";
import ThemeSwitcher from "@/components/ThemeSwitcher";
import Hamburger from "@/components/Hamburger";
export default function Navbar() {
return (
<nav className="bg-gray-800 pt-5 mt-0 w-full md:pt-2 px-5">
<div className="container mx-auto flex flex-wrap items-center">
<div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
<nav className="w-full relative border-b-[1px] pt-5 mt-0 px-5 md:pt-2 bg-white dark:bg-gray-800 dark:border-gray-700">
<div className="container mx-auto flex items-center">
<div className="pb-3 justify-center flex w-full md:w-1/2 md:pb-0 md:justify-start font-extrabold">
<Link
className="text-white no-underline hover:text-white hover:no-underline"
className="text-gray-900 dark:text-white no-underline hover:no-underline"
href="/"
>
<span className="text-2xl pl-2">Echecs France</span>
<span className="text-2xl">Echecs France</span>
</Link>
</div>
<div className="flex w-full pt-2 justify-center md:w-1/2 md:justify-end">
<ul className="list-reset text-white no-underline flex flex-1 justify-around md:flex-none items-center">
<div className="pb-2 md:hidden">
<Hamburger />
</div>
<div className="hidden pt-2 justify-center md:flex md:w-1/2 md:justify-end">
<ul className="list-reset text-gray-900 dark:text-white no-underline flex flex-1 justify-around md:flex-none items-center">
<li className="mr-10">
<Link
className="inline-block border-b-4 py-5 border-transparent hover:border-teal-600 transition-all ease-in-out duration-300"
@@ -30,7 +36,7 @@ export default function Navbar() {
Qui Sommes-Nous
</Link>
</li>
<li className="">
<li className="mr-10">
<Link
className="inline-block border-b-4 py-5 border-transparent hover:border-teal-600 transition-all ease-in-out duration-300"
href="/contactez-nous"
@@ -38,6 +44,9 @@ export default function Navbar() {
Contactez-Nous
</Link>
</li>
<li>
<ThemeSwitcher />
</li>
</ul>
</div>
</div>