ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-25 19:12:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add navbar button type

Browse Source
This commit is contained in:
madkarmaa 2025-05-04 20:23:11 +02:00
parent ef9bf6ba0c
commit 0ee8984d2c
No known key found for this signature in database
GPG Key ID: BF5E2EF8F188606D
1 changed files with 71 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/lib/components/atoms/Button.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { Component, Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { page } from '$app/state';
import type { SpecialTargetValues, Prettify } from '$types'; import type { SpecialTargetValues, Prettify } from '$types';
type ButtonType = 'filled' | 'tonal' | 'text' | 'outlined'; type ButtonType = 'filled' | 'tonal' | 'text' | 'outlined' | 'navbar';
type BaseProps = { type BaseProps = {
type: ButtonType; type: ButtonType;
icon?: Component; icon?: typeof import('~icons/mdi').default;
iconSize?: number;
iconColor?: string; iconColor?: string;
label?: string; label?: string;
children?: Snippet; children?: Snippet;
@ -39,38 +39,45 @@
children, children,
label = '', label = '',
onclick = () => {}, onclick = () => {},
iconSize = 20,
iconColor = 'currentColor', iconColor = 'currentColor',
target = '_self' target = '_self'
}: Props = $props(); }: Props = $props();
// prettier-ignore
const navBarButtonSelected = type === 'navbar' && href && new URL(href, page.url.href).pathname === page.url.pathname;
</script> </script>
{#if href} {#if href}
<a {href} {target} class={`button-${type}`} aria-label={label}> <a
{href}
{target}
class={`button-${type}${navBarButtonSelected ? ' selected' : ''}`}
aria-label={label}
>
{#if Icon} {#if Icon}
<Icon size={iconSize} color={iconColor} /> <Icon color={iconColor} />
{/if}
{#if type === 'navbar'}
<span>{@render children?.()}</span>
{:else}
{@render children?.()}
{/if} {/if}
{@render children?.()}
</a> </a>
{:else} {:else}
<button {onclick} class={`button-${type}`} aria-label={label}> <button {onclick} class={`button-${type}`} aria-label={label}>
{#if Icon} {#if Icon}
<Icon size={iconSize} color={iconColor} /> <Icon color={iconColor} />
{/if} {/if}
{@render children?.()} {@render children?.()}
</button> </button>
{/if} {/if}
<style> <style>
a,
button { button {
border: none;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
}
a,
button {
min-width: max-content; min-width: max-content;
font-size: 0.95rem; font-size: 0.95rem;
text-decoration: none; text-decoration: none;
@ -83,9 +90,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
cursor: pointer; cursor: pointer;
transition: transition: all 0.4s var(--bezier-one);
transform 0.4s var(--bezier-one),
filter 0.4s var(--bezier-one);
user-select: none; user-select: none;
} }
@ -109,8 +114,55 @@
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
} }
button:hover, button:not(.button-navbar):hover,
a:hover { a:not(.button-navbar):hover {
filter: brightness(85%); filter: brightness(85%);
} }
.button-navbar {
transition-duration: 0.25s;
text-decoration: none;
user-select: none;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
}
.button-navbar > span {
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.02rem;
color: var(--text-four);
}
.button-navbar:hover {
color: var(--text-one);
background-color: var(--surface-three);
}
.button-navbar.selected {
background-color: var(--tertiary);
color: var(--primary);
pointer-events: none;
}
.button-navbar.selected > span {
color: var(--primary);
}
/* @media (max-width: 767px) {
li {
border-radius: 100px;
}
a {
padding: 0.75rem 1.25rem;
justify-content: left;
}
span {
font-size: 1rem;
font-weight: 500;
}
} */
</style> </style>