New hamburger menu (#359)

* #354 window border should be all around

* #356 show hamburger menu popup

---------

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

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

@@ -2,9 +2,8 @@
   import { t, locales, locale } from '$libs/translations'; 
 </script>
 
-<section class="flex items-center border border-gray h-8 mt-1 mr-1 px-2 w-full rounded-sm">
-  <i class="icon-world text-gray mt-2"></i>
-  <select bind:value="{$locale}" class="bg-black text-sm text-gray flex-grow">
+<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}

modules/desktop/src/components/side-bar/side-bar.svelte

@@ -23,27 +23,34 @@
     }
   }
 </script>
-<nav class="bg-opacity-20 w-full h-full p-4">
+<nav class="w-full p-2 text-sm">
   {#if $user}
-    <section class="flex rounded-full mb-2">
+    <section class="flex rounded-full mb-2 pl-1">
       <img width="40" height="40" src={$user?.avatar_url || '/images/bored-ape.png'} alt="profile" />
       <div class="text-gray p-2">@{$user?.login}</div>
     </section>
   {:else}
-    <button class="flex border border-gray rounded-sm w-full mb-2 h-8 items-center" on:click={openGithub}>
-      <figure class="p-2">
-        <img width="18" height="18" src="/images/github.png" alt="profile" />
-      </figure>
-      <div class="text-gray">Login</div>
+    <button
+      class={`mt-2 transition-all rounded-sm w-full h-8 pl-1 text-left hover:bg-gray hover:border focus:bg-secondary ${submittedMessage === "syncing..." && "animate-pulse"}`}
+      on:click={openGithub}>
+      login
     </button>
   {/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"/>
   <button
-    class={`mt-2 border transition-all border-gray rounded-sm w-full mb-2 h-8 text-center hover:bg-gray focus:bg-secondary ${submittedMessage === "syncing..." && "animate-pulse"}`}
+    class={`mt-2 transition-all rounded-sm w-full h-8 pl-1 text-left hover:bg-gray  hover:border focus:bg-secondary ${submittedMessage === "syncing..." && "animate-pulse"}`}
     on:click={onSubmitLogs}>
-    SUBMIT LOGS
+    submit logs
   </button>
   {#if submittedMessage}
     <p class="text-gray text-xs mt-2">{submittedMessage}</p>
   {/if}
-</nav>
+</nav>
+
+<style>
+  hr {
+    border-width: 1px;
+  }
+</style>

modules/desktop/src/components/top-bar/profile-nav-button.svelte

@@ -1,26 +1,12 @@
 <script lang="ts">
-	import { authStore, navStore } from '$libs/stores';
-	const { user } = authStore;
-	const deviceId = authStore.deviceIdStore;
+	import { navStore } from '$libs/stores';
 	const { sideNavOpen } = navStore;
 
-
-
 	const toggleSideNav = () => {
-		navStore.sideNavOpen.update((v) => !v);
+		sideNavOpen.update((v) => !v);
 	}
-
 </script>
 
-<button class="flex items-center justify-center py-2" on:click={toggleSideNav}>
-	{#if $user}
-		<figure class="flex gap-2 h-{8} mr-1 border border-gray rounded-md items-center px-1">
-			<div class="text-gray font-inter bg-black">@{$user.login}</div>
-			<div class="overflow-clip w-{6} h-{6} rounded-sm">
-				<img class="w-{6} w-{6} h-{6}" src={$user.avatar_url || '/images/bored-ape.png'} alt="profile" />
-			</div>
-		</figure>
-	{:else}
-		<div class="icon-hamburger-icon-square text-xl mt-2 py-4 px-2 text-gray"></div>
-	{/if}
+<button class="flex items-center justify-center py-2 cursor-default hover:bg-white h-{8} rounded-sm" on:click={toggleSideNav}>
+	<div class="icon-hamburger-icon-square text-xl mt-2 py-4 px-2 text-gray hover:text-black"></div>
 </button>

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

@@ -42,7 +42,7 @@
 	});
 </script>
 
-<div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all font-inter border border-gray rounded-xl`}>
+<div id="main-layout" class="transition-all font-inter border border-gray rounded-xl">
 	<TopBar />
 	<section class="relative" bind:this={view}>
 		<div class="content px-2">
@@ -52,7 +52,7 @@
 	</section>
 	<Footer/>
 </div>
-<aside class={`absolute h-full w-1/4 bg-gray bg-opacity-10 top-0 transition-all  ${$sideNavOpen ? "right-0":"-right-1/4"}`}>
+<aside class={`fixed border border-gray rounded-md  bg-black transition-all  ${$sideNavOpen && "open"}`}>
 	<SideBar/>
 </aside>
 
@@ -75,4 +75,18 @@
 	div {
 		position: relative;
 	}
+
+	aside {
+		top: 52px;
+		right: 5px;
+		width: 190px;
+		overflow: clip;
+		height: 0px;
+		opacity: 0;
+	}
+	
+	aside.open {
+		height: auto;
+		opacity: 1;
+	}
 </style>

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

@@ -3,7 +3,7 @@
 
 	import { page } from '$app/stores';
 	import { t } from '$libs/translations';
-	import { navStore, packagesStore, notificationStore } from '$libs/stores';
+	import { packagesStore, notificationStore } from '$libs/stores';
 	import Packages from '$components/packages/packages.svelte';
 	import { PackageStates, SideMenuOptions, type GUIPackage } from '$libs/types';
 	// import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
@@ -15,7 +15,6 @@
 
 	const log = window.require("electron-log");
 
-	const { sideNavOpen } = navStore; // right side not left
 	const { packages, requireTeaCli } = packagesStore;
 
 	const url = $page.url;
@@ -54,7 +53,7 @@
 <div id="package-container">
 	<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
 </div>
-<header class={`transition-all pl-2 flex flex-col ${$sideNavOpen ? "min": ""} ${packagesScrollY > 100 && 'scrolling'}`}>
+<header class={`transition-all pl-2 flex flex-col ${packagesScrollY > 100 && 'scrolling'}`}>
 	<NotificationBar />
 	<div class="flex justify-between items-center align-middle">
 		<h1 class="text-primary pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
@@ -104,10 +103,6 @@
 		top: 32px;
 	}
 
-	header.min {
-		width: calc(75% - 15px);
-	}
-
 	header.scrolling {
 		height: 60px;
 		background-color: rgba(26,26,26,1);