feat(header): add user menu component

Co-authored-by: Kai Henseler <[email protected]>
Signed-off-by: Kai Henseler <[email protected]>
Signed-off-by: Franziska Bath <[email protected]>

IONOS/src/components/userMenu/UserMenu.svelte

@@ -0,0 +1,153 @@
+<svelte:options customElement="ionos-user-menu" />
+
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	let showMenu = false;
+
+	function toggleMenu() {
+		showMenu = !showMenu;
+	}
+
+	function handleClickOutside(event) {
+		const menu = document.querySelector('ionos-user-menu');
+		if (showMenu && menu && !menu.contains(event.target)) {
+			console.log('click outside triggered');
+			showMenu = false;
+		}
+	}
+
+	document.addEventListener('click', handleClickOutside);
+
+	onDestroy(() => {
+		document.removeEventListener('click', handleClickOutside);
+	});
+</script>
+
+<ionos-icons
+	user
+	on:click={toggleMenu}
+	on:keydown={toggleMenu}
+	tabindex="0"
+	role="button"
+	aria-label="User Menu" />
+
+{#if showMenu}
+	<div class="menu-container">
+		<div class="menu-title-cell">
+			<div class="cell-content">
+				<div class="user-name">
+					<slot name="user-name" />
+				</div>
+			</div>
+		</div>
+		<div class="divider-line" />
+		<div class="dropdown-menu">
+			<slot name="options" />
+			<div class="divider-line" />
+			<slot name="logout" />
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	.menu-container {
+		width: 280px;
+		position: absolute;
+		top: 100%;
+		right: 0;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+		border-radius: 8px;
+		background-color: var(--color-main-background);
+		border: 2px solid var(--color-blue-ionos-b4);
+		box-sizing: border-box;
+		overflow: hidden;
+		font-size: 16px;
+		color: var(--text-color);
+	}
+
+	.logout-icon {
+		height: 24px;
+	}
+
+	.label {
+		flex: 1;
+		position: relative;
+		line-height: 24px;
+		font-weight: 500;
+	}
+
+	.icon-and-label {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+
+	.cell-content {
+		align-self: stretch;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+
+	.divider-line {
+		width: 100%;
+		position: relative;
+		border-top: 1px solid #bcc8d4;
+		box-sizing: border-box;
+		height: 1px;
+		flex-shrink: 0;
+	}
+
+	.user-name {
+		align-self: stretch;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		justify-content: flex-start;
+	}
+
+	.option-content {
+		padding: 16px;
+		gap: 16px;
+	}
+
+	.menu-title-cell {
+		align-self: stretch;
+		background-color: var(--color-blue-ionos-b1);
+		display: flex;
+		padding: 16px;
+		cursor: default;
+	}
+
+	.dropdown-menu {
+		flex: 1 1 0;
+		align-self: stretch;
+		justify-content: flex-start;
+		display: flex;
+		flex-direction: column;
+	}
+
+	a {
+		text-decoration: none;
+		color: var(--text-color);
+	}
+
+	a:hover {
+		background-color: var(--color-blue-ionos-b1);
+	}
+
+	a:active {
+		background-color: var(--color-blue-ionos-b2);
+	}
+
+	ionos-icons {
+		display: inline-flex;
+	}
+</style>

IONOS/src/components/userMenu/UserMenuItem.svelte

@@ -0,0 +1,16 @@
+<svelte:options customElement="ionos-user-menu-item" />
+
+<script lang="ts">
+	import Icon from '../Icon.svelte';
+
+	export let icon: string = '';
+	export let label: string = '';
+	export let link: string = '';
+</script>
+
+<a href={link}>
+	<div class="icon-and-label">
+		<Icon {...{ [icon]: true }} />
+		<div class="label">{label}</div>
+	</div>
+</a>

IONOS/src/main.ts

@@ -18,3 +18,5 @@
 
 import './App.svelte';
 import './components/Icon.svelte';
+import './components/userMenu/UserMenu.svelte';
+import './components/userMenu/UserMenuItem.svelte';