improve menu layout

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>
+   <MenuLink href="/+{guild.name}" icon={RiHome2Line} label="Home" />
-    <a href="/+{guild.name}">
-        <RiHome2Line />
-        Home</a>
-    </li>
 </ul>

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>
+  <MenuLink href="/" icon={RiHome2Line} label="Home" />
-    <a href="/"><RiHome2Line /> Home</a>
+  <MenuLink href="/settings" icon={RiSettings2Line} label="Settings" />
-  </li>
-  <li>
-    <a href="/settings"><RiSettings2Line /> Settings</a>
-  </li>
 </ul>

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>

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>