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

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

@@ -17,37 +17,35 @@
</script> </script>
{#if open} {#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> <h1>Page navigation</h1>
<Navigation on:click="{close}" /> <Navigation on:click="{close}" />
<ul class="bottom-content"> <ul class="bottom-content">
<li> <li>
<a class="link" href="https://github.com/kevinmidboe/brewpi"> <a class="link" href="https://github.com/kevinmidboe/brewpi">
<GithubIcon /> <GithubIcon />
<span class="meta">View on Github</span> <span class="meta">View on Github</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
{/if} {/if}
<header> <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} {#if !open}
<span class="page-header-buttons__open"> <span class="page-header-buttons__open"> <span></span> <span></span> <span></span> </span>
<span></span> <span></span> <span></span>
</span>
{:else} {:else}
<span class="page-header-buttons__close"> <span class="page-header-buttons__close">
<span></span> <span></span>
<span></span> <span></span>
</span> </span>
{/if} {/if}
<span class="page-header-text">{headerText}</span> <span class="page-header-text">{headerText}</span>
</div> </button>
</header> </header>
<style lang="scss" module="scoped"> <style lang="scss" module="scoped">
@@ -123,6 +121,9 @@
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
-webkit-style: none;
border: none;
font-size: 1rem;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;