From: PhiTux <redacted>
Date: Wed, 22 Oct 2025 15:59:22 +0000 (+0200)
Subject: changed navbar buttons to dropdown
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=4959130f4a6576ca4afd693a64f9b75823d69acf;p=DailyTxT.git

changed navbar buttons to dropdown
---

diff --git a/README.md b/README.md
index 770f56b..0b291ae 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,7 @@ The old version 1 is moved to the [v1 branch](https://github.com/PhiTux/DailyTxT
 - Added a feature to choose the first day of the week (Monday or Sunday) in the settings.
 - When a date is selected, the cursor is now placed at the end of the text (not at the beginning).
 - CSS fixes
+- Changed Navbar-buttons to dropdown-menu
 
 2.0.0-testing.3 (2025-10-13)
 - Updated the migration process in the frontend. When migration fails on serverside, the user now gets notified.
diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 03ad568..bdf5346 100644
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -23,7 +23,7 @@
 	} from '$lib/helpers.js';
 	import { templates } from '$lib/templateStore';
 	import {
-		faRightFromBracket,
+		faPersonRunning,
 		faGlasses,
 		faPencil,
 		faSliders,
@@ -918,6 +918,27 @@
 
 	let currentUser = $state(localStorage.getItem('user'));
 
+	// Random smiley for greeting
+	const smileys = [
+		'😊',
+		'😄',
+		'👍',
+		'🎉',
+		'🙌',
+		'🤗',
+		'😎',
+		'✨',
+		'🌟',
+		'🥳',
+		'😇',
+		'🥇',
+		'🚀',
+		'🌞'
+	];
+	function pickSmiley() {
+		return smileys[Math.floor(Math.random() * smileys.length)];
+	}
+
 	function changeUsername() {
 		changeUsernameSuccess = false;
 		changeUsernameError = '';
@@ -1167,21 +1188,54 @@
 			</div>
 
 			<div class="col-lg-4 col-sm-5 col pe-0 d-flex flex-row justify-content-end">
-				<button
-					class="btn btn-outline-secondary me-2 position-relative"
-					onclick={openSettingsModal}
-				>
-					<Fa icon={faSliders} />
-					{#if updateAvailable}
-						<FaLayers class="position-absolute top-0 start-100 translate-middle">
-							<Fa icon={faCircle} size="1.2x" color="white" />
-							<Fa icon={faCircleUp} size="1.2x" class="text-info" />
-						</FaLayers>
-					{/if}
-				</button>
-				<button class="btn btn-outline-secondary" onclick={() => logout(null)}
-					><Fa icon={faRightFromBracket} /></button
-				>
+				<div class="dropdown">
+					<button
+						type="button"
+						class="btn btn-outline-secondary dropdown-toggle"
+						data-bs-toggle="dropdown"
+						aria-expanded="false"
+					>
+						<Fa icon={faSliders} />
+						{#if updateAvailable}
+							<FaLayers class="position-absolute top-0 start-100 translate-middle">
+								<Fa icon={faCircle} size="1.2x" color="white" />
+								<Fa icon={faCircleUp} size="1.2x" class="text-info" />
+							</FaLayers>
+						{/if}
+					</button>
+					<div class="dropdown-menu dropdown-menu-end glass-shadow p-4 greet-menu">
+						<div class="d-flex flex-row justify-content-center mb-3">
+							<h3 class="greeting">
+								{@html $t('navbar.greeting', {
+									user: `<span class="username">${currentUser}</span>`
+								})}
+								{pickSmiley()}
+							</h3>
+						</div>
+						<div class="d-flex flex-row justify-content-center">
+							<button
+								class="btn btn-outline-secondary position-relative"
+								onclick={openSettingsModal}
+								data-bs-toggle="dropdown"
+							>
+								{$t('settings.title')}
+								<Fa icon={faSliders} />
+								{#if updateAvailable}
+									<FaLayers class="position-absolute top-0 start-100 translate-middle">
+										<Fa icon={faCircle} size="1.2x" color="white" />
+										<Fa icon={faCircleUp} size="1.2x" class="text-info" />
+									</FaLayers>
+								{/if}
+							</button>
+						</div>
+						<hr />
+						<div class="d-flex flex-row">
+							<button class="btn btn-outline-danger ms-auto" onclick={() => logout(null)}
+								>Logout <Fa icon={faPersonRunning} /></button
+							>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</nav>
@@ -2688,6 +2742,21 @@
 		border-top: 0 !important;
 		border-left: 0 !important;
 		border-right: 0 !important;
+		z-index: 15;
+	}
+
+	/* Limit settings dropdown width on viewport and keep greeting on one line when possible */
+	.greet-menu {
+		max-width: calc(100vw - 50px);
+		width: max-content; /* shrink-to-fit to content up to max */
+		min-width: 200px;
+		border-radius: 10px;
+	}
+	.greeting {
+		/* Let the dropdown grow up to its max-width and then wrap */
+		white-space: normal;
+		overflow-wrap: anywhere; /* allow breaking long words/usernames */
+		word-break: break-word;
 	}
 
 	/* Allow the stacked absolute children to scroll without forcing the parent to expand */