themes and dimensions

components/Footer.tsx

@@ -1,19 +1,22 @@
 import Link from "next/link";
-import { FaGithub } from "react-icons/fa";
+import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 
 export default function Footer() {
   return (
-    <footer className="grid justify-items-center bg-gray-800 text-white py-2 px-5">
+    <footer className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700">
       <div className="p-2">
         <p>&copy; {new Date().getFullYear()} - Owen Rees</p>
       </div>
-      <div className="p-2">
+      <div className="flex p-2 space-x-4">
         <Link
           href="https://github.com/TheRealOwenRees/echecsfrance"
           target="_blank"
         >
           <FaGithub />
         </Link>
+        <Link href="/contactez-nous">
+          <FaRegEnvelope />
+        </Link>
       </div>
     </footer>
   );

components/Hamburger.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import HamburgerMenu from "@/components/HamburgerMenu";
+import { useState } from "react";
+
+// TODO make hamburger menu slide in from the right instead of conditional rendering
+const Hamburger = () => {
+  const [menuVisible, setMenuVisible] = useState(false);
+  return (
+    <>
+      {" "}
+      <div className="space-y-2" onClick={() => setMenuVisible(!menuVisible)}>
+        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
+        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
+        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
+      </div>
+      {menuVisible && <HamburgerMenu />}
+    </>
+  );
+};
+
+export default Hamburger;

components/HamburgerMenu.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import ThemeSwitcher from "@/components/ThemeSwitcher";
+
+const HamburgerMenu = () => {
+  return (
+    <div className="hamburgerMenu absolute top-16 right-0 z-[9999] bg-teal-600 flex md:hidden dark:bg-gray-600">
+      <ul className="list-reset text-white p-5">
+        <li className="py-5">
+          <Link href="/tournois">Tournois</Link>
+        </li>
+        <li className="py-5">
+          <Link href="/qui-sommes-nous">Qui Sommes-Nous</Link>
+        </li>
+        <li className="py-5">
+          <Link href="/contactez-nous">Contactez-Nous</Link>
+        </li>
+        <li className="py-5">
+          <ThemeSwitcher />
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default HamburgerMenu;

components/Layout.tsx

@@ -7,7 +7,7 @@ export default function Layout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="h-screen min-h-[400px] bg-white font-sans leading-normal tracking-normal">
+    <div className="h-screen min-h-[600px] bg-white dark:bg-gray-800 font-sans leading-normal tracking-normal">
       <Navbar />
       {children}
       <Footer />

components/Navbar.tsx

@@ -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>

components/SearchBar.tsx

@@ -11,7 +11,7 @@ const SearchBar = ({
 }: SearchBarProps) => {
   return (
     <>
-      <div className="p-3 bg-gray-800">
+      <div className="p-3 bg-white dark:bg-gray-800">
         <label htmlFor="table-search" className="sr-only">
           Search
         </label>

components/ThemeSwitcher.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { MdOutlineDarkMode, MdLightbulbOutline } from "react-icons/md";
+import useDarkMode from "@/hooks/useDarkMode";
+
+// TODO write tests for light/mode
+// TODO new SVG for light/dark theme
+// TODO fix TS error on setTheme
+const ThemeSwitcher = () => {
+  const [colorTheme, setTheme] = useDarkMode();
+
+  return (
+    <>
+      {colorTheme === "light" ? (
+        <MdOutlineDarkMode onClick={() => setTheme("light")} />
+      ) : (
+        <MdLightbulbOutline onClick={() => setTheme("dark")} />
+      )}
+    </>
+  );
+};
+
+export default ThemeSwitcher;

components/TournamentMap.tsx

@@ -24,7 +24,7 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   return (
     <section
       id="tournament-map"
-      className="grid h-[calc(100vh-128px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-172px)]"
+      className="grid h-[calc(100vh-153px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-174px)]"
     >
       <MapContainer
         center={center}

components/TournamentTable.tsx

@@ -18,16 +18,16 @@ export default function TournamentTable({
 
   console.log(filteredTournamentData.length);
 
-  const stickyHeader = "sticky top-0 p-3 bg-gray-600";
+  const stickyHeader = "sticky top-0 p-3 bg-teal-600 dark:bg-gray-600";
 
   return (
-    <section className="w-full grid auto-rows-max lg:h-[calc(100vh-172px)] lg:col-start-2 lg:col-end-3">
+    <section className="w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-174px)] lg:col-start-2 lg:col-end-3">
       <SearchBar
         tournamentFilter={tournamentFilter}
         setTournamentFilter={setTournamentFilter}
       />
       <table className="relative table-fixed w-full text-center text-xs">
-        <thead className="bg-gray-600 text-white">
+        <thead>
           <tr>
             <th className={stickyHeader}>Date</th>
             <th className={stickyHeader}>Ville</th>