Default logo URL in navigation component and add setting to hide logo

This commit is contained in:
Andrew Kingston 2021-05-25 08:21:28 +01:00
parent 3f9bdd9589
commit c91fb7d500
2 changed files with 20 additions and 8 deletions

View File

@ -338,6 +338,12 @@
"type": "text", "type": "text",
"label": "Logo URL", "label": "Logo URL",
"key": "logoUrl" "key": "logoUrl"
},
{
"type": "boolean",
"label": "Hide logo",
"key": "hideLogo",
"defaultValue": false
} }
] ]
}, },

View File

@ -5,16 +5,22 @@
const component = getContext("component") const component = getContext("component")
export let logoUrl export let logoUrl
export let hideLogo
</script> </script>
<div class="nav" use:styleable={$component.styles}> <div class="nav" use:styleable={$component.styles}>
<div class="nav__top"> {#if !hideLogo}
<a href="/" use:linkable> <div class="nav__top">
{#if logoUrl} <a href="/" use:linkable>
<img class="logo" alt="logo" src={logoUrl} height="48" /> <img
{/if} class="logo"
</a> alt="logo"
</div> src={logoUrl || "https://i.imgur.com/Dn7Xt1G.png"}
height="48"
/>
</a>
</div>
{/if}
<div class="nav__menu"> <div class="nav__menu">
<slot /> <slot />
</div> </div>
@ -33,6 +39,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 40px;
} }
.nav__top img { .nav__top img {
margin-right: 16px; margin-right: 16px;
@ -52,7 +59,6 @@
.nav__menu { .nav__menu {
display: flex; display: flex;
margin-top: 40px;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;