New navbar.

Author: nikoshell

public/EuroPython2025_logo_small.png

@@ -1,8 +1,7 @@
 ---
-import { Fullbleed } from "./layout/fullbleed";
-
-import links from "../data/links.json";
-import { EPSLogo } from "./logo/eps-logo";
+import { Image } from "astro:assets";
+import links from "@data/links.json";
+import EPSLogo from "../../public/eps-logo.svg";
 
 const buildTimestamp = __TIMESTAMP__;
 const gitVersion = __GIT_VERSION__;
@@ -36,7 +35,7 @@ const gitVersion = __GIT_VERSION__;
       class="flex flex-col lg:flex-row self-center gap-8 lg:gap-12 justify-end"
     >
       <div>
-        <EPSLogo className="max-w-[100px] lg:max-w-[200px] h-auto w-full" />
+        <EPSLogo width=200 height=200 class="max-w-[100px] lg:max-w-[200px] h-auto w-full" />
       </div>
       <div>
         <address class="not-italic mb-4">

public/eps-logo.svg

@@ -7,7 +7,8 @@ import Search from "@components/Search.astro";
 import links from "../data/links.json";
 ---
 
-<header class="p-6 flex items-center justify-between relative z-40">
+<section id="navbar" class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full">
+  <div class="container max-w-[1150px] mx-auto py-2 mt-2 lg:p-2 lg:mt-6 px-6 flex items-center justify-between relative z-40 bg-white/80 lg:rounded-lg  backdrop-blur-md shadow-lg">
   <input
     type="checkbox"
     name="mobile-controls"
@@ -25,7 +26,7 @@ import links from "../data/links.json";
   <HeaderActions />
 
   <div
-    class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 p-6"
+    class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 px-6 py-2 "
   >
     <div class="flex items-center justify-between">
       <HeaderLogo />
@@ -54,5 +55,30 @@ import links from "../data/links.json";
       />
     </nav>
   </div>
+</div>
+</section>
 <Search />
-</header>
+
+    <script>
+        let prevScrollPos = window.pageYOffset;
+        const navbar = document.getElementById("navbar");
+
+        // Auto-hide Navbar on scroll
+        window.onscroll = function () {
+            let currentScrollPos = window.pageYOffset;
+            if (prevScrollPos > currentScrollPos) {
+                navbar.style.transform = "translateY(0)";
+            } else {
+                navbar.style.transform = "translateY(-100%)";
+            }
+            prevScrollPos = currentScrollPos;
+        };
+
+        // Mobile Menu Toggle
+        //const menuBtn = document.getElementById("menu-btn");
+        //const mobileMenu = document.getElementById("mobile-menu");
+        //
+        //menuBtn.addEventListener("click", () => {
+        //    mobileMenu.classList.toggle("hidden");
+        //});
+    </script>

src/components/Footer.astro

@@ -15,7 +15,7 @@ const IS_LIVE = false;
       //<Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
 ---
 
-<div class="flex items-center justify-end gap-2 h-[85px] w-1/3">
+<div class="flex items-center justify-end gap-2 w-1/3">
 <div class="ml-auto justify-end flex items-center w-full">
   {
     !mobile ?
@@ -34,7 +34,7 @@ const IS_LIVE = false;
               <kbd>Ctrl</kbd><kbd>K</kbd>
             </kbd>
           </button>
-      <Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Register Now!</Button>
+      <Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Tickets</Button>
       {IS_LIVE && <Button url="/live">Live</Button>}
       </>
      : null

src/components/Header.astro

@@ -1,11 +1,9 @@
 ---
-import { Logo } from "../logo";
-
 interface Props {
   inverted?: boolean;
 }
 ---
 
 <a href="/">
-  <img class="md:block block w-[44px] h-[44px] md:w-[85px] md:h-[85px] " src="/EuroPython2025_logo.png" />
+  <img class="md:block block w-[44px] h-[44px]" src="/EuroPython2025_logo.png" />
 </a>