-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add burger menu to the header (#401)
* Add burger menu to the header * Update src/components/app-bar/AppBar.svelte Co-authored-by: Tom Adler <[email protected]> * Update src/components/app-bar/BurgerMenu.svelte Co-authored-by: Tom Adler <[email protected]> * Update src/components/app-bar/BurgerMenu.svelte Co-authored-by: Tom Adler <[email protected]> * Address PR suggestions * Minor change * Update src/components/app-bar/BurgerMenu.svelte Co-authored-by: Tom Adler <[email protected]> * Update src/components/app-bar/BurgerMenu.svelte Co-authored-by: Tom Adler <[email protected]> * Address PR comments --------- Co-authored-by: BlertaGalani <[email protected]> Co-authored-by: Tom Adler <[email protected]>
- Loading branch information
3 people
authored
Jan 8, 2025
1 parent
960c795
commit 58ed6ab
Showing
9 changed files
with
122 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -59,3 +59,27 @@ | |
| font-family: 'Overpass', sans-serif; | ||
| font-optical-sizing: auto; | ||
| } | ||
|
|
||
| /* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=add,close,logout,menu */ | ||
|
|
||
| @font-face { | ||
| font-family: 'Material Symbols Rounded'; | ||
| font-style: normal; | ||
| font-weight: 100 700; | ||
| src: url(MaterialSymbolsRounded.woff2) format('woff2'); | ||
| } | ||
|
|
||
| .material-symbols-rounded { | ||
| font-family: 'Material Symbols Rounded'; | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| font-size: 24px; | ||
| line-height: 1; | ||
| letter-spacing: normal; | ||
| text-transform: none; | ||
| white-space: nowrap; | ||
| word-wrap: normal; | ||
| direction: ltr; | ||
| -webkit-font-feature-settings: 'liga'; | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <script lang="ts"> | ||
| import { | ||
| activeAccount, | ||
| activeAccountBounties, | ||
| walletConnect as wcConnection | ||
| } from '../../stores'; | ||
| import { onMount } from 'svelte'; | ||
| let open = false; | ||
| let container: HTMLDivElement | null = null; | ||
| $: { | ||
| if (open) { | ||
| window.addEventListener('click', closeMenuOnOutsideClick); | ||
| } else { | ||
| window.removeEventListener('click', closeMenuOnOutsideClick); | ||
| } | ||
| } | ||
| async function logOut() { | ||
| activeAccount.set(undefined); | ||
| sessionStorage.clear(); | ||
| activeAccountBounties.set([]); | ||
| if ($wcConnection) { | ||
| await $wcConnection.disconnect(); | ||
| } | ||
| open = false; | ||
| } | ||
| function closeMenuOnOutsideClick(event: MouseEvent) { | ||
| if (!container?.contains(event.target as Node)) { | ||
| open = false; | ||
| } | ||
| } | ||
| onMount(() => { | ||
| return () => { | ||
| window.removeEventListener('click', closeMenuOnOutsideClick); | ||
| }; | ||
| }); | ||
| </script> | ||
|
|
||
| <div bind:this={container} class="relative"> | ||
| <!-- Burger Menu Icon --> | ||
| <button | ||
| on:click={() => { | ||
| open = !open; | ||
| }} | ||
| > | ||
| <span class="material-symbols-rounded text-white"> menu </span> | ||
| </button> | ||
|
|
||
| <!-- Menu Overlay --> | ||
| {#if open} | ||
| <div | ||
| class="absolute top-0 right-0 flex flex-col items-start bg-backgroundContent border shadow-lg p-2.5 rounded-md w-[210px]" | ||
| > | ||
| <button | ||
| on:click={() => { | ||
| open = false; | ||
| }} | ||
| class="self-end mr-2.5 mb-1" | ||
| > | ||
| <span class="material-symbols-rounded text-accent"> close </span> | ||
| </button> | ||
| <a | ||
| on:click={() => { | ||
| open = false; | ||
| }} | ||
| href="/bounty-setup" | ||
| class="bg-accent text-white p-2.5 mb-2 rounded-md w-[189px] flex justify-between items-center" | ||
| > | ||
| <span class="mt-1">Create new bounty</span> | ||
| <span class="material-symbols-rounded"> add </span> | ||
| </a> | ||
| <button | ||
| on:click={logOut} | ||
| class="text-primary p-2.5 rounded-md w-[189px] flex justify-between items-center" | ||
| > | ||
| <span class="mt-1">Log out</span> | ||
| <span class="material-symbols-rounded"> logout </span> | ||
| </button> | ||
| </div> | ||
| {/if} | ||
| </div> |
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters