From c0b9ad57db9471375270cc9d2b5dfe21b3544044 Mon Sep 17 00:00:00 2001
From: Yusur Princeps <sakuragasaki46@gmail.com>
Date: Tue, 21 Oct 2025 14:18:12 +0200
Subject: [PATCH] improve menu layout

---
 src/lib/GuildMenu.svelte |  7 ++-----
 src/lib/HomeMenu.svelte  | 11 ++++-------
 src/lib/MenuLink.svelte  | 33 +++++++++++++++++++++++++++++++++
 src/lib/UserMenu.svelte  |  3 ++-
 4 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/MenuLink.svelte

diff --git a/src/lib/GuildMenu.svelte b/src/lib/GuildMenu.svelte
index d6eb6f0..f881729 100644
--- a/src/lib/GuildMenu.svelte
+++ b/src/lib/GuildMenu.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
     import { RiHome2Line, RiUserLine } from "svelte-remixicon";
     import type { GuildEntry } from "./backend";
+    import MenuLink from "./MenuLink.svelte";
 
 let { guild } : { guild: GuildEntry } = $props();
 </script>
 
 
 <ul class="column">
-    <li>
-    <a href="/+{guild.name}">
-        <RiHome2Line />
-        Home</a>
-    </li>
+   <MenuLink href="/+{guild.name}" icon={RiHome2Line} label="Home" />
 </ul>
\ No newline at end of file
diff --git a/src/lib/HomeMenu.svelte b/src/lib/HomeMenu.svelte
index 4309803..149424d 100644
--- a/src/lib/HomeMenu.svelte
+++ b/src/lib/HomeMenu.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import { RiHome2Line, RiSettings2Line, RiSettingsLine } from 'svelte-remixicon';
+  import { RiHome2Line, RiSettings2Line } from 'svelte-remixicon';
+    import MenuLink from './MenuLink.svelte';
 
 </script>
 
 <ul class="column">
-  <li>
-    <a href="/"><RiHome2Line /> Home</a>
-  </li>
-  <li>
-    <a href="/settings"><RiSettings2Line /> Settings</a>
-  </li>
+  <MenuLink href="/" icon={RiHome2Line} label="Home" />
+  <MenuLink href="/settings" icon={RiSettings2Line} label="Settings" />
 </ul>
diff --git a/src/lib/MenuLink.svelte b/src/lib/MenuLink.svelte
new file mode 100644
index 0000000..04e7da2
--- /dev/null
+++ b/src/lib/MenuLink.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+
+    let { icon, label, href } = $props();
+    let Icon = $derived(icon);
+</script>
+
+<li>
+    <a {href}> 
+        <Icon />
+        {label}
+    </a>
+</li>
+
+<style>
+li {
+    min-height: 2em;
+    padding: .5em;
+    border-radius: .5em;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--accent);
+}
+
+li:has(a:hover) {
+    background-color: var(--background);
+}
+</style>
\ No newline at end of file
diff --git a/src/lib/UserMenu.svelte b/src/lib/UserMenu.svelte
index 17f7d3a..0733732 100644
--- a/src/lib/UserMenu.svelte
+++ b/src/lib/UserMenu.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { RiUserLine } from "svelte-remixicon";
     import type { UserEntry } from "./backend";
+    import MenuLink from "./MenuLink.svelte";
 
 let { user } : { user: UserEntry } = $props();
 </script>
 
 
 <ul class="column">
-      <li><RiUserLine /> <a href="/@{user.username}">Profile</a></li>
+    <MenuLink icon={RiUserLine} href="/@{user.username}" label="Profile" />
 </ul>
\ No newline at end of file