From faa797f461a57e8a9e115b760af92ab0024f6eed Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 3 Jul 2024 19:22:34 +0200
Subject: [PATCH] feat: improve main nav spacing and open speed

---
 frontend/src/components/home/AppHeader.vue | 21 ++++++++++++++-------
 frontend/src/components/misc/Dropdown.vue  |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index bf13e8e80..3fa49bd8f 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -70,7 +70,7 @@
 						>
 						<span class="username">{{ authStore.userDisplayName }}</span>
 						<span
-							class="icon is-small"
+							class="ml-1 dropdown-icon icon is-small"
 							:style="{
 								transform: open ? 'rotate(180deg)' : 'rotate(0)',
 							}"
@@ -161,13 +161,8 @@ $user-dropdown-width-mobile: 5rem;
 
 	background: var(--site-background);
 
-	@media screen and (max-width: $tablet) {
-		padding-right: .5rem;
-	}
-
 	@media screen and (min-width: $tablet) {
 		padding-left: 2rem;
-		padding-right: 1rem;
 		align-items: stretch;
 	}
 
@@ -263,11 +258,19 @@ $user-dropdown-width-mobile: 5rem;
 }
 
 .username-dropdown-trigger {
-	padding-left: 1rem;
+	padding-left: .75rem;
 	display: inline-flex;
 	align-items: center;
 	font-size: .85rem;
 	font-weight: 700;
+
+	@media screen and (max-width: $tablet) {
+		padding-right: .5rem;
+	}
+
+	@media screen and (min-width: $tablet) {
+		padding-right: .75rem;
+	}
 }
 
 .username {
@@ -278,6 +281,10 @@ $user-dropdown-width-mobile: 5rem;
 	}
 }
 
+.dropdown-icon {
+	transition: transform $transition;
+}
+
 .avatar {
 	border-radius: 100%;
 	vertical-align: middle;
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index e211763bb..98f0e0401 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -22,7 +22,7 @@
 
 		<CustomTransition name="fade">
 			<div
-				v-if="open"
+				v-show="open"
 				class="dropdown-menu"
 			>
 				<div class="dropdown-content">