added tooltip on left menu (#124)

Co-authored-by: appelskrutt34 <[email protected]>

src/lib/components/navbar/LeftMenu.svelte

@@ -11,6 +11,7 @@ import { layoutState } from '$lib/stores/layout-state.js'
 import AlphaIcon from '$lib/components/icons/AlphaIcon.svelte'
 import Logout from '$lib/components/icons/Logout.svelte'
 import Home from '../icons/Home.svelte'
+import Tooltip from "$lib/components/popups/Tooltip.svelte"
 import { onMount } from 'svelte'
 
 let sync
@@ -98,42 +99,56 @@ $: if ($webRTC.call.length || $swarm.voice_channel.some(a => a.address === $user
         on:change={() => selectAvatar()}
         style="width: 0; height: 0;"
       />
-        <div class:border_rgb={in_voice} class="button myavatar" on:click="{() => changeProfilePic()}">
-            {#if !$user.customAvatar}
-            <img class="avatar" src="data:image/png;base64,{avatar}" alt="" />
-            {:else}
-            <img class="avatar custom" src={$user.customAvatar} alt="" />
-            {/if}
-        </div>
-        <div on:click="{() => goto('/dashboard')}" class="button">
-            <Home />
-        </div>
-        <div on:click="{messagesRouteAndMenu}" class="button">
-            <MessageIcon />
-        </div>
-        <div on:click="{groupRouteAndMenu}" class="button">
-            <GroupIcon />
-        </div>
+        <Tooltip title="Avatar">
+            <div class:border_rgb={in_voice} class="button myavatar" on:click="{() => changeProfilePic()}">
+                {#if !$user.customAvatar}
+                <img class="avatar" src="data:image/png;base64,{avatar}" alt="" />
+                {:else}
+                <img class="avatar custom" src={$user.customAvatar} alt="" />
+                {/if}
+            </div>
+        </Tooltip>
+        <Tooltip title="Dashboard">
+            <div on:click="{() => goto('/dashboard')}" class="button">
+                <Home />
+            </div>
+        </Tooltip>
+        <Tooltip title="Messages">
+            <div on:click="{messagesRouteAndMenu}" class="button">
+                <MessageIcon />
+            </div>
+        </Tooltip>
+        <Tooltip title="Groups">
+            <div on:click="{groupRouteAndMenu}" class="button">
+                <GroupIcon />
+            </div>
+        </Tooltip> 
         <!-- <div on:click={() => goto("/boards")} class="button">
             <BoardIcon/>
         </div> -->
         <!-- <a class='button' href="/webrtc"><img class="icon" src={financeIcon} alt="finance"></a> -->
     </div>
     <div class="draggable"></div>
     <div class="nav">
-        <div on:click="{() => goto('/settings/node')}" class="button">
-            <SettingsIcon />
-        </div>
-        <a class='button' href="/" on:click={handleLogout}>
-            <Logout/>
-        </a>
+        <Tooltip title="Settings">
+            <div on:click="{() => goto('/settings/node')}" class="button">
+                <SettingsIcon />
+            </div>
+        </Tooltip>
+        <Tooltip title="Logout">
+            <a class='button' href="/" on:click={handleLogout}>
+                <Logout/>
+            </a>
+        </Tooltip>      
         <XkrLogo grey="{true}" />
-        <div
+        <Tooltip title="Github">
+            <div
             on:click="{() =>
                 openURL('https://github.com/kryptokrona/hugin-desktop/issues/new/choose')}"
         >
             <AlphaIcon />
         </div>
+        </Tooltip> 
     </div>
 </div>
 

src/lib/components/popups/Tooltip.svelte

@@ -0,0 +1,41 @@
+<script>
+    export let title = '';
+
+    let isHovered = false;
+    let x;
+    let y;
+  
+    function mouseOver(event) {
+      isHovered = true;
+      x = event.pageX + 5;
+      y = event.pageY + 5;
+    }
+    function mouseMove(event) {
+      x = event.pageX + 5;
+      y = event.pageY + 5;
+    }
+    function mouseLeave() {
+      isHovered = false;
+    }
+  </script>
+
+  <div on:mouseover={mouseOver} on:mouseleave={mouseLeave} on:mousemove={mouseMove}>
+    <slot />
+  </div>
+
+  {#if isHovered}
+    <div style="top: {y}px; left: {x}px;" class='tooltip'>{title}</div>
+  {/if}
+
+  <style>
+    .tooltip {
+      z-index: 999;
+      border-radius: 4px;
+      padding: 6px;
+      position: absolute;
+      border: 1px solid var(--text-color);
+      color: var(--text-color);
+      background-color: var(--backgound-color);
+    }
+  </style>
+