feat(header/user-menu): adds slotable variant of user menu

IONOS-Productivity · Aug 7, 2024 · 0fae6a9 · 0fae6a9
1 parent 3706ee3
commit 0fae6a9
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 33 deletions.
diff --git a/IONOS/src/components/userMenu/MenuItem.svelte b/IONOS/src/components/userMenu/MenuItem.svelte
@@ -0,0 +1,43 @@
+<svelte:options customElement="ionos-menu-item" />
+
+<script lang="ts">
+	export let icon: string = '';
+	export let label = '';
+	export let link = '';
+</script>
+
+<a href={link}>
+	<div class="icon-and-label">
+		<ionos-icons {...{ [icon]: true }} />
+		<div class="label">{label}</div>
+	</div>
+</a>
+
+<style lang="scss">
+	.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;
+	}
+
+	a:hover {
+		background-color: var(--color-blue-ionos-b1);
+	}
+	a:active {
+		background-color: var(--color-blue-ionos-b2);
+	}
+
+	ionos-icons {
+		display: inline-flex;
+	}
+</style>
diff --git a/IONOS/src/components/UserMenu.svelte → ...S/src/components/userMenu/UserMenu.svelte b/IONOS/src/components/UserMenu.svelte → ...S/src/components/userMenu/UserMenu.svelte
@@ -1,8 +1,6 @@
 <svelte:options customElement="ionos-user-menu" />
 
 <script>
-	import { getCurrentUser } from '@nextcloud/auth';
-	import { translate as t } from '@nextcloud/l10n'
 	import { onDestroy } from 'svelte';
 
 	export let logoutLink = null;
@@ -11,12 +9,12 @@
 
 	export let options = [
 		{
-			label: t('theming', 'Settings'),
+			label: 'Settings',
 			icon: 'settings',
 			link: settingsLink,
 		},
 		{
-			label: t('theming', 'Help & Support'),
+			label: 'Help & Support',
 			icon: 'help',
 			link: helpLink,
 			target: '_blank',
@@ -26,7 +24,7 @@
 	export let onSelect = () => {};
 
 	let showMenu = false;
-	let displayName = getCurrentUser()?.displayName;
+	let displayName = 'Kai';
 
 	function handleLinkClick(option) {
 		onSelect(option);
@@ -66,33 +64,15 @@
 		<div class="menu-title-cell">
 			<div class="cell-content">
 				<div class="user-name">
-					<b>{displayName}</b>
+					<slot name="user-name" />
 				</div>
 			</div>
 		</div>
 		<div class="divider-line" />
 		<div class="dropdown-menu">
-			{#each options as option}
-				{#if option.link}
-					<a
-						href={option.link}
-						target={option.target || '_self'}
-						class="option-content"
-						on:click={() => handleLinkClick(option)}>
-						<div class="icon-and-label">
-							<ionos-icons {...{ [option.icon]: true }} />
-							<div class="label">{option.label}</div>
-						</div>
-					</a>
-				{/if}
-			{/each}
+			<slot name="options" />
 			<div class="divider-line" />
-			<a class="option-content" href={logoutLink} title="Logout">
-				<div class="icon-and-label">
-					<ionos-icons logout />
-					<div class="label">{t('theming', 'Logout')}</div>
-				</div>
-			</a>
+			<slot name="logout" />
 		</div>
 	</div>
 {/if}

diff --git a/IONOS/src/main.ts b/IONOS/src/main.ts
@@ -18,4 +18,5 @@
 
 import './App.svelte';
 import './components/Icon.svelte';
-import './components/UserMenu.svelte';
+import './components/userMenu/UserMenu.svelte';
+import './components/userMenu/MenuItem.svelte';
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
@@ -85,12 +85,33 @@
 					<ionos-icons webmail />
 				</a>
 			<?php } ?>
-		  <div class="usermenu" slot="usermenu" data-qa="IONOS-USER-MENU-TARGET">
-			  <ionos-user-menu
-			  	logoutLink="<?php p(\OC_User::getLogoutUrl(\OC::$server->get(\OCP\IURLGenerator::class)))?>"
-			  	settingsLink="<?php p(\OC::$server->get(\OCP\IURLGenerator::class)->linkToRoute('simplesettings.page.index'))?>"
-			  	helpLink="<?php p(\OC::$server->get(\OC\SystemConfig::class)->getValue('ionos_help_target_link')) ?>" />
-		  </div>
+				<div class="usermenu" slot="usermenu" data-qa="IONOS-USER-MENU-TARGET">
+					<ionos-user-menu>
+						<b slot="user-name">
+							<?php p($_['user_displayname']); ?>
+						</b>
+						<div slot="options">
+							<ionos-menu-item
+								icon="settings"
+								label="<?php p($l->t('Settings')); ?>"
+								link="<?php p(\OC::$server->get(\OCP\IURLGenerator::class)->linkToRoute('settings.PersonalSettings.index')) ?>"
+							></ionos-menu-item>
+
+							<ionos-menu-item
+								icon="help"
+								label="<?php p($l->t('Help & Support'),); ?>"
+								link="<?php p(\OC::$server->get(\OC\SystemConfig::class)->getValue('ionos_help_target_link')) ?>"
+							></ionos-menu-item>
+						</div>
+						<div slot="logout">
+							<ionos-menu-item
+								icon="logout"
+								label="<?php p($l->t('Logout')); ?>"
+								link="<?php p(\OC::$server->get(\OCP\IURLGenerator::class)->linkToRoute('core.logout')) ?>"
+							></ionos-menu-item>
+						</div>
+					</ionos-user-menu>
+				</div>
 			</ionos-global-nav>
 		</header>