generated from cms/tibi-docs
55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
export let active = false
|
||
|
|
export let opened = false
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="header">
|
||
|
|
<div class="logo">
|
||
|
|
<img src="/media/Logo Quer.svg" alt="Logo Quer" />
|
||
|
|
</div>
|
||
|
|
<button class="menu" on:click="{() => (active = !active)}">
|
||
|
|
<div>MENÜ</div>
|
||
|
|
{#if opened}
|
||
|
|
<img src="/media/ei close.svg" alt="Logo" />
|
||
|
|
{:else}
|
||
|
|
<img src="/media/BurgerMenu.svg" alt="Menu" />
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
@import "../../assets/css/main.less";
|
||
|
|
.header {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10.4px 5px;
|
||
|
|
@media @tablet {
|
||
|
|
padding: 25.4px 60px;
|
||
|
|
}
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 25px;
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 1;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
font-weight: bold;
|
||
|
|
@media @tablet {
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|