KevinMidboe/brewpi
1
0
Fork 0
mirror of https://github.com/KevinMidboe/brewPi.git synced 2025-10-29 08:40:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make top right hamburger a button for accessibility

Browse Source
This commit is contained in:
Kevin
2023-08-27 13:38:59 +02:00
parent 0218c048e9
commit b9a5fde53f
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/components/Header.svelte
View File

@@ -17,7 +17,7 @@
</script>
{#if open}
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
<h1>Page navigation</h1>
<Navigation on:click="{close}" />
@@ -30,15 +30,13 @@
</a>
</li>
</ul>
</div>
</div>
{/if}
<header>
<div on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
<button on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
{#if !open}
<span class="page-header-buttons__open">
<span></span> <span></span> <span></span>
</span>
<span class="page-header-buttons__open"> <span></span> <span></span> <span></span> </span>
{:else}
<span class="page-header-buttons__close">
<span></span>
@@ -47,7 +45,7 @@
{/if}
<span class="page-header-text">{headerText}</span>
</div>
</button>
</header>
<style lang="scss" module="scoped">
@@ -123,6 +121,9 @@
transition: all 0.3s ease;
cursor: pointer;
pointer-events: auto;
-webkit-style: none;
border: none;
font-size: 1rem;
-webkit-user-select: none;
user-select: none;