fix: language selector speech bubble, profile menu on mobile, hide redundant hamburger

- LanguageSelector: add speech bubble tail, replace green active with
  nord8 blue + dark text, remove floating gap
- Header: hide hamburger menu on mobile when no links, show profile
  picture directly in top bar instead
- UserHeader: center mobile dropdown, fix tail color/position, add
  profile picture overlay to tuck tail behind, add drop shadow
- Main layout: stop passing empty links snippet

src/lib/components/Header.svelte

@@ -183,6 +183,14 @@ nav{
 	align-items: center;
 	gap: 0.5rem;
 }
+.right-buttons :global(button){
+	margin-bottom: 0 !important;
+}
+.right-buttons :global(#options){
+	top: calc(100% + 10px) !important;
+	bottom: unset !important;
+	right: 0 !important;
+}
 .header-right{
 	display: flex;
 	align-items: center;
@@ -335,8 +343,12 @@ footer{
 <a href="/" aria-label="Home"><Symbol></Symbol></a>
 <div class="right-buttons">
 	{@render language_selector_mobile?.()}
+	{#if links}
 		<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu" />
 		<label for="nav-toggle" class=nav_button aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></label>
+	{:else}
+		{@render right_side?.()}
+	{/if}
 </div>
 </div>
 <div class="header-shadow"></div>

src/lib/components/LanguageSelector.svelte

@@ -194,6 +194,15 @@
 		z-index: 1000;
 		display: none;
 	}
+	.language-options::after {
+		content: "";
+		border: 10px solid transparent;
+		border-bottom-color: var(--bg_color);
+		border-top: 0;
+		position: absolute;
+		top: -10px;
+		right: 1rem;
+	}
 	/* Show via JS toggle */
 	.language-options.open {
 		display: block;
@@ -222,7 +231,9 @@
 		background-color: var(--nord2);
 	}
 	.language-options a.active{
-		background-color: var(--nord14);
+		background-color: var(--nord8);
+		color: var(--nord0);
+		font-weight: 700;
 	}
 </style>
 

src/lib/components/UserHeader.svelte

@@ -81,6 +81,7 @@
 		background-color: var(--bg_color);
 		width: 30ch;
 		padding: 1rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 	}
 	#options ul{
 		color: white;
@@ -116,22 +117,31 @@ h2 + p{
 	#options{
 		top: unset;
 		bottom: calc(100% + 15px);
-		right: -200%;
+		left: 50%;
-		z-index: 99999999999999999999;
+		right: unset;
+		transform: translateX(-50%);
+		z-index: 10;
 	}
 	.top.speech::after {
-	  /* (B2-1) DOWN TRIANGLE */
+	  border: 20px solid transparent;
-	  border-top-color: #a53d38;
+	  border-top-color: var(--bg_color);
-	  border-bottom: 0;
+	  border-bottom-width: 0;
-		z-index: 99999999999999999999;
+	  top: unset;
-
+	  bottom: -20px;
-	  /* (B2-2) POSITION AT BOTTOM */
+	  left: 50%;
-	  bottom: -20px; left: 50%;
 	  margin-left: -20px;
 	}
 	button{
 		margin-bottom: 2rem;
 	}
+	button::before{
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		background: inherit;
+		z-index: 20;
+	}
 }
 </style>
 

src/routes/(main)/+layout.svelte

@@ -8,11 +8,6 @@ let user = $derived(data.session?.user);
 </script>
 
 <Header>
-	{#snippet links()}
-		<ul class=site_header>
-		</ul>
-	{/snippet}
-
 	{#snippet language_selector_mobile()}
 		<LanguageSelector />
 	{/snippet}