Started one a simple header

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">
+      <nav className="mb-3 flex justify-between border-b-2">
-        <Link to="/">Pac-Man Board Game</Link>
+        <Link to="/"><h2 className={"my-1"}>Pac-Man Board Game</h2></Link>
-        <div onClick={toggleNavbar} className="mr-2"/>
+
-        <div className="d-sm-inline-flex flex-sm-row-reverse">
+        <ul className="inline-flex gap-2 items-center mr-5">
-          <ul className="navbar-nav flex-grow">
+          <NavItem to="/">Home</NavItem>
-            <Link className="text-dark" to="/">Home</Link>
+          <NavItem to={"/lobby"}>Lobby</NavItem>
-            <Link className="text-dark" to="/counter">Counter</Link>
+          <NavItem className={"mx-2"} to={"/login"}>Login</NavItem>
-            <Link to={"/lobby"}>Lobby</Link>
+
-          </ul>
+          {/*TODO show signed in user when signed in, otherwise login button*/}
-        </div>
+        </ul>
       </nav>
     </header>
   );
 };
 
 export default NavMenu;
+
+const NavItem: FC<LinkProps> = ({to, children, className}) => (
+  <li>
+    <Link className={`hover:underline ${className}`} to={to}>{children}</Link>
+  </li>
+)

pac-man-board-game/ClientApp/src/index.css

@@ -19,6 +19,10 @@ h1 {
     @apply text-4xl;
 }
 
+h2 {
+    @apply text-3xl;
+}
+
 br {
     @apply my-2;
 }

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,