fix admin in header

components/header.tsx

@@ -44,10 +44,10 @@ export default function Header() {
           <div className="relative flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
             <div className="flex justify-start lg:w-0 flex-1">
               <Link href="/" className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
-                  Pfadi-Bussle
+                Pfadi-Bussle
               </Link>
             </div>
-            <nav className="hidden space-x-10 sm:flex">
+            <nav className="hidden space-x-10 sm:flex items-center">
               {NAV_ENTRIES.map(({ label, href }) => {
                 return (
                   <a
@@ -60,10 +60,11 @@ export default function Header() {
                   </a>
                 )
               })}
+              <User />
             </nav>
             <nav
               onClick={() => setHamburgerOpen(!hamburgerOpen)}
-              className="flex flex-col sm:hidden text-gray-500 hover:text-gray-900 cursor-pointer"
+              className="flex flex-col items-center sm:hidden text-gray-500 hover:text-gray-900 cursor-pointer"
             >
               <svg
                 className="w-5"
@@ -80,9 +81,8 @@ export default function Header() {
                 />
               </svg>
               <div
-                className={`${
+                className={`${hamburgerOpen || 'hidden'
-                  hamburgerOpen || 'hidden'
+                  } absolute z-10 mt-5 transform right-0`}
-                } absolute z-10 mt-5 transform right-0`}
               >
                 <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                   <div className="relative grid gap-2 bg-white px-4 py-2">
@@ -98,11 +98,11 @@ export default function Header() {
                         </a>
                       )
                     })}
+                    <User />
                   </div>
                 </div>
               </div>
             </nav>
-            <User />
           </div>
         </div>
       </div>

components/navigation.tsx

@@ -1,49 +0,0 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-
-import { useSession } from 'next-auth/react'
-
-import User from './user'
-
-const pathNameLabelMap = {
-  '/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) {
-  return pathNameLabelMap[route]
-}
-
-export default function Navigation() {
-  const { data, status } = useSession()
-  const router = useRouter()
-
-  const pathname = router.pathname
-  if (pathname.length === 0 || pathname === '/') {
-    return null
-  }
-
-  const pathLabel = getPathNameMap(pathname)
-
-  return (
-    <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
-      <>
-        <h2 className="mx-1">
-          <span className="font-extrabold">{pathLabel}</span>
-        </h2>
-        {status === 'authenticated' && data.user.email && (
-          <Link href="/admin" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
-              Buchungen
-          </Link>
-        )}
-        <div className="flex-grow" />
-        <User />
-      </>
-    </div>
-  )
-}

components/user.tsx

@@ -1,4 +1,5 @@
 import { useSession, signOut } from 'next-auth/react'
+import Link from 'next/link'
 
 export default function User() {
   const { data, status } = useSession()
@@ -9,6 +10,12 @@ export default function User() {
 
   return (
     <>
+      <Link
+        href="/admin"
+        className="text-base font-medium text-gray-500 hover:text-gray-900"
+      >
+        Admin
+      </Link>
       <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
         {data.user.email}
       </div>