feat(header): add hamburger menu with site navigation

.gitignore

@@ -48,6 +48,7 @@ static/test.html
 .claude/settings.local.json
 .claude/plans/
 .claude/worktrees/
+tasks
 
 # Config / Certificates
 *.pem

messages/de.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "Geheime Anfragen befinden sich in der öffentlichen Beta-Phase",
 	"fresh_calm_heron_note": "Neu:",
 	"tidy_swift_fox_close": "Schließen",
+	"quick_proud_lion_guide": "Anwendungsfälle",
+	"warm_calm_hawk_defend": "Für IT- & Sicherheitsteams",
+	"clear_pure_owl_advise": "Für Recht & Compliance",
+	"brave_sharp_fox_report": "Für Journalisten",
+	"kind_warm_bear_assist": "Für Kundensupport",
+	"soft_quiet_deer_wait": "Bald verfügbar",
+	"plain_wise_crane_navigate": "Menü",
 	"front_fun_husky_pray": "Neues Passwort setzen",
 	"clear_lost_goose_beam": "E-Mail",
 	"candid_red_lynx_offer": "Scrt.link ermöglicht es dir, sensible Informationen online zu teilen: Ende-zu-Ende verschlüsselt. Einmalig. Halte vertrauliche Informationen aus E-Mails, Slack, Teams, WhatsApp oder anderen Kommunikationskanälen heraus. Ein einmaliger Link garantiert, dass deine Geheimnisse nur einmal abgerufen werden können – bevor sie für immer gelöscht werden.",

messages/en.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "Secret Requests are in public beta",
 	"fresh_calm_heron_note": "New:",
 	"tidy_swift_fox_close": "Dismiss",
+	"quick_proud_lion_guide": "Use Cases",
+	"warm_calm_hawk_defend": "For IT & Security Teams",
+	"clear_pure_owl_advise": "For Legal & Compliance",
+	"brave_sharp_fox_report": "For Journalists",
+	"kind_warm_bear_assist": "For Customer Support",
+	"soft_quiet_deer_wait": "Coming soon",
+	"plain_wise_crane_navigate": "Menu",
 	"front_fun_husky_pray": "Set new password",
 	"clear_lost_goose_beam": "Email",
 	"candid_red_lynx_offer": "Scrt.link lets you share sensitive information online: End-to-end encrypted. One time. Keep confidential information out of email, Slack, Teams, Whatsapp or any other communication channel. A one-time disposable link guarantees your secrets can only ever be accessed once - before being destroyed forever.",
@@ -147,7 +154,7 @@
 	"giant_smug_lobster_clasp": "Reply with a secret",
 	"hour_lofty_warthog_wish": "Toggle dark mode",
 	"simple_dry_boar_dazzle": "Login",
-	"large_smart_badger_beam": "Sign up free",
+	"large_smart_badger_beam": "Sign up",
 	"tired_inner_cougar_push": "Share an image that is visible for a short period of time.",
 	"fair_red_warbler_bake": "Go premium",
 	"cool_spicy_gopher_earn": "Extend limits, unlock privacy options, read receipts and more.",

messages/es.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "Las solicitudes secretas están en beta pública",
 	"fresh_calm_heron_note": "Nuevo:",
 	"tidy_swift_fox_close": "Descartar",
+	"quick_proud_lion_guide": "Casos de uso",
+	"warm_calm_hawk_defend": "Para equipos de TI y seguridad",
+	"clear_pure_owl_advise": "Para jurídico y cumplimiento",
+	"brave_sharp_fox_report": "Para periodistas",
+	"kind_warm_bear_assist": "Para atención al cliente",
+	"soft_quiet_deer_wait": "Próximamente",
+	"plain_wise_crane_navigate": "Menú",
 	"front_fun_husky_pray": "Establecer nueva contraseña",
 	"clear_lost_goose_beam": "Correo electrónico",
 	"candid_red_lynx_offer": "Scrt.link te permite compartir información sensible en línea: Cifrado de extremo a extremo. Solo una vez. Mantén la información confidencial fuera del correo electrónico, Slack, Teams, Whatsapp u otros canales de comunicación. Un enlace de un solo uso garantiza que tus secretos solo puedan ser accedidos una vez antes de ser eliminados para siempre.",
@@ -147,7 +154,7 @@
 	"giant_smug_lobster_clasp": "Responder con un secreto",
 	"hour_lofty_warthog_wish": "Activar modo oscuro",
 	"simple_dry_boar_dazzle": "Iniciar sesión",
