From 36d1bc4ac37cc5574ec1a41193ca1fc7675b7750 Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Wed, 1 Apr 2026 09:43:07 -0700
Subject: [PATCH] mobile frog menu: staggered lilypad stack with settings +
 credits, login stays separate

---
 src/lib/FrogHeader.svelte | 86 ++++++++++++++-------------------------
 1 file changed, 30 insertions(+), 56 deletions(-)

diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index 834d626..95bca8d 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -1,7 +1,7 @@
 <!--
 	FrogHeader: Site header with the "vod frog" logo and frog mascot.
 	On mobile, the frog acts as a menu toggle — tapping it reveals lilypad
-	menu items (credits, login) that drift down with staggered animation.
+	menu items that drift down with staggered animation.
 -->
 <script lang="ts">
 	import LoginButton from './LoginButton.svelte';
@@ -20,7 +20,6 @@
 
 	function onFrogClick() {
 		playCroak();
-		// On mobile, toggle the menu
 		if (window.innerWidth <= 600) {
 			menuOpen = !menuOpen;
 		}
@@ -53,8 +52,7 @@
 <svelte:window onkeydown={onKeyDown} />
 
 <header class="frog-header">
-	<!-- Desktop login area -->
-	<div class="login-area desktop-only">
+	<div class="login-area">
 		<LoginButton />
 	</div>
 
@@ -71,19 +69,16 @@
 		/>
 	</div>
 
-	<!-- Mobile lilypad menu -->
+	<!-- Mobile lilypad menu — stacked lilypads that drift down -->
 	<div class="mobile-menu" class:open={menuOpen}>
-		<button
-			class="lily-item"
-			style="animation-delay: 0.05s;"
-			onclick={openCredits}
-		>
+		<button class="lily-item" onclick={() => { playCroak(); }}>
+			<img src="/lilymenu.svg" alt="" class="lily-img" />
+			<span class="lily-label">settings</span>
+		</button>
+		<button class="lily-item" onclick={openCredits}>
 			<img src="/lilymenu.svg" alt="" class="lily-img" />
 			<span class="lily-label">credits</span>
 		</button>
-		<div class="lily-item" style="animation-delay: 0.15s;">
-			<LoginButton />
-		</div>
 	</div>
 
 	<div class="subtitle-lines">
@@ -92,7 +87,6 @@
 	</div>
 </header>
 
-<!-- Credits modal (shared between desktop CreditsButton and mobile menu) -->
 {#if showCreditsModal}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="modal-backdrop" onclick={onBackdropClick}>
@@ -165,15 +159,11 @@
 		transform: rotate(5deg) scale(1.1);
 	}
 
-	/* Mobile menu — hidden by default */
+	/* Mobile menu — hidden on desktop */
 	.mobile-menu {
 		display: none;
 	}
 
-	.desktop-only {
-		display: block;
-	}
-
 	/* Credits modal */
 	.modal-backdrop {
 		position: fixed;
@@ -307,20 +297,15 @@
 			width: clamp(90px, 22vw, 130px);
 		}
 
-		/* When menu is open, frog rotates down to "look at" the menu */
 		.header-frog.menu-open {
 			transform: rotate(80deg) scale(1.05);
 		}
 
-		.desktop-only {
-			display: none;
-		}
-
 		.mobile-menu {
 			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			gap: 6px;
+			gap: 0;
 			overflow: hidden;
 			max-height: 0;
 			opacity: 0;
@@ -328,7 +313,7 @@
 			            opacity 0.3s ease;
 			position: relative;
 			z-index: 11;
-			padding-left: 8px;
+			padding-left: 4px;
 		}
 
 		.mobile-menu.open {
@@ -343,8 +328,18 @@
 			align-items: center;
 			justify-content: center;
 			opacity: 0;
-			transform: translateY(-20px) rotate(-8deg);
+			transform: translateY(-16px) rotate(-6deg);
 			transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+			margin-top: -10px;
+		}
+
+		.lily-item:first-child {
+			margin-top: 0;
+		}
+
+		/* Offset alternating pads for a natural stagger */
+		.lily-item:nth-child(even) {
+			margin-left: 30px;
 		}
 
 		.mobile-menu.open .lily-item {
@@ -352,30 +347,16 @@
 			transform: translateY(0) rotate(0deg);
 		}
 
-		/* Stagger the animation per item */
-		.mobile-menu.open .lily-item:nth-child(1) {
-			transition-delay: 0.05s;
-		}
-		.mobile-menu.open .lily-item:nth-child(2) {
-			transition-delay: 0.15s;
-		}
-		.mobile-menu.open .lily-item:nth-child(3) {
-			transition-delay: 0.25s;
-		}
+		.mobile-menu.open .lily-item:nth-child(1) { transition-delay: 0.05s; }
+		.mobile-menu.open .lily-item:nth-child(2) { transition-delay: 0.15s; }
+		.mobile-menu.open .lily-item:nth-child(3) { transition-delay: 0.25s; }
 
-		/* When closing, reverse stagger */
-		.mobile-menu:not(.open) .lily-item:nth-child(1) {
-			transition-delay: 0.1s;
-		}
-		.mobile-menu:not(.open) .lily-item:nth-child(2) {
-			transition-delay: 0.05s;
-		}
-		.mobile-menu:not(.open) .lily-item:nth-child(3) {
-			transition-delay: 0s;
-		}
+		.mobile-menu:not(.open) .lily-item:nth-child(1) { transition-delay: 0.1s; }
+		.mobile-menu:not(.open) .lily-item:nth-child(2) { transition-delay: 0.05s; }
+		.mobile-menu:not(.open) .lily-item:nth-child(3) { transition-delay: 0s; }
 
 		.lily-img {
-			width: 80px;
+			width: 90px;
 			height: auto;
 			filter: drop-shadow(1px 2px 3px rgba(10, 24, 43, 0.25));
 		}
@@ -383,16 +364,9 @@
 		.lily-label {
 			position: absolute;
 			font-family: 'PicNic', cursive, system-ui;
-			font-size: 0.75rem;
+			font-size: 0.8rem;
 			color: #0A182B;
 			pointer-events: none;
 		}
 	}
-
-	/* Desktop: hide mobile menu items, show lily label for credits btn */
-	@media (min-width: 601px) {
-		.lily-item, .lily-img, .lily-label {
-			display: none;
-		}
-	}
 </style>
-- 
2.51.2