github.com/Theta-Dev/Talon@v0.0.0-20211018130634-ff179e19fa9a/ui/menu/src/components/MenuItem.svelte (about) 1 <script lang="ts"> 2 export let link: string = null 3 export let text = "" 4 export let active = false 5 export let newTab = false 6 export let privacy = false 7 8 </script> 9 10 <style lang="sass"> 11 @use "../style/values" 12 13 a 14 all: unset 15 16 display: flex 17 flex-direction: row-reverse 18 align-items: center 19 20 text-align: right 21 margin-bottom: 0.2em 22 23 border-radius: 20px 24 25 cursor: pointer 26 27 > span 28 font-size: 1.1em 29 font-weight: bold 30 31 margin-left: auto 32 padding: 0 0.5em 33 34 display: none 35 pointer-events: none 36 37 &:hover, &.active 38 pointer-events: auto 39 background-color: values.$var-primary 40 41 > span, > :global(*) 42 display: flex 43 </style> 44 45 <a 46 class:active 47 href={link} 48 target={newTab ? '_blank' : null} 49 rel={privacy ? 'noopener noreferrer' : null} 50 on:click> 51 <span>{text}</span> 52 <slot /> 53 </a>