mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-03-22 20:27:39 +00:00
eeed27ffcf
fix: make account related buttons disabled when not signed in fix: improve DTS exclusions fix: softlock on navigation in androidTV
129 lines
3 KiB
Svelte
129 lines
3 KiB
Svelte
<script>
|
|
import { click } from '@/modules/click.js'
|
|
|
|
let _click = () => {}
|
|
export { _click as click }
|
|
export let image = ''
|
|
export let page
|
|
export let _page = ''
|
|
export let css = ''
|
|
export let text = ''
|
|
export let icon = ''
|
|
</script>
|
|
|
|
<div
|
|
class='sidebar-link sidebar-link-with-icon pointer overflow-hidden {css}'
|
|
use:click={_click}>
|
|
<span class='text-nowrap d-flex align-items-center w-full h-full'>
|
|
{#if image}
|
|
<span class='material-symbols-outlined rounded' class:filled={page === _page}>
|
|
<img src={image} class='h-30 rounded' alt='logo' />
|
|
</span>
|
|
<span class='text ml-20'>{text}</span>
|
|
{:else}
|
|
<span class='material-symbols-outlined rounded' class:filled={page === _page}>{icon}</span>
|
|
<span class='text ml-20'>{text}</span>
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 2rem #fa68b6;
|
|
}
|
|
to {
|
|
text-shadow: 0 0 1rem #fa68b6;
|
|
}
|
|
}
|
|
.animate .donate .material-symbols-outlined {
|
|
animation: glow 1s ease-in-out infinite alternate;
|
|
}
|
|
.donate:hover .material-symbols-outlined {
|
|
background: #fff;
|
|
color: #fa68b6 !important;
|
|
}
|
|
.donate .material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 1;
|
|
color: #fa68b6;
|
|
text-shadow: 0 0 1rem #fa68b6;
|
|
}
|
|
.update .material-symbols-outlined {
|
|
color: #47cb6a;
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
.sidebar-menu {
|
|
padding-top: 10rem;
|
|
}
|
|
.text {
|
|
opacity: 1;
|
|
transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar-link > span {
|
|
color: #fff;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
color: #fff;
|
|
transition: background .8s cubic-bezier(0.25, 0.8, 0.25, 1), color .8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
.sidebar-link:hover > span > *:nth-child(1) {
|
|
background: #fff;
|
|
color: var(--dark-color);
|
|
}
|
|
|
|
.sidebar-link {
|
|
width: 100%;
|
|
font-size: 1.4rem;
|
|
padding: 0.75rem 1.5rem;
|
|
height: 5.5rem;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-size: 2.2rem;
|
|
min-width: 4rem;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar-link img {
|
|
font-size: 2.2rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin: 0.5rem;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
img {
|
|
margin-right: var(--sidebar-brand-image-margin-right);
|
|
}
|
|
|
|
.sidebar {
|
|
transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
|
|
background: none !important;
|
|
overflow-y: unset;
|
|
overflow-x: visible;
|
|
left: unset;
|
|
}
|
|
.sidebar.animated:hover {
|
|
width: 22rem
|
|
}
|
|
.sidebar-overlay {
|
|
width: var(--sidebar-width);
|
|
transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
|
|
background: var(--sidebar-gradient);
|
|
backdrop-filter: blur(2px);
|
|
z-index: -1;
|
|
}
|
|
</style>
|