replace breadcrumb with navigation

components/breadcrumbs.tsx

@@ -1,45 +0,0 @@
-import { useContext } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import UserContext from './user/context'
-
-export default function Breadcrumbs() {
-  const { username, role } = useContext(UserContext)
-  const router = useRouter()
-
-  const path = router.asPath
-  if (path.length === 0 || path === '/') {
-    return null
-  }
-
-  const breadcrumbs = path.replace(/^\//, '').split('/')
-
-  // TODO: translate routes
-  // TODO: make entries linkable
-  return (
-    <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
-      {role === 'admin' && (
-        <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
-          {username}
-        </div>
-      )}
-      <>
-        <h2 className="mr-1">
-          <Link href="/">
-            <a className="font-extrabold">Home</a>
-          </Link>
-        </h2>
-        {breadcrumbs.map((breadcrumb) => {
-          return (
-            <>
-              {'>'}
-              <h2 className="mx-1">
-                <span className="font-extrabold">{breadcrumb}</span>
-              </h2>
-            </>
-          )
-        })}
-      </>
-    </div>
-  )
-}

components/header.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import Link from 'next/link'
 import Logo from './logo'
-import Breadcrumbs from './breadcrumbs'
+import Navigation from './navigation'
 
 export default function Header() {
   return (
@@ -20,7 +20,7 @@ export default function Header() {
           </h1>
           <Logo className="w-40 flex-shrink-0" />
         </div>
-        <Breadcrumbs />
+        <Navigation />
       </div>
     </>
   )

components/navigation.tsx

@@ -0,0 +1,62 @@
+import { useContext } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import User from './user'
+import UserContext from './user/context'
+import { USER_ROLE } from '../lib/session'
+
+const pathNameLabelMap = {
+  '/admin/login': 'Login',
+  '/admin': 'Buchungsübersicht',
+  '/admin/booking/[uuid]': 'Buchung Bearbeiten',
+  '/admin/booking/[uuid]/bill': 'Buchung Rechnungsstellung',
+  '/book': 'Buchungsanfrage',
+  '/booking/[uuid]': 'Ihre Buchung',
+  '/booking/[uuid]/stored': 'Buchungsanfrage angenommen',
+}
+
+function getPathNameMap(route: string) {
+  const name = pathNameLabelMap[route]
+
+  return name || route
+}
+
+export default function Navigation() {
+  const router = useRouter()
+  const { role } = useContext(UserContext)
+
+  const pathname = router.pathname
+  if (pathname.length === 0 || pathname === '/') {
+    return null
+  }
+
+  const pathLabel = getPathNameMap(pathname)
+  const path = router.asPath
+
+  return (
+    <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
+      <>
+        <h2 className="mr-1">
+          <Link href="/">
+            <a className="font-extrabold">Home</a>
+          </Link>
+        </h2>
+        {'>'}
+        <h2 className="mx-1">
+          <Link href={path}>
+            <a className="font-extrabold">{pathLabel}</a>
+          </Link>
+        </h2>
+        {role === USER_ROLE.ADMIN && (
+          <Link href="/admin">
+            <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+              Buchungen
+            </a>
+          </Link>
+        )}
+        <div className="flex-grow" />
+        <User />
+      </>
+    </div>
+  )
+}

components/user.tsx

@@ -0,0 +1,17 @@
+import { useContext } from 'react'
+
+import UserContext from './user/context'
+
+export default function User() {
+  const { username, role } = useContext(UserContext)
+
+  if (!username || !role) {
+    return null
+  }
+
+  return (
+    <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
+      {username}
+    </div>
+  )
+}