#389 select language dropdown (#394)

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

modules/desktop/src/components/popout-menu/popout-menu.svelte

@@ -29,7 +29,6 @@
   }
 
   const hidePopup = () => {
-    console.log("hide poup")
     navStore.sideNavOpen.set(false);
   }
 </script>
@@ -49,7 +48,7 @@
   {/if}
   <hr class="mt-2 border border-gray border-b-0  border-t-0"/>
   <SelectLang/>
-  <hr class="mt-2 border border-gray border-b-0  border-t-0"/>
+  <hr class="border border-gray border-b-0  border-t-0"/>
   <button
     class="mt-2 p-1 transition-all rounded-sm w-full h-8 text-left hover:bg-gray hover:border focus:bg-secondary"
     class:animate-pulse={submittedMessage === "syncing..."}

modules/desktop/src/components/select-lang/select-lang.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
   import { t, locales, locale } from '$libs/translations'; 
+  import SelectExpand from "@tea/ui/select-expand/select-expand.svelte";
+
+  const label = "Language";
 </script>
 
-<section class="flex h-8 mt-1 w-full hover:bg-gray hover:border">
-  <select bind:value="{$locale}" class="bg-black hover:bg-gray text-sm text-white flex-grow">
-    {#each $locales as value}
-      <option value="{value}">{$t(`lang.${value}`)}</option>
-    {/each}
-  </select>
-</section>
+<SelectExpand
+  {label}
+  bind:value={$locale}
+  options={$locales.map((value) => ({
+    label: $t(`lang.${value}`),
+    value,
+    selected: value === $locale,
+  }))}
+/>

modules/desktop/src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 	import { navigating } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
 	import TopBar from '$components/top-bar/top-bar.svelte';
-	import SideBar from '$components/side-bar/side-bar.svelte';
+	import PopoutMenu from '$components/popout-menu/popout-menu.svelte';
 	import Footer from '$components/footer/footer.svelte';
 	import { navStore, packagesStore } from '$libs/stores';
 	import { listenToChannel } from "@native";
@@ -54,7 +54,7 @@
 </div>
 {#if $sideNavOpen}
 	<aside class="fixed z-50 border border-gray rounded-md  bg-black transition-all">
-		<SideBar/>
+		<PopoutMenu/>
 	</aside>
 {/if}
 

modules/ui/src/select-expand/select-expand.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	export let options: { label: string; value: string; selected?: boolean }[] = [];
+	export let label = "";
+	export let value = "";
+</script>
+
+<section class="cursor-pointer">
+	<header
+		class="mt-2 flex h-8 justify-between rounded-sm px-1 hover:border hover:bg-gray focus:bg-secondary"
+	>
+		<span>{label || value}</span>
+		<i class="icon-downward-arrow mt-1" />
+	</header>
+	<hr class="mb-2" />
+	<div class="dropdown pr-2 transition-all">
+		{#each options as option}
+			<button
+				class="flex h-6 w-full items-center justify-between gap-x-1 rounded-sm px-2 text-xs hover:bg-gray"
+				on:click={() => (value = option.value)}
+			>
+				<div>{option.label}</div>
+				{#if option.selected}
+					<i class="selected icon-check-circle" />
+				{/if}
+			</button>
+		{/each}
+	</div>
+</section>
+
+<style>
+	hr {
+		display: none;
+	}
+	header {
+		line-height: 2em;
+	}
+	section .dropdown {
+		max-height: 0px;
+		overflow: hidden;
+	}
+
+	section:hover {
+		height: auto;
+	}
+	section:hover header {
+		margin-bottom: 10px;
+	}
+
+	section:hover hr {
+		display: block;
+	}
+	section:hover .dropdown {
+		max-height: 100px;
+		overflow-y: scroll;
+		margin-bottom: 10px;
+	}
+
+	/* width */
+	::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #272626;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #949494;
+		border-radius: 4px;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: white;
+	}
+
+	.selected {
+		color: #00ffd0;
+	}
+</style>