Merge pull request #15 from koloml/feature/menu-items-controls

Minor refactoring for menu items, support switching between tagging profiles using radio controls right from the list

src/components/ui/menu/Menu.svelte

@@ -9,11 +9,11 @@
         display: flex;
         flex-direction: column;
 
-        & > :global(a) {
+        & > :global(.menu-item) {
             padding: 5px 24px;
         }
 
-        :global(a) {
+        :global(.menu-item) {
             color: colors.$text;
 
             &:hover {

src/components/ui/menu/MenuItem.svelte

@@ -1,8 +1,8 @@
 <script>
     /**
-     * @type {string}
+     * @type {string|null}
      */
-    export let href;
+    export let href = null;
 
     /**
      * @type {"tag"|"paint-brush"|"arrow-left"|"info-circle"|"wrench"|"globe"|"plus"|null}
@@ -15,19 +15,17 @@
     export let target = undefined;
 </script>
 
-{#if href}
-    <a {href} {target} on:click>
-        {#if icon}
-            <i class="icon icon-{icon}"></i>
-        {/if}
-        <slot></slot>
-    </a>
-{/if}
+<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} on:click role="link" tabindex="0">
+    {#if icon}
+        <i class="icon icon-{icon}"></i>
+    {/if}
+    <slot></slot>
+</svelte:element>
 
 <style lang="scss">
     @use '../../../styles/colors';
 
-    a {
+    .menu-item {
         display: flex;
         align-items: center;
 

src/components/ui/menu/MenuRadioItem.svelte

@@ -0,0 +1,36 @@
+<script>
+    import MenuLink from "$components/ui/menu/MenuItem.svelte";
+
+    /**
+     * @type {boolean}
+     */
+    export let checked;
+
+    /**
+     * @type {string}
+     */
+    export let name;
+
+    /**
+     * @type {string}
+     */
+    export let value;
+
+    /**
+     * @type {string|null}
+     */
+    export let href = null;
+</script>
+
+<MenuLink {href}>
+    <input type="radio" {name} {value} {checked} on:input on:click|stopPropagation>
+    <slot></slot>
+</MenuLink>
+
+<style lang="scss">
+    :global(.menu-item) input {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+    }
+</style>