mirror of
https://github.com/NoCrypt/migu.git
synced 2026-01-11 20:10:22 +00:00
chore: navigation improvements
This commit is contained in:
RockinChaos
parent
8f5ee3439f
commit
b67546e723
6 changed files with 58 additions and 37 deletions
|
|
@ -64,10 +64,10 @@
|
|||
|
||||
<div class='page-wrapper with-transitions bg-dark position-relative' data-sidebar-type='overlayed-all'>
|
||||
<Menubar bind:page={$page} />
|
||||
<Profiles />
|
||||
<Sidebar bind:page={$page} />
|
||||
<div class='overflow-hidden content-wrapper h-full'>
|
||||
<Toaster visibleToasts={6} position='top-right' theme='dark' richColors duration={10000} closeButton />
|
||||
<Profiles />
|
||||
<ViewAnime bind:overlay={$overlay} />
|
||||
<TorrentModal bind:overlay={$overlay} />
|
||||
<Router bind:page={$page} bind:overlay={$overlay} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script>
|
||||
import { getContext } from 'svelte'
|
||||
import { media } from '../views/Player/MediaHandler.svelte'
|
||||
import { rss } from '@/views/TorrentSearch/TorrentModal.svelte'
|
||||
import { media } from '@/views/Player/MediaHandler.svelte'
|
||||
import { profileView } from './Profiles.svelte'
|
||||
import { click } from '@/modules/click.js'
|
||||
import IPC from '@/modules/ipc.js'
|
||||
import NavbarLink from './NavbarLink.svelte'
|
||||
|
|
@ -17,25 +19,27 @@
|
|||
<nav class='navbar navbar-fixed-bottom d-block d-md-none border-0 bg-dark'>
|
||||
<div class='navbar-menu h-full d-flex flex-row justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
|
||||
<img src='./logo_filled.png' class='w-50 h-50 m-10 pointer p-5' alt='ico' use:click={close} />
|
||||
<NavbarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' css='ml-auto' icon='search' {page} let:active>
|
||||
<MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
|
||||
<NavbarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' css='ml-auto' icon='search' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '1' : '0'} stroke='currentColor' />
|
||||
</NavbarLink>
|
||||
<NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} let:active>
|
||||
<Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</NavbarLink>
|
||||
{#if $media?.media}
|
||||
<NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} let:active>
|
||||
<ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
{@const currentMedia = $view}
|
||||
{@const active = $view && !$profileView && 'active'}
|
||||
<NavbarLink click={() => { $view = (currentMedia?.id === $media.media.id && active ? null : $media.media) }} icon='queue_music' {page} overlay={active} nowPlaying={$view === $media.media} let:active>
|
||||
<ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</NavbarLink>
|
||||
{/if}
|
||||
<NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} let:active>
|
||||
<Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</NavbarLink>
|
||||
<NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} let:active>
|
||||
<Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
|
||||
<Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3' : '2'} fill='currentColor' />
|
||||
</NavbarLink>
|
||||
<NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} let:active>
|
||||
<Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</NavbarLink>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,16 @@
|
|||
export let _page = ''
|
||||
export let css = ''
|
||||
export let icon = ''
|
||||
export let nowPlaying = false
|
||||
export let overlay = ''
|
||||
</script>
|
||||
|
||||
<div
|
||||
class='navbar-link navbar-link-with-icon pointer overflow-hidden {css}'
|
||||
use:click={() => { _click(); if (!icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } } }>
|
||||
use:click={() => { if (!icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } _click() } }>
|
||||
|
||||
<span class='rounded d-flex'>
|
||||
<slot active={page === _page}>{icon}</slot>
|
||||
<slot active={(page === _page && overlay !== 'active') || (overlay === 'active' && nowPlaying)}>{icon}</slot>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -86,9 +86,15 @@
|
|||
if (keyCode === 27) close()
|
||||
}
|
||||
$: $profileView && modal?.focus()
|
||||
|
||||
window.addEventListener('overlay-check', () => {
|
||||
if ($profileView) {
|
||||
close()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class='modal z-101' class:show={$profileView}>
|
||||
<div class='modal z-55' class:show={$profileView}>
|
||||
{#if $profileView}
|
||||
<div class='modal-dialog' on:pointerup|self={close} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
|
||||
<div class='modal-content w-auto mw-400 d-flex justify-content-center flex-column'>
|
||||
|
|
@ -183,6 +189,9 @@
|
|||
.mt-2 {
|
||||
margin-top: .4rem;
|
||||
}
|
||||
.z-55 {
|
||||
z-index: 55;
|
||||
}
|
||||
.mw-400 {
|
||||
min-width: 35rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<script>
|
||||
import { getContext } from 'svelte'
|
||||
import { rss } from '@/views/TorrentSearch/TorrentModal.svelte'
|
||||
import { media } from '@/views/Player/MediaHandler.svelte'
|
||||
import { profileView } from './Profiles.svelte'
|
||||
import { settings } from '@/modules/settings.js'
|
||||
import { toast } from 'svelte-sonner'
|
||||
import { profileView } from './Profiles.svelte'
|
||||
import Helper from '@/modules/helper.js'
|
||||
import IPC from '@/modules/ipc.js'
|
||||
import SidebarLink from './SidebarLink.svelte'
|
||||
|
|
@ -27,40 +28,42 @@
|
|||
<div class='sidebar z-30 d-md-block' class:animated={$settings.expandingSidebar}>
|
||||
<div class='sidebar-overlay pointer-events-none h-full position-absolute' />
|
||||
<div class='sidebar-menu h-full d-flex flex-column justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
|
||||
<SidebarLink click={() => { $profileView = true }} icon='login' text={Helper.getUser() ? 'Profiles' : 'Login'} css='mt-auto' {page} image={Helper.getUserAvatar()}>
|
||||
<SidebarLink click={() => { $profileView = !$profileView }} icon='login' text={Helper.getUser() ? 'Profiles' : 'Login'} css='mt-auto' {page} overlay={$profileView && 'profile'} image={Helper.getUserAvatar()}>
|
||||
<LogIn size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' />
|
||||
</SidebarLink>
|
||||
<SidebarLink click={() => { page = 'home'; if ($view) $view = null }} _page='home' text='Home' {page} let:active>
|
||||
<Home size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<SidebarLink click={() => { page = 'home'; if ($view) $view = null }} _page='home' text='Home' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Home size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
<SidebarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' text='Search' {page} let:active>
|
||||
<MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
|
||||
<SidebarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' text='Search' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '1' : '0'} stroke='currentColor' />
|
||||
</SidebarLink>
|
||||
<SidebarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' text='Schedule' {page} let:active>
|
||||
<Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<SidebarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' text='Schedule' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
{#if $media?.media}
|
||||
<SidebarLink click={() => { $view = $media.media }} icon='queue_music' text='Now Playing' {page} let:active>
|
||||
<ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
{@const currentMedia = $view}
|
||||
{@const active = $view && !$profileView && 'active'}
|
||||
<SidebarLink click={() => { $view = (currentMedia?.id === $media.media.id && active ? null : $media.media); }} icon='queue_music' text='Now Playing' {page} overlay={active} nowPlaying={$view === $media.media} let:active>
|
||||
<ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
{/if}
|
||||
<SidebarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' text='Watch Together' {page} let:active>
|
||||
<Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<SidebarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' text='Watch Together' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
<SidebarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' text='Support This App' css='mt-auto' {page} let:active>
|
||||
<Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
|
||||
<Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3' : '2'} fill='currentColor' />
|
||||
</SidebarLink>
|
||||
{#if updateState === 'downloading'}
|
||||
<SidebarLink click={() => { toast('Update is downloading...') }} icon='download' text='Update Downloading...' {page} let:active>
|
||||
<Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
{:else if updateState === 'ready'}
|
||||
<SidebarLink click={() => { IPC.emit('quit-and-install') }} icon='download' text='Update Ready!' {page} let:active>
|
||||
<Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded update' strokeWidth={active ? '3.5' : '2'} />
|
||||
<Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded update' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
{/if}
|
||||
<SidebarLink click={() => { page = 'settings' }} _page='settings' icon='settings' text='Settings' {page} let:active>
|
||||
<Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
|
||||
<SidebarLink click={() => { page = 'settings' }} _page='settings' icon='settings' text='Settings' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
|
||||
<Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
|
||||
</SidebarLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,21 +9,24 @@
|
|||
export let css = ''
|
||||
export let text = ''
|
||||
export let icon = ''
|
||||
export let nowPlaying = false
|
||||
export let overlay = ''
|
||||
</script>
|
||||
|
||||
<div class='sidebar-link sidebar-link-with-icon pointer overflow-hidden {css}'
|
||||
use:click={() => { _click(); if (!icon.includes("login") && !icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } } }>
|
||||
use:click={() => { if (!icon.includes("login") && !icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } _click() } }>
|
||||
<span class='text-nowrap d-flex align-items-center w-full h-full'>
|
||||
{#if image}
|
||||
<span class='rounded d-flex'>
|
||||
<img src={image} class='h-30 rounded' alt='logo' />
|
||||
</span>
|
||||
<span class='text ml-20'>{text}</span>
|
||||
<span class='text ml-20 {overlay === "profile" ? "font-weight-bolder font-size-18" : ""}'>{text}</span>
|
||||
{:else}
|
||||
{@const active = (page === _page && overlay !== 'active') || (overlay === 'active' && nowPlaying)}
|
||||
<span class='rounded d-flex'>
|
||||
<slot active={page === _page}>{icon}</slot>
|
||||
<slot active={active}>{icon}</slot>
|
||||
</span>
|
||||
<span class='text ml-20'>{text}</span>
|
||||
<span class='text ml-20 {active ? "font-weight-bolder font-size-18" : ""}'>{text}</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue