From aeba6343e3f97d077e4782fa7b07164144c11c05 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Sat, 22 Jul 2023 12:14:21 +0200
Subject: [PATCH] Started one a simple header

---
 .../ClientApp/src/components/navMenu.tsx      | 33 +++++++++----------
 pac-man-board-game/ClientApp/src/index.css    |  4 +++
 .../ClientApp/src/types/props.d.ts            |  5 +++
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/pac-man-board-game/ClientApp/src/components/navMenu.tsx b/pac-man-board-game/ClientApp/src/components/navMenu.tsx
index d8aa0dd..d82ece9 100644
--- a/pac-man-board-game/ClientApp/src/components/navMenu.tsx
+++ b/pac-man-board-game/ClientApp/src/components/navMenu.tsx
@@ -2,28 +2,27 @@ import React, {FC} from "react";
 import {Link} from "react-router-dom";
 
 const NavMenu: FC = () => {
-
-  const [collapsed, setCollapsed] = React.useState(true);
-
-  function toggleNavbar() {
-    setCollapsed(!collapsed);
-  }
-
   return (
     <header>
-      <nav className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3">
-        <Link to="/">Pac-Man Board Game</Link>
-        <div onClick={toggleNavbar} className="mr-2"/>
-        <div className="d-sm-inline-flex flex-sm-row-reverse">
-          <ul className="navbar-nav flex-grow">
-            <Link className="text-dark" to="/">Home</Link>
-            <Link className="text-dark" to="/counter">Counter</Link>
-            <Link to={"/lobby"}>Lobby</Link>
-          </ul>
-        </div>
+      <nav className="mb-3 flex justify-between border-b-2">
+        <Link to="/"><h2 className={"my-1"}>Pac-Man Board Game</h2></Link>
+
+        <ul className="inline-flex gap-2 items-center mr-5">
+          <NavItem to="/">Home</NavItem>
+          <NavItem to={"/lobby"}>Lobby</NavItem>
+          <NavItem className={"mx-2"} to={"/login"}>Login</NavItem>
+
+          {/*TODO show signed in user when signed in, otherwise login button*/}
+        </ul>
       </nav>
     </header>
   );
 };
 
 export default NavMenu;
+
+const NavItem: FC<LinkProps> = ({to, children, className}) => (
+  <li>
+    <Link className={`hover:underline ${className}`} to={to}>{children}</Link>
+  </li>
+)
diff --git a/pac-man-board-game/ClientApp/src/index.css b/pac-man-board-game/ClientApp/src/index.css
index 81b583e..f9523b4 100644
--- a/pac-man-board-game/ClientApp/src/index.css
+++ b/pac-man-board-game/ClientApp/src/index.css
@@ -19,6 +19,10 @@ h1 {
     @apply text-4xl;
 }
 
+h2 {
+    @apply text-3xl;
+}
+
 br {
     @apply my-2;
 }
diff --git a/pac-man-board-game/ClientApp/src/types/props.d.ts b/pac-man-board-game/ClientApp/src/types/props.d.ts
index 175d714..c6fa886 100644
--- a/pac-man-board-game/ClientApp/src/types/props.d.ts
+++ b/pac-man-board-game/ClientApp/src/types/props.d.ts
@@ -11,6 +11,11 @@ interface ChildProps extends ComponentProps {
   children?: React.JSX.Element | string,
 }
 
+interface LinkProps extends ChildProps {
+  to: string,
+  newTab?: boolean,
+}
+
 interface ButtonProps extends ChildProps {
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
   disabled?: boolean,