-	"large_smart_badger_beam": "Regístrate gratis",
+	"large_smart_badger_beam": "Regístrate",
 	"tired_inner_cougar_push": "Comparte una imagen que será visible por un corto período de tiempo.",
 	"fair_red_warbler_bake": "Hazte Premium",
 	"cool_spicy_gopher_earn": "Amplía los límites, desbloquea opciones de privacidad, recibos de lectura y más.",

messages/fr.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "Les demandes secrètes sont en version bêta publique",
 	"fresh_calm_heron_note": "Nouveau :",
 	"tidy_swift_fox_close": "Ignorer",
+	"quick_proud_lion_guide": "Cas d'usage",
+	"warm_calm_hawk_defend": "Pour les équipes IT & sécurité",
+	"clear_pure_owl_advise": "Pour le juridique & la conformité",
+	"brave_sharp_fox_report": "Pour les journalistes",
+	"kind_warm_bear_assist": "Pour le support client",
+	"soft_quiet_deer_wait": "Bientôt disponible",
+	"plain_wise_crane_navigate": "Menu",
 	"front_fun_husky_pray": "Définir un nouveau mot de passe",
 	"clear_lost_goose_beam": "Email",
 	"candid_red_lynx_offer": "Scrt.link vous permet de partager des informations sensibles en ligne : Chiffrement de bout en bout. Une seule fois. Gardez les informations confidentielles hors des emails, Slack, Teams, Whatsapp ou tout autre canal de communication. Un lien jetable garantit que vos secrets ne peuvent être consultés qu'une seule fois - avant d'être détruits à jamais.",

messages/pt.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "Solicitações Secretas estão em beta público",
 	"fresh_calm_heron_note": "Novo:",
 	"tidy_swift_fox_close": "Dispensar",
+	"quick_proud_lion_guide": "Casos de uso",
+	"warm_calm_hawk_defend": "Para equipes de TI e segurança",
+	"clear_pure_owl_advise": "Para jurídico e conformidade",
+	"brave_sharp_fox_report": "Para jornalistas",
+	"kind_warm_bear_assist": "Para suporte ao cliente",
+	"soft_quiet_deer_wait": "Em breve",
+	"plain_wise_crane_navigate": "Menu",
 	"front_fun_husky_pray": "Definir nova senha",
 	"clear_lost_goose_beam": "E-mail",
 	"candid_red_lynx_offer": "O Scrt.link permite compartilhar informações sensíveis online: Criptografia ponta a ponta. Uso único. Mantenha informações confidenciais fora do e-mail, Slack, Teams, WhatsApp ou qualquer outro canal de comunicação. Um link descartável de uso único garante que seus segredos só possam ser acessados uma vez — antes de serem destruídos para sempre.",
@@ -147,7 +154,7 @@
 	"giant_smug_lobster_clasp": "Responder com um segredo",
 	"hour_lofty_warthog_wish": "Alternar modo escuro",
 	"simple_dry_boar_dazzle": "Login",
-	"large_smart_badger_beam": "Criar conta grátis",
+	"large_smart_badger_beam": "Criar conta",
 	"tired_inner_cougar_push": "Partilhe uma imagem visível por um curto período de tempo.",
 	"fair_red_warbler_bake": "Torne-se premium",
 	"cool_spicy_gopher_earn": "Aumente os limites, desbloqueie opções de privacidade, recibos de leitura e muito mais.",

messages/ru.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "Секретные запросы находятся в публичной бета-версии",
 	"fresh_calm_heron_note": "Новое:",
 	"tidy_swift_fox_close": "Отклонить",
+	"quick_proud_lion_guide": "Сценарии использования",
+	"warm_calm_hawk_defend": "Для IT и служб безопасности",
+	"clear_pure_owl_advise": "Для юристов и комплаенса",
+	"brave_sharp_fox_report": "Для журналистов",
+	"kind_warm_bear_assist": "Для службы поддержки",
+	"soft_quiet_deer_wait": "Скоро",
+	"plain_wise_crane_navigate": "Меню",
 	"front_fun_husky_pray": "Установить новый пароль",
 	"clear_lost_goose_beam": "Электронная почта",
 	"candid_red_lynx_offer": "Scrt.link позволяет вам делиться конфиденциальной информацией онлайн: сквозное шифрование. Один раз. Держите конфиденциальную информацию вне электронной почты, Slack, Teams, WhatsApp или других каналов связи. Одноразовая ссылка гарантирует, что ваши секреты могут быть просмотрены только один раз, после чего они навсегда удаляются.",
@@ -147,7 +154,7 @@
 	"giant_smug_lobster_clasp": "Ответить секретом",
 	"hour_lofty_warthog_wish": "Переключить темный режим",
 	"simple_dry_boar_dazzle": "Войти",
-	"large_smart_badger_beam": "Бесплатная регистрация",
+	"large_smart_badger_beam": "Регистрация",
 	"tired_inner_cougar_push": "Поделитесь изображением, которое будет доступно в течение короткого времени.",
 	"fair_red_warbler_bake": "Перейти на Премиум",
 	"cool_spicy_gopher_earn": "Расширьте лимиты, разблокируйте настройки конфиденциальности, подтверждения прочтения и многое другое.",

messages/zh-CN.json

@@ -3,6 +3,13 @@
 	"bright_warm_otter_share": "秘密请求处于公开测试阶段",
 	"fresh_calm_heron_note": "新增：",
 	"tidy_swift_fox_close": "关闭",
+	"quick_proud_lion_guide": "应用场景",
+	"warm_calm_hawk_defend": "IT 与安全团队",
+	"clear_pure_owl_advise": "法务与合规",
+	"brave_sharp_fox_report": "记者",
+	"kind_warm_bear_assist": "客户支持",
+	"soft_quiet_deer_wait": "即将推出",
+	"plain_wise_crane_navigate": "菜单",
 	"front_fun_husky_pray": "设置新密码",
 	"clear_lost_goose_beam": "电子邮件",
 	"candid_red_lynx_offer": "Scrt.link 让您可以在线共享敏感信息：端到端加密，仅可访问一次。请勿在电子邮件、Slack、Teams、WhatsApp 或其他通信渠道中分享机密信息。一键式链接可确保您的秘密仅可访问一次，然后永久删除。",
@@ -147,7 +154,7 @@
 	"giant_smug_lobster_clasp": "用秘密回复",
 	"hour_lofty_warthog_wish": "切换深色模式",
 	"simple_dry_boar_dazzle": "登录",
-	"large_smart_badger_beam": "免费注册",
+	"large_smart_badger_beam": "注册",
 	"tired_inner_cougar_push": "分享一张仅可查看短时间的图片。",
 	"fair_red_warbler_bake": "升级为高级版",
 	"cool_spicy_gopher_earn": "扩展限制，解锁隐私选项，阅读回执等更多功能。",

src/lib/components/blocks/header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Factory, Plus, Sparkles, User, X } from '@lucide/svelte';
+	import { Factory, Menu, Plus, Sparkles, X } from '@lucide/svelte';
 	import Plane from '@lucide/svelte/icons/plane';
 	import Rocket from '@lucide/svelte/icons/rocket';
 	import { PersistedState } from 'runed';
@@ -12,7 +12,7 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { appName } from '$lib/data/app';
 	import { TierOptions } from '$lib/data/enums';
-	import { secretMenu } from '$lib/data/menu';
+	import { mainNav, secretMenu } from '$lib/data/menu';
 	import { m } from '$lib/paraglide/messages.js';
 	import { localizeHref } from '$lib/paraglide/runtime';
 
@@ -168,15 +168,68 @@
 								{/if}
 							</a>
 						{:else}
-							<Button
-								variant="outline"
-								href={localizeHref('/login')}
-								class="max-sm:h-12 max-sm:w-12"
-							>
-								<span class="max-sm:sr-only">{m.simple_dry_boar_dazzle()}</span>
-								<User class="h-5 w-5 sm:hidden" />
+							<Button variant="ghost" size="sm" href={localizeHref('/login')}>
+								{m.simple_dry_boar_dazzle()}
+							</Button>
+							<Button variant="outline" size="sm" href={localizeHref('/signup')}>
+								{m.large_smart_badger_beam()}
 							</Button>
-							<Button href={localizeHref('/signup')}>{m.large_smart_badger_beam()}</Button>
+						{/if}
+
+						{#if !isMinimal}
+							<DropdownMenu.Root>
+								<DropdownMenu.Trigger>
+									{#snippet child({ props })}
+										<Button {...props} variant="ghost" size="icon">
+											{#if props['data-state'] === 'open'}
+												<X class="h-5 w-5" />
+											{:else}
+												<Menu class="h-5 w-5" />
+											{/if}
+											<span class="sr-only">{m.plain_wise_crane_navigate()}</span>
+										</Button>
+									{/snippet}
+								</DropdownMenu.Trigger>
+								<DropdownMenu.Content
+									class="max-h-[calc(100vh-5rem)] w-72 overflow-y-auto sm:w-lg sm:p-6"
+									align="end"
+									sideOffset={-3}
+								>
+									<DropdownMenu.Arrow class="text-border" width={8} height={6} />
+
+									<div class="sm:grid sm:grid-cols-2 sm:gap-x-2">
+										{#each mainNav() as group, groupIndex (group.title)}
+											{#if groupIndex > 0}
+												<DropdownMenu.Separator class="sm:hidden" />
+											{/if}
+											<DropdownMenu.Group>
+												<DropdownMenu.Label>{group.title}</DropdownMenu.Label>
+												{#each group.items as item (item.href)}
+													{#if 'disabled' in item && item.disabled}
+														<DropdownMenu.Item
+															disabled
+															class="flex items-center justify-between opacity-60"
+														>
+															<span>{item.label}</span>
+															<span
+																class="bg-muted text-muted-foreground ms-2 shrink-0 rounded px-1.5 py-0.5 text-[0.65rem] font-medium tracking-wide whitespace-nowrap uppercase"
+															>
+																{m.soft_quiet_deer_wait()}
+															</span>
+														</DropdownMenu.Item>
+													{:else}
+														<DropdownMenu.Item>
+															{#snippet child({ props })}
+																<a href={localizeHref(item.href)} {...props}>{item.label}</a>
+															{/snippet}
+														</DropdownMenu.Item>
+													{/if}
+												{/each}
+											</DropdownMenu.Group>
+										{/each}
+									</div>
+								</DropdownMenu.Content>
+							</DropdownMenu.Root>
 						{/if}
 					</div>
 				</Container>

src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cubicOut } from 'svelte/easing';
+	import { scale } from 'svelte/transition';
 
 	import { cn } from '$lib/client/utils.js';
 
@@ -11,14 +13,22 @@
 </script>
 
 <DropdownMenuPrimitive.Portal>
-	<DropdownMenuPrimitive.Content
-		{sideOffset}
-		class={cn(
-			'bg-popover text-popover-foreground border-border z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-hidden',
-			className
-		)}
-		{...$$restProps}
-	>
-		<slot />
+	<DropdownMenuPrimitive.Content {sideOffset} forceMount {...$$restProps}>
+		{#snippet child({ wrapperProps, props, open })}
+			{#if open}
+				<div {...wrapperProps}>
+					<div
+						{...props}
+						transition:scale={{ start: 0.9, duration: 180, easing: cubicOut }}
+						class={cn(
+							'bg-popover text-popover-foreground border-border z-50 min-w-32 origin-(--bits-floating-transform-origin) rounded-md border p-1 shadow-md focus:outline-hidden',
+							className
+						)}
+					>
+						<slot />
+					</div>
+				</div>
+			{/if}
+		{/snippet}
 	</DropdownMenuPrimitive.Content>
 </DropdownMenuPrimitive.Portal>

src/lib/components/ui/dropdown-menu/index.ts

@@ -16,12 +16,15 @@ const Root = DropdownMenuPrimitive.Root;
 const Trigger = DropdownMenuPrimitive.Trigger;
 const Group = DropdownMenuPrimitive.Group;
 const Portal = DropdownMenuPrimitive.Portal;
+const Arrow = DropdownMenuPrimitive.Arrow;
 
 export {
+	Arrow,
 	CheckboxItem,
 	Content,
 	//
 	Root as DropdownMenu,
+	Arrow as DropdownMenuArrow,
 	CheckboxItem as DropdownMenuCheckboxItem,
 	Content as DropdownMenuContent,
 	Group as DropdownMenuGroup,

src/lib/data/menu.ts

@@ -139,6 +139,50 @@ const gdpr = () => ({
 	label: 'GDPR'
 });
 
+export const useCasesMenu = () => [
+	{
+		href: '/use-cases/it',
+		label: m.warm_calm_hawk_defend(),
+		disabled: true
+	},
+	{
+		href: '/use-cases/legal',
+		label: m.clear_pure_owl_advise(),
+		disabled: true
+	},
+	{
+		href: '/use-cases/journalists',
+		label: m.brave_sharp_fox_report(),
+		disabled: true
+	},
+	{
+		href: '/use-cases/support',
+		label: m.kind_warm_bear_assist(),
+		disabled: true
+	}
+];
+
+export const mainNav = () => [
+	{
+		title: m.quick_proud_lion_guide(),
+		items: useCasesMenu()
+	},
+	{
+		title: m.tiny_suave_nils_accept(),
+		items: productMenu().filter((item) =>
+			['/business', '/pricing', '/api-documentation'].includes(item.href)
+		)
+	},
+	{
+		title: m.chunky_raw_osprey_dial(),
+		items: companyMenu().filter((item) => ['/about', '/blog', '/security'].includes(item.href))
+	},
+	{
+		title: m.equal_away_frog_aim(),
+		items: helpMenu().filter((item) => ['/faq', '/contact'].includes(item.href))
+	}
+];
+
 // Menus
 export const legalMenu = () => [
 	tos(),