Add sticky header

allen-ziegenfus · May 29, 2023 · c2e0de6 · c2e0de6
1 parent 6b98c43
commit c2e0de6
Showing 1 changed file with 46 additions and 39 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -18,46 +18,53 @@ const { title } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body class="max-w-6xl m-auto p-6">
-    <header class="text-center py-5 relative">
-      <a href="/"
-        ><h1 class="text-2xl">
-          Werkverzeichnis von Vollrad Kutscher 1968 bis 2000
-        </h1></a
-      >
-      <SearchBar client:load />
+  <body class="max-w-6xl m-auto p-6 relative">
+    <header class="sticky bg-white top-0">
+      <div class="text-center py-5 relative">
+        <a href="/"
+          ><h1 class="text-2xl">
+            Werkverzeichnis von Vollrad Kutscher 1968 bis 2000
+          </h1></a
+        >
+        <SearchBar client:load />
+      </div>
+
+      <nav>
+        <ul
+          class="flex flex-row flex-wrap bg-gray-200 py-4 px-2 my-3 justify-center"
+        >
+          {
+            pages.map((page) => (
+              <li>
+                <a
+                  class="px-3 py-2 hover:bg-gray-800 hover:text-white cursor-pointer"
+                  href={`/allgemein/${page.Slug}`}
+                >
+                  {page.Name}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+        <nav>
+          <ul class="flex flex-row flex-wrap bg-gray-200 py-4 px-2 my-3">
+            {
+              werkgruppen.map((werkgruppe) => (
+                <li class="py-2">
+                  <a
+                    class="px-3 py-2 hover:bg-gray-800 hover:text-white cursor-pointer"
+                    href={`/${werkgruppe.Slug}`}
+                  >
+                    {werkgruppe.Titel}
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </nav>
+      </nav>
     </header>
-    <nav>
-      <ul class="flex flex-row flex-wrap bg-gray-200 py-4 px-2 my-3 justify-center">
-        {
-          pages.map((page) => (
-            <li>
-              <a
-                class="px-3 py-2 hover:bg-gray-800 hover:text-white cursor-pointer"
-                href={`/allgemein/${page.Slug}`}
-              >
-                {page.Name}
-              </a>
-            </li>
-          ))
-        }
-    </nav>
-    <nav>
-      <ul class="flex flex-row flex-wrap bg-gray-200 py-4 px-2 my-3">
-        {
-          werkgruppen.map((werkgruppe) => (
-            <li class="py-2">
-              <a
-                class="px-3 py-2 hover:bg-gray-800 hover:text-white cursor-pointer"
-                href={`/${werkgruppe.Slug}`}
-              >
-                {werkgruppe.Titel}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </nav>
+    <div class=""></div>
     <slot />
     <footer class="py-3">
       <p>Copyright © 2023 Vollradkutscher-Werkverzeichnis.de</p>