lil home page

src/layouts/NavbarLayout.astro

@@ -0,0 +1,72 @@
+---
+import Basic from "./Basic.astro";
+import { Image } from 'astro:assets';
+import '../styles/button.css';
+import localLogo from "../images/logo.png"
+import {l, t} from "astro-i18n";
+
+const { title } = Astro.props;
+---
+
+<Basic title={title}>
+    <slot name="head" slot="head" />
+    <Fragment>
+        <div>
+            <nav-bar class="h-24 sm:h-12 fixed top-0 left-0 right-0 flex flex-col sm:flex-row items-center justify-evenly sm:justify-between px-4 transition-colors z-10 \
+                            before:bg-transparent before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:bg-black before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
+                <a class="flex items-center" href={l("/")}>
+                    <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
+                    <h1 class="text-2xl uppercase font-bold inline-block">
+                        {t("navbar.title")}
+                    </h1>
+                </a>
+                <div class="flex items-center">
+                    <a class="btn btn-gray" href={l("/")}>
+                        <span class="btn__text">Start</span>
+                    </a>
+                    <a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
+                        <span class="btn__text">Blog</span>
+                    </a>
+                    <a class="btn">
+                        <span class="btn__text">Login</span>
+                    </a>
+                </div>
+            </nav-bar>
+            <script>
+                class Navbar extends HTMLElement {
+                    constructor() {
+                        super();
+                        if (window.scrollY != 0) {
+                            this.classList.add("scrolled");
+                        } else {
+                            this.classList.remove("scrolled");
+                        }
+
+                        window.onscroll = e => {
+                            if (window.scrollY != 0) {
+                                this.classList.add("scrolled");
+                            } else {
+                                this.classList.remove("scrolled");
+                            }
+                        }
+                    }
+                }
+
+                customElements.define('nav-bar', Navbar);
+            </script>
+            <main>
+                <slot />
+            </main>
+        </div>
+    </Fragment>
+</Basic>
+
+<style>
+    .scrolled {
+        @apply text-white;
+
+        &::before {
+            @apply scale-y-100;
+        }
+    }
+</style>