feat(front/NavMenu): put logout button on the Account link under an extendable dropdown menu

src/assets/views/components/NavMenu.svelte

@@ -67,16 +67,19 @@
 		}
 
 		ul {
+			display: flex;
+            flex-direction: column;
+            gap: 8px;
+			align-items: stretch;
 			width: 100%;
 			height: 100%;
 			margin: 0;
 			padding: 0;
 			list-style: none;
-            align-items: center;
 
 			@include large-ge {
-				display: flex;
 				flex-direction: row;
+                align-items: center;
 			}
 		}
 	}

src/assets/views/components/NavMenuDropdown.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import Icon from "../utils/Icon.svelte";
+
+    export let open: boolean = false;
+    let hovered = false;
+
+    function onMouseEnter() {
+        hovered = true;
+    }
+
+    function onMouseLeave() {
+        hovered = false;
+    }
+</script>
+
+<style lang="scss">
+    @import "../../scss/helpers";
+
+	ul {
+		display: flex;
+        flex-direction: column;
+        gap: 8px;
+		margin: 0;
+        padding: 0;
+		list-style: none;
+	}
+
+    @include large-ge() {
+		ul:not(.open) {
+            display: none;
+        }
+
+		ul {
+            position: absolute;
+            top: calc(100% - 3px);
+            right: 0;
+            z-index: 1;
+
+            @include surface(3);
+            padding: 16px;
+            border-top: 3px solid #ffffff1c;
+            border-radius: 0 0 3px 3px;
+		}
+    }
+
+    .icon-container {
+		position: absolute;
+        z-index: 2;
+        left: 50%;
+        top: calc(100% - 8px);
+
+        transition: transform 50ms linear;
+        transform: translateX(-50%);
+
+        &.open {
+            transform: translateX(-50%) translateY(8px) rotateX(180deg);
+        }
+    }
+
+    @include medium-le {
+        .icon-container {
+            display: none;
+        }
+    }
+</style>
+
+<div class="icon-container" class:open={open || hovered}>
+    <Icon name="chevron-down"/>
+</div>
+<ul class:open={open || hovered} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
+    <slot/>
+</ul>

src/assets/views/components/NavMenuItem.svelte

@@ -6,28 +6,35 @@
     export let icon;
     export let text;
     export let action = false;
+    export let hovered = false;
+
+    function onMouseEnter() {
+        hovered = true;
+    }
+
+    function onMouseLeave() {
+        hovered = false;
+    }
 </script>
 
 <style lang="scss">
 	@import "../../scss/helpers";
 
 	li {
+		position: relative;
 		display: flex;
-		flex-direction: row;
+		flex-direction: column;
-		align-items: center;
+		align-items: stretch;
+		gap: 8px;
 
 		line-height: 1;
 
-		@include medium-le {
+		@mixin aHover {
-			&:not(:first-child) {
+			background-color: rgba(0, 0, 0, 0.07);
-				margin-top: 8px;
-			}
-		}
 
-		@include large-ge {
+			@include darkMode {
-            &:not(:first-child) {
+				background-color: rgba(255, 255, 255, 0.07);
-				margin-left: 8px;
+			}
-            }
 		}
 
 		a {
@@ -38,17 +45,23 @@
 			height: auto;
 			padding: 8px;
 
+            white-space: nowrap;
+
 			border-radius: 3px;
 
-			&:hover {
+			text-transform: uppercase;
-				background-color: rgba(0, 0, 0, 0.07);
 
-				@include darkMode {
+			@include medium-le {
-					background-color: rgba(255, 255, 255, 0.07);
+				&:hover {
+					@include aHover;
 				}
 			}
+		}
 
-			text-transform: uppercase;
+		@include large-ge {
+			&:hover > a {
+				@include aHover;
+			}
 		}
 
 		:global(form) {
@@ -69,7 +82,7 @@
 	}
 </style>
 
-<li>
+<li on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
     {#if action}
         <Form action={href} submitIcon={icon} submitText={text}/>
     {:else}
@@ -77,4 +90,5 @@
             <Icon name={icon}/>
             <span class="tip">{text}</span></a>
     {/if}
+    <slot/>
 </li>

src/assets/views/templates/base/BaseNavMenuAuth.svelte

@@ -2,8 +2,11 @@
     import {locals} from "../../../ts/stores.js";
     import NavMenuItem from "../../components/NavMenuItem.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import NavMenuDropdown from "../../components/NavMenuDropdown.svelte";
+    import BaseNavMenuAuthAccountDropdownAdditionalLinks from "./BaseNavMenuAuthAccountDropdownAdditionalLinks.svelte";
 
     export let noLoginLink = false;
+    let accountItemHovered;
 </script>
 
 {#if hasRoute('auth')}
@@ -12,8 +15,12 @@
             <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
         {/if}
 
-        <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
+        <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'} bind:hovered={accountItemHovered}>
-        <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
+            <NavMenuDropdown bind:open={accountItemHovered}>
+                <BaseNavMenuAuthAccountDropdownAdditionalLinks/>
+                <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
+            </NavMenuDropdown>
+        </NavMenuItem>
     {:else if !noLoginLink}
         <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
     {/if}