Skip to content

Commit 0b87d01

Browse files
authored
create nav external links and add provider rewards link (#235)
## Goal The goal of this PR is to create nav external links component and add provider rewards link to that. Closes #214 ## Discussion - added external links component - added new link - styled ## Demo Logged in and displaying hover state on Provider Rewards (mouse was not captured in screen grab): <img width="969" alt="Screenshot 2025-05-01 at 4 40 36 PM" src="https://github.com/user-attachments/assets/51b62c01-086a-49b4-b8cb-763cc5fa10d9" /> Logged out state: <img width="985" alt="Screenshot 2025-05-01 at 4 39 37 PM" src="https://github.com/user-attachments/assets/daf7fc87-324e-437c-ba2f-960d747fd89e" />
1 parent ab90391 commit 0b87d01

File tree

3 files changed

+23
-7
lines changed

3 files changed

+23
-7
lines changed

src/components/features/Nav/Nav.svelte

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { logout } from '$lib/stores';
33
import { isLoggedIn } from '$lib/stores';
4+
import NavExternalLinks from './NavExternalLinks.svelte';
45
import NavItem from './NavItem.svelte';
56
67
let url = $state();
@@ -15,8 +16,8 @@
1516
};
1617
</script>
1718

18-
<div class="min-w-f80 bg-navy fixed flex h-full flex-col items-center justify-center text-white md:w-[128px]">
19-
<div class="flex w-[100%] flex-col">
19+
<div class="min-w-f80 bg-navy fixed flex h-full flex-col items-center justify-between text-white md:w-[128px]">
20+
<div class="flex w-[100%] flex-col pt-[127px]">
2021
<NavItem href="/" isActive={url === '/' || url === '/become-a-provider'} onClick={() => (url = '/')}>Home</NavItem>
2122
{#if $isLoggedIn === true}
2223
<NavItem href="/activity-log" isActive={url === '/activity-log'} onClick={() => (url = '/activity-log')}
@@ -25,10 +26,11 @@
2526
{/if}
2627
<NavItem href="/faq" isActive={url === '/faq'} onClick={() => (url = '/faq')}>FAQ's</NavItem>
2728
{#if $isLoggedIn === true}
28-
<NavItem href="https://faucet.testnet.frequency.xyz/" target="_blank">Testnet Faucet</NavItem>
2929
<NavItem id="logout-button" href="/" onClick={handleLogout}>Logout</NavItem>
3030
{:else}
3131
<NavItem />
3232
{/if}
3333
</div>
34+
35+
<NavExternalLinks />
3436
</div>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import NavItem from './NavItem.svelte';
3+
</script>
4+
5+
{#snippet navItem(label: string, link: string)}
6+
<NavItem class="py-f8 h-auto" href={link} target="_blank">{label}</NavItem>
7+
{/snippet}
8+
9+
<div class="pb-f20 pt-f8 border-t">
10+
{@render navItem('Provider Rewards', 'https://rewards.frequency.xyz/providers/')}
11+
{@render navItem('Testnet Faucet', 'https://faucet.testnet.frequency.xyz/')}
12+
</div>

src/components/features/Nav/NavItem.svelte

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts">
2-
interface Props {
2+
import type { HTMLAttributes } from 'svelte/elements';
3+
4+
interface Props extends HTMLAttributes<HTMLAnchorElement> {
35
href?: string;
46
isActive?: boolean;
57
onClick?: () => void;
@@ -8,16 +10,16 @@
810
children?: import('svelte').Snippet;
911
}
1012
11-
let { href = '', isActive = false, onClick = () => {}, id = '', target = '', children }: Props = $props();
13+
let { href = '', isActive = false, onClick = () => {}, id = '', target = '', children, ...rest }: Props = $props();
1214
</script>
1315

1416
<a
1517
{id}
1618
{href}
1719
onclick={onClick}
18-
class={` flex h-[100px] items-center justify-center text-sm font-bold ${
20+
class={`hover:text-teal flex h-[100px] items-center justify-center text-sm font-bold ${
1921
isActive && 'text-teal shadow-blue-border shadow-teal bg-white'
20-
}`}
22+
} ${rest.class}`}
2123
{target}
2224
>
2325
{@render children?.()}

0 commit comments

Comments
 (0)