@aspect-ops/exon-ui 0.2.2 → 0.4.0

package/dist/components/GlobalHeader/GlobalHeader.svelte

@@ -0,0 +1,806 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	export interface NavItem {
+		label: string;
+		href?: string;
+		children?: NavItem[];
+		icon?: string;
+	}
+
+	export interface GlobalHeaderProps {
+		logo?: string | import('svelte').Snippet;
+		logoHref?: string;
+		navItems: NavItem[];
+		variant?: 'default' | 'transparent' | 'floating';
+		sticky?: boolean;
+		showOnScroll?: boolean;
+		mobileBreakpoint?: number;
+		class?: string;
+		actions?: import('svelte').Snippet;
+		mobileMenu?: import('svelte').Snippet;
+	}
+
+	interface Props extends GlobalHeaderProps {
+		logo?: string | import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		mobileMenu?: import('svelte').Snippet;
+	}
+
+	let {
+		logo,
+		logoHref = '/',
+		navItems,
+		variant = 'default',
+		sticky = true,
+		showOnScroll = false,
+		mobileBreakpoint = 768,
+		class: className = '',
+		actions,
+		mobileMenu
+	}: Props = $props();
+
+	let mobileMenuOpen = $state(false);
+	let openDropdown = $state<number | null>(null);
+	let openMobileSubmenu = $state<number | null>(null);
+	let isScrollingUp = $state(true);
+	let lastScrollY = $state(0);
+	let headerElement: HTMLElement | null = $state(null);
+
+	function toggleMobileMenu() {
+		mobileMenuOpen = !mobileMenuOpen;
+		if (typeof document !== 'undefined') {
+			if (mobileMenuOpen) {
+				document.body.style.overflow = 'hidden';
+			} else {
+				document.body.style.overflow = '';
+			}
+		}
+	}
+
+	function closeMobileMenu() {
+		mobileMenuOpen = false;
+		if (typeof document !== 'undefined') {
+			document.body.style.overflow = '';
+		}
+	}
+
+	function toggleDropdown(index: number) {
+		openDropdown = openDropdown === index ? null : index;
+	}
+
+	function closeDropdown() {
+		openDropdown = null;
+	}
+
+	function toggleMobileSubmenu(index: number) {
+		openMobileSubmenu = openMobileSubmenu === index ? null : index;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			if (mobileMenuOpen) {
+				closeMobileMenu();
+			}
+			if (openDropdown !== null) {
+				closeDropdown();
+			}
+		}
+	}
+
+	function handleScroll() {
+		if (!showOnScroll) return;
+
+		const currentScrollY = window.scrollY;
+
+		if (currentScrollY > lastScrollY && currentScrollY > 100) {
+			// Scrolling down
+			isScrollingUp = false;
+		} else if (currentScrollY < lastScrollY) {
+			// Scrolling up
+			isScrollingUp = true;
+		}
+
+		lastScrollY = currentScrollY;
+	}
+
+	onMount(() => {
+		if (showOnScroll) {
+			window.addEventListener('scroll', handleScroll, { passive: true });
+		}
+	});
+
+	onDestroy(() => {
+		if (typeof window !== 'undefined' && showOnScroll) {
+			window.removeEventListener('scroll', handleScroll);
+		}
+		if (typeof document !== 'undefined') {
+			document.body.style.overflow = '';
+		}
+	});
+
+	const variantClass = $derived(
+		variant === 'transparent'
+			? 'global-header--transparent'
+			: variant === 'floating'
+				? 'global-header--floating'
+				: ''
+	);
+
+	const stickyClass = $derived(sticky ? 'global-header--sticky' : '');
+	const scrollClass = $derived(showOnScroll && !isScrollingUp ? 'global-header--hidden' : '');
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<header
+	bind:this={headerElement}
+	class="global-header {variantClass} {stickyClass} {scrollClass} {className}"
+>
+	<div class="global-header__container">
+		{#if logo}
+			<a href={logoHref} class="global-header__logo">
+				{#if typeof logo === 'string'}
+					<img src={logo} alt="Logo" class="global-header__logo-img" />
+				{:else}
+					{@render logo()}
+				{/if}
+			</a>
+		{/if}
+
+		<nav class="global-header__nav" aria-label="Main navigation">
+			<ul class="global-header__nav-list">
+				{#each navItems as item, index}
+					<li
+						class="global-header__nav-item"
+						onmouseenter={() => item.children && item.children.length > 0 && (openDropdown = index)}
+						onmouseleave={() => item.children && item.children.length > 0 && (openDropdown = null)}
+					>
+						{#if item.children && item.children.length > 0}
+							{#if item.href}
+								<div class="global-header__nav-item-split">
+									<a
+										href={item.href}
+										class="global-header__nav-link global-header__nav-link--with-dropdown"
+									>
+										{#if item.icon}
+											<span class="global-header__nav-icon">{item.icon}</span>
+										{/if}
+										{item.label}
+									</a>
+									<button
+										type="button"
+										class="global-header__dropdown-toggle"
+										onclick={() => toggleDropdown(index)}
+										aria-expanded={openDropdown === index}
+										aria-haspopup="true"
+										aria-label="Toggle {item.label} menu"
+									>
+										<span class="global-header__dropdown-arrow" aria-hidden="true">▼</span>
+									</button>
+								</div>
+							{:else}
+								<button
+									type="button"
+									class="global-header__nav-link global-header__nav-link--dropdown"
+									onclick={() => toggleDropdown(index)}
+									aria-expanded={openDropdown === index}
+									aria-haspopup="true"
+								>
+									{#if item.icon}
+										<span class="global-header__nav-icon">{item.icon}</span>
+									{/if}
+									{item.label}
+									<span class="global-header__dropdown-arrow" aria-hidden="true">▼</span>
+								</button>
+							{/if}
+
+							{#if openDropdown === index}
+								<ul class="global-header__dropdown" role="menu">
+									{#each item.children as child}
+										<li role="none">
+											<a
+												href={child.href || '#'}
+												class="global-header__dropdown-item"
+												role="menuitem"
+												onclick={closeDropdown}
+											>
+												{#if child.icon}
+													<span class="global-header__nav-icon">{child.icon}</span>
+												{/if}
+												{child.label}
+											</a>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						{:else}
+							<a href={item.href || '#'} class="global-header__nav-link">
+								{#if item.icon}
+									<span class="global-header__nav-icon">{item.icon}</span>
+								{/if}
+								{item.label}
+							</a>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		</nav>
+
+		{#if actions}
+			<div class="global-header__actions">
+				{@render actions()}
+			</div>
+		{/if}
+
+		<button
+			type="button"
+			class="global-header__hamburger"
+			onclick={toggleMobileMenu}
+			aria-expanded={mobileMenuOpen}
+			aria-controls="global-header-mobile-menu"
+			aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+		>
+			<span
+				class="global-header__hamburger-icon"
+				class:global-header__hamburger-icon--open={mobileMenuOpen}
+			>
+				<span></span>
+				<span></span>
+				<span></span>
+			</span>
+		</button>
+	</div>
+
+	{#if mobileMenuOpen}
+		<div
+			id="global-header-mobile-menu"
+			class="global-header__mobile-menu"
+			class:global-header__mobile-menu--open={mobileMenuOpen}
+		>
+			{#if mobileMenu}
+				{@render mobileMenu()}
+			{:else}
+				<nav class="global-header__mobile-nav" aria-label="Mobile navigation">
+					<ul class="global-header__mobile-nav-list">
+						{#each navItems as item, index}
+							<li class="global-header__mobile-nav-item">
+								{#if item.children && item.children.length > 0}
+									<div class="global-header__mobile-nav-group">
+										<div class="global-header__mobile-nav-header">
+											<a
+												href={item.href || '#'}
+												class="global-header__mobile-nav-link global-header__mobile-nav-link--parent"
+												onclick={closeMobileMenu}
+											>
+												{#if item.icon}
+													<span class="global-header__nav-icon">{item.icon}</span>
+												{/if}
+												{item.label}
+											</a>
+											<button
+												type="button"
+												class="global-header__mobile-toggle"
+												onclick={() => toggleMobileSubmenu(index)}
+												aria-expanded={openMobileSubmenu === index}
+												aria-label="Toggle {item.label} submenu"
+											>
+												<span class="global-header__mobile-toggle-icon">
+													{openMobileSubmenu === index ? '−' : '+'}
+												</span>
+											</button>
+										</div>
+										{#if openMobileSubmenu === index}
+											<ul class="global-header__mobile-nav-sublist">
+												{#each item.children as child}
+													<li>
+														<a
+															href={child.href || '#'}
+															class="global-header__mobile-nav-link global-header__mobile-nav-link--child"
+															onclick={closeMobileMenu}
+														>
+															{#if child.icon}
+																<span class="global-header__nav-icon">{child.icon}</span>
+															{/if}
+															{child.label}
+														</a>
+													</li>
+												{/each}
+											</ul>
+										{/if}
+									</div>
+								{:else}
+									<a
+										href={item.href || '#'}
+										class="global-header__mobile-nav-link"
+										onclick={closeMobileMenu}
+									>
+										{#if item.icon}
+											<span class="global-header__nav-icon">{item.icon}</span>
+										{/if}
+										{item.label}
+									</a>
+								{/if}
+							</li>
+						{/each}
+					</ul>
+
+					{#if actions}
+						<div class="global-header__mobile-actions">
+							{@render actions()}
+						</div>
+					{/if}
+				</nav>
+			{/if}
+		</div>
+	{/if}
+</header>
+
+<style>
+	.global-header {
+		--header-bg: var(--color-bg, #ffffff);
+		--header-height: 4rem;
+		--header-text-color: var(--color-text, #1f2937);
+		--header-border-color: var(--color-border, #e5e7eb);
+		--header-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+		--header-z-index: 100;
+
+		position: relative;
+		background: var(--header-bg);
+		border-bottom: 1px solid var(--header-border-color);
+		font-family: inherit;
+		z-index: var(--header-z-index);
+		transition: transform var(--transition-normal, 250ms ease);
+	}
+
+	.global-header--sticky {
+		position: sticky;
+		top: 0;
+	}
+
+	.global-header--transparent {
+		background: transparent;
+		border-bottom: 1px solid transparent;
+		--header-shadow: none;
+	}
+
+	.global-header--floating {
+		margin: var(--space-md, 1rem);
+		border-radius: var(--radius-lg, 0.5rem);
+		box-shadow: var(--header-shadow);
+		border: 1px solid var(--header-border-color);
+	}
+
+	.global-header--hidden {
+		transform: translateY(-100%);
+	}
+
+	.global-header__container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-md, 1rem);
+		max-width: var(--max-width, 80rem);
+		margin: 0 auto;
+		padding: 0 var(--space-md, 1rem);
+		height: var(--header-height);
+	}
+
+	.global-header__logo {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		color: var(--header-text-color);
+		text-decoration: none;
+	}
+
+	.global-header__logo:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.global-header__logo-img {
+		max-height: 2.5rem;
+		height: auto;
+		width: auto;
+	}
+
+	.global-header__nav {
+		display: none;
+		flex: 1;
+		justify-content: center;
+	}
+
+	.global-header__nav-list {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.global-header__nav-item {
+		position: relative;
+	}
+
+	.global-header__nav-link {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		color: var(--header-text-color);
+		text-decoration: none;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		border-radius: var(--radius-md, 0.375rem);
+		transition: all var(--transition-fast, 150ms ease);
+		white-space: nowrap;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font-family: inherit;
+		/* Touch target minimum */
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.global-header__nav-link:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.global-header__nav-link:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.global-header__nav-link--dropdown {
+		width: 100%;
+		text-align: left;
+	}
+
+	.global-header__nav-item-split {
+		display: flex;
+		align-items: center;
+		gap: 0;
+	}
+
+	.global-header__nav-link--with-dropdown {
+		flex: 1;
+		padding-right: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__dropdown-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-sm, 0.5rem);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font-family: inherit;
+		color: var(--header-text-color);
+		border-radius: var(--radius-md, 0.375rem);
+		transition: all var(--transition-fast, 150ms ease);
+		/* Touch target minimum */
+		min-height: var(--touch-target-min, 44px);
+		min-width: 2rem;
+	}
+
+	.global-header__dropdown-toggle:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.global-header__dropdown-toggle:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.global-header__nav-icon {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.global-header__dropdown-arrow {
+		margin-left: var(--space-xs, 0.25rem);
+		font-size: 0.625rem;
+		transition: transform var(--transition-fast, 150ms ease);
+	}
+
+	.global-header__nav-link[aria-expanded='true'] .global-header__dropdown-arrow,
+	.global-header__dropdown-toggle[aria-expanded='true'] .global-header__dropdown-arrow {
+		transform: rotate(180deg);
+	}
+
+	.global-header__dropdown {
+		position: absolute;
+		top: calc(100% + 0.25rem);
+		left: 0;
+		min-width: 12rem;
+		background: var(--color-bg, #ffffff);
+		border: 1px solid var(--header-border-color);
+		border-radius: var(--radius-md, 0.375rem);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		list-style: none;
+		margin: 0;
+		padding: var(--space-xs, 0.25rem);
+		z-index: calc(var(--header-z-index) + 1);
+		animation: dropdown-fade-in 150ms ease-out;
+	}
+
+	.global-header__dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		color: var(--header-text-color);
+		text-decoration: none;
+		font-size: var(--text-sm, 0.875rem);
+		border-radius: var(--radius-sm, 0.25rem);
+		transition: background var(--transition-fast, 150ms ease);
+		white-space: nowrap;
+		/* Touch target minimum */
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.global-header__dropdown-item:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.global-header__dropdown-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.global-header__actions {
+		display: none;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	.global-header__hamburger {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		/* Touch target minimum */
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.global-header__hamburger:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.global-header__hamburger-icon {
+		position: relative;
+		width: 1.5rem;
+		height: 1.25rem;
+	}
+
+	.global-header__hamburger-icon span {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 2px;
+		background: var(--header-text-color);
+		border-radius: var(--radius-full, 9999px);
+		transition: all var(--transition-fast, 150ms ease);
+	}
+
+	.global-header__hamburger-icon span:nth-child(1) {
+		top: 0;
+	}
+
+	.global-header__hamburger-icon span:nth-child(2) {
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.global-header__hamburger-icon span:nth-child(3) {
+		bottom: 0;
+	}
+
+	.global-header__hamburger-icon--open span:nth-child(1) {
+		top: 50%;
+		transform: translateY(-50%) rotate(45deg);
+	}
+
+	.global-header__hamburger-icon--open span:nth-child(2) {
+		opacity: 0;
+	}
+
+	.global-header__hamburger-icon--open span:nth-child(3) {
+		bottom: 50%;
+		transform: translateY(50%) rotate(-45deg);
+	}
+
+	.global-header__mobile-menu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		width: 100%;
+		background: var(--color-bg, #ffffff);
+		border-top: 1px solid var(--header-border-color);
+		border-bottom: 1px solid var(--header-border-color);
+		padding: var(--space-lg, 1.5rem);
+		overflow-y: auto;
+		max-height: calc(100vh - var(--header-height));
+		z-index: calc(var(--header-z-index) - 1);
+		animation: slide-down 200ms ease-out;
+		font-family: inherit;
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+	}
+
+	.global-header__mobile-nav-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__mobile-nav-item {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.global-header__mobile-nav-link {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		padding: var(--space-md, 1rem);
+		color: var(--header-text-color);
+		text-decoration: none;
+		font-size: var(--text-base, 1rem);
+		border-radius: var(--radius-md, 0.375rem);
+		transition: background var(--transition-fast, 150ms ease);
+		/* Touch target minimum */
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.global-header__mobile-nav-link:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+	}
+
+	.global-header__mobile-nav-link:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.global-header__mobile-nav-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__mobile-nav-header {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__mobile-nav-link--parent {
+		flex: 1;
+		padding-right: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__mobile-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem);
+		background: transparent;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		color: var(--header-text-color);
+	}
+
+	.global-header__mobile-toggle:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.global-header__mobile-toggle:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.global-header__mobile-toggle-icon {
+		font-size: 1.25rem;
+		font-weight: 600;
+		line-height: 1;
+	}
+
+	.global-header__mobile-nav-sublist {
+		list-style: none;
+		margin: 0;
+		padding-left: var(--space-lg, 1.5rem);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+		margin-top: var(--space-xs, 0.25rem);
+		animation: slide-down 200ms ease-out;
+	}
+
+	.global-header__mobile-nav-link--child {
+		font-size: var(--text-sm, 0.875rem);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+	}
+
+	.global-header__mobile-actions {
+		margin-top: var(--space-lg, 1.5rem);
+		padding-top: var(--space-lg, 1.5rem);
+		border-top: 1px solid var(--header-border-color);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	@keyframes slide-down {
+		from {
+			opacity: 0;
+			transform: translateY(-1rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes dropdown-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* Desktop breakpoint */
+	@media (min-width: 768px) {
+		.global-header__nav {
+			display: flex;
+		}
+
+		.global-header__actions {
+			display: flex;
+		}
+
+		.global-header__hamburger {
+			display: none;
+		}
+
+		.global-header__mobile-menu {
+			display: none;
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.global-header {
+			--header-bg: var(--color-bg-dark, #1f2937);
+			--header-text-color: var(--color-text-dark, #f9fafb);
+			--header-border-color: var(--color-border-dark, #374151);
+		}
+	}
+</style>