From 84dde04352a253494953ec28539ef80a181fe4a9 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Mon, 1 Jul 2024 21:49:17 +0200
Subject: [PATCH] add mobile nav

---
 web/src/components/Button.astro        |   9 +-
 web/src/components/Layout/Header.astro |  72 +++++++++++++++-
 web/src/sections/LandingHeader.astro   | 112 ++++++++++++-------------
 3 files changed, 128 insertions(+), 65 deletions(-)

diff --git a/web/src/components/Button.astro b/web/src/components/Button.astro
index 7e9539e..a5bd5b3 100644
--- a/web/src/components/Button.astro
+++ b/web/src/components/Button.astro
@@ -38,9 +38,14 @@ export interface Props
   extends HTMLAttributes<"button">,
     VariantProps<typeof button> {}
 
-const { variant = "default", size = "default", ...props } = Astro.props;
+const {
+  variant = "default",
+  size = "default",
+  class: className,
+  ...props
+} = Astro.props;
 ---
 
-<button {...props} class={button({ variant, size })}>
+<button {...props} class={button({ variant, size, class: className })}>
   <slot />
 </button>
diff --git a/web/src/components/Layout/Header.astro b/web/src/components/Layout/Header.astro
index 49eef1e..bf07f74 100644
--- a/web/src/components/Layout/Header.astro
+++ b/web/src/components/Layout/Header.astro
@@ -1,8 +1,13 @@
 ---
-import { button } from "../Button.astro";
+import Button, { button } from "../Button.astro";
+import { Menu } from "lucide-astro";
 ---
 
-<header id="header" class="fixed top-0 w-full h-[100px] z-50 bg-neutral-accent">
+<header id="header" class="fixed top-0 w-full h-[100px] z-50">
+  <div
+    class="bg-neutral-accent/90 w-full h-full absolute -z-20 backdrop-blur-lg"
+  >
+  </div>
   <div
     class="flex flex-row justify-between h-full w-full max-w-section m-auto p-main"
   >
@@ -11,11 +16,39 @@ import { button } from "../Button.astro";
         <h2 class="text-3xl font-extrabold">vspace.one</h2>
       </a>
     </div>
-    <div class="flex flex-row gap-2 items-center">
+    <Button variant="default" class="lg:hidden" id="nav-button">
+      <Menu />
+    </Button>
+    <div
+      id="nav-mobile"
+      class="animate-in slide-in-from-top-10 ease-out-quart duration-1000 absolute top-[100px] w-full
+      bg-neutral p-main left-0 hidden flex flex-col gap-3 -z-30"
+    >
       <a class={button({ variant: "secondary", size: "lg" })} href="/#location"
         >Standort</a
       >
-      <a class={button({ variant: "secondary", size: "lg" })} href="/faq">FAQ</a
+      <a
+        class={button({
+          variant: "secondary",
+          size: "lg",
+        })}
+        href="/faq">FAQ</a
+      >
+      <a class={button({ variant: "primary", size: "lg" })} href="/support"
+        >Unterstütze uns!</a
+      >
+    </div>
+    <div class="flex flex-row gap-2 items-center max-lg:hidden">
+      <a class={button({ variant: "secondary", size: "lg" })} href="/#location"
+        >Standort</a
+      >
+      <a
+        class={button({
+          variant: "secondary",
+          size: "lg",
+          class: "max-md:hidden",
+        })}
+        href="/faq">FAQ</a
       >
       <a class={button({ variant: "primary", size: "lg" })} href="/support"
         >Unterstütze uns!</a
@@ -23,3 +56,34 @@ import { button } from "../Button.astro";
     </div>
   </div>
 </header>
+
+<script>
+  import { animate, spring, stagger } from "motion";
+
+  const button = document.getElementById("nav-button")!;
+  const navMobile = document.getElementById("nav-mobile")!;
+  const navButtons = navMobile.children;
+
+  button.addEventListener("click", () => {
+    if (navMobile.classList.contains("hidden")) {
+      animate(
+        navButtons as unknown as NodeListOf<any>,
+        {
+          y: [-30, 0],
+          scale: [0.8, 1],
+          opacity: [0, 1],
+        },
+        {
+          easing: spring({
+            stiffness: 200,
+            damping: 20,
+            mass: 1,
+          }),
+          delay: stagger(0.1),
+        },
+      );
+    }
+
+    navMobile.classList.toggle("hidden");
+  });
+</script>
diff --git a/web/src/sections/LandingHeader.astro b/web/src/sections/LandingHeader.astro
index 6fc0f33..6eb7c67 100644
--- a/web/src/sections/LandingHeader.astro
+++ b/web/src/sections/LandingHeader.astro
@@ -9,10 +9,11 @@ import "pannellum/build/pannellum.css";
     <div
       id="landing-heading-container"
       style="opacity: 0;"
-      class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl p-card rounded-card ring ring-primary/20"
+      class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl p-card rounded-card ring ring-primary/20
+      max-md:w-[90vw]"
     >
       <!--h1>vspace.one</h1-->
-      <h2 class="text-4xl">Ein Makerspace und Hackerspace</h2>
+      <h2 class="text-4xl text-center">Ein Makerspace und Hackerspace</h2>
       <p>
         <a class="text-xl" href="/tour">Hier gehts zur virtuellen Space-Tour!</a
         >
@@ -20,7 +21,7 @@ import "pannellum/build/pannellum.css";
     </div>
   </div>
   <div class="w-full h-full">
-    <div class="w-full h-full" id="pano-bg"></div>
+    <div style="opacity: 0;" class="w-full h-full" id="pano-bg"></div>
     <!--little-planet
       width="2400"
       height="900"
@@ -36,68 +37,61 @@ import "pannellum/build/pannellum.css";
     import { animate } from "motion";
     import { ease } from "@unom/style";
 
-    const viewer = pannellum.viewer("pano-bg", {
-      panorama: "/pic/panorama/maschinenraum_half.jpg",
-      autoLoad: true,
-      showControls: false,
-    });
+    const init = () => {
+      const panoBg = document.getElementById("pano-bg")!;
 
-    viewer.setYaw(90, true);
-
-    const animateEntry = () => {
-      let scene: any = document.querySelector("little-planet.anim")!;
-      const landingHeadingContainer = document.querySelector(
-        "#landing-heading-container",
-      )!;
-
-      console.log(scene.children);
-
-      scene.addEventListener("load", () => {
-        animate(
-          scene,
-          { scale: [0.9, 1], opacity: [0, 1] },
-          {
-            ...ease.quint!(1.5).out,
-          },
-        );
-
-        animate(
-          landingHeadingContainer,
-          { scale: [0.4, 1], opacity: [0, 1] },
-          {
-            ...ease.quint!(1.4, 0.2).out,
-          },
-        );
-
-        animate(
-          (progress) => {
-            scene.camera = {
-              lon: -180 + ((progress * 270) % 360),
-              lat: progress * 10,
-              fov: 20 + 50 * progress,
-            };
-          },
-          {
-            ...ease.quint!(4).inOut,
-          },
-        );
-
-        /** spring({
-            stiffness: 10,
-            damping: 40,
-            mass: 2,
-            restSpeed: 0.01,
-            restDistance: 0.001,
-          }) */
+      const viewer = pannellum.viewer(panoBg, {
+        panorama: "/pic/panorama/maschinenraum_half.jpg",
+        autoLoad: true,
+        showControls: false,
       });
+
+      viewer.setYaw(90, false);
+
+      const animateEntry = () => {
+        const landingHeadingContainer = document.querySelector(
+          "#landing-heading-container",
+        )!;
+
+        viewer.on("load", () => {
+          console.log("loaded");
+
+          animate(
+            panoBg,
+            { scale: [0.9, 1], opacity: [0, 1] },
+            {
+              ...ease.quint!(1.5).out,
+            },
+          );
+
+          animate(
+            landingHeadingContainer,
+            { scale: [0.4, 1], opacity: [0, 1] },
+            {
+              ...ease.quint!(1.4, 0.2).out,
+            },
+          );
+
+          animate(
+            (progress) => {
+              viewer.setPitch(progress * 10, false);
+              viewer.setYaw(160 + ((progress * 270) % 360), false);
+              viewer.setHfov(50 + progress * 50, false);
+            },
+            {
+              ...ease.quint!(4).inOut,
+            },
+          );
+        });
+      };
+
+      animateEntry();
     };
 
-    animateEntry();
+    init();
 
     document.addEventListener("astro:after-swap", () => {
-      animateEntry();
+      init();
     });
   </script>
-  <script is:inline type="module" src="https://unpkg.com/little-planet@0.5"
-  ></script>
 </div>