very new header

hamburger is still in progress

components/footer.tsx

@@ -1,10 +1,18 @@
 import React from 'react'
 import Link from 'next/link'
+import Logo from './logo'
 
 export default function Footer() {
   return (
-    <footer className="footer">
-      <ul className="flex flex-row justify-center gap-2">
+    <footer className="my-5 flex flex-col sm:flex-row px-4 sm:px-6">
+      <div className="flex-grow">
+        <Link href="/">
+          <a>
+            <Logo className="h-12 w-auto sm:h-14" />
+          </a>
+        </Link>
+      </div>
+      <ul className="flex flex-col gap-2 sm:flex-row sm:items-end ">
         <li>
           <Link href="/privacy">
             <a className="link">Datenschutzerklärung</a>

components/header.tsx

@@ -1,7 +1,6 @@
 import Head from 'next/head'
 import Link from 'next/link'
-import Logo from './logo'
-import Navigation from './navigation'
+import User from './user'
 
 export default function Header() {
   return (
@@ -10,17 +9,52 @@ export default function Header() {
         <title>Pfadi-Bussle</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <div className="my-3">
-        <div className="flex flex-row items-center p-3 text-white bg-blue-800 rounded-t-sm">
-          <h1 className="mr-3 flex-grow text-2xl">
-            <Link href="/">
-              <a className="font-extrabold">Pfadi-Bussle</a>
-            </Link>
-          </h1>
-          <Logo className="w-40 flex-shrink-0" />
+      <div className="relative bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="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="/">
+                <a className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
+                  Pfadi-Bussle
+                </a>
+              </Link>
+            </div>
+            <nav className="hidden space-x-10 sm:flex">
+              <Link href="/book">
+                <a className="text-base font-medium text-gray-500 hover:text-gray-900">
+                  Buchungsanfrage
+                </a>
+              </Link>
+              <Link href="/prices">
+                <a className="text-base font-medium text-gray-500 hover:text-gray-900">
+                  Preise
+                </a>
+              </Link>
+              <Link href="/terms">
+                <a className="text-base font-medium text-gray-500 hover:text-gray-900">
+                  Mitbedingungen
+                </a>
+              </Link>
+            </nav>
+            <nav className="sm:hidden">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </nav>
+            <User />
+          </div>
         </div>
-        <Navigation />
       </div>
     </>
   )

components/user.tsx

@@ -6,7 +6,7 @@ export default function User() {
   const { username, role } = useContext(UserContext)
 
   if (!username || !role) {
-    return null
+    return <div />
   }
 
   return (