Ecosystem/xmr-remote-nodes
1
0
Fork 0
mirror of https://github.com/ditatompel/xmr-remote-nodes.git synced 2025-01-09 12:29:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix and optimize navigation

Browse source
This commit is contained in:
ditatompel 2024-05-08 01:22:37 +07:00
parent 678e193ba0
commit 98fea9aa3a
No known key found for this signature in database
GPG key ID: 31D3D06D77950979
5 changed files with 39 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/lib/components/navigation/AdminMobileDrawer.svelte
View file

@ -1,23 +1,20 @@
<script>
import { page } from '$app/stores';
import { navs } from './navs';
import { adminNavs } from './navs';
import { getDrawerStore } from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
function drawerClose() {
drawerStore.close();
}
$: classesActive = (/** @type {string} */ href) =>
$: style = (/** @type {string} */ href) =>
$page.url.pathname.startsWith(href) ? 'bg-primary-500' : '';
</script>
<nav class="list-nav p-4">
<ul>
{#each navs as nav}
{#each adminNavs as nav}
<li>
<a href={nav.path} class={classesActive(nav.path)} on:click={drawerClose}>{nav.name}</a>
<a href={nav.path} class={style(nav.path)} on:click={() => drawerStore.close()}
>{nav.name}</a
>
</li>
{/each}
</ul>

4
frontend/src/lib/components/navigation/AdminSidebar.svelte
View file

@ -1,6 +1,6 @@
<script>
import { page } from '$app/stores';
import { navs } from './navs';
import { adminNavs } from './navs';
</script>
<aside
@ -10,7 +10,7 @@
>
<div class="h-full overflow-y-auto px-3 pb-4">
<ul class="space-y-2 font-medium list-none" data-sveltekit-preload-data="false">
{#each navs as nav}
{#each adminNavs as nav}
<li>
<a
href={nav.path}

22
frontend/src/lib/components/navigation/MainNav.svelte
View file

@ -1,12 +1,9 @@
<script>
import { page } from '$app/stores';
import { navs } from './navs';
import { LightSwitch, getDrawerStore } from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
function drawerOpen() {
drawerStore.open({});
}
</script>
<nav class="fixed w-full z-20 top-0 start-0 bg-surface-100-800-token shadow-2xl">
@ -22,7 +19,7 @@
<button
class="btn btn-sm mr-4 md:hidden"
aria-label="Mobile Drawer Button"
on:click={drawerOpen}
on:click={() => drawerStore.open({})}
>
<span>
<svg viewBox="0 0 100 80" class="fill-token h-4 w-4">
@ -44,19 +41,16 @@
aria-current={$page.url.pathname === '/' ? 'page' : undefined}>Home</a
>
</li>
{#each navs as nav}
<li>
<a
href="/remote-nodes"
class={$page.url.pathname.startsWith('/remote-nodes') ? 'active' : 'nav-link'}
>Remote Nodes</a
>
</li>
<li>
<a
href="/add-node"
class={$page.url.pathname.startsWith('/add-node') ? 'active' : 'nav-link'}>Add Node</a
href={nav.path}
class={$page.url.pathname.startsWith(nav.path) ? 'active' : 'nav-link'}
>
{nav.name}
</a>
</li>
{/each}
</ul>
</div>
</div>

26
frontend/src/lib/components/navigation/MobileDrawer.svelte
View file

@ -1,28 +1,28 @@
<script>
import { page } from '$app/stores';
import { navs } from './navs';
import { getDrawerStore } from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
function drawerClose() {
drawerStore.close();
}
$: classesActive = (/** @type {string} */ href) =>
$: classes = (/** @type {string} */ href) =>
$page.url.pathname.startsWith(href) ? 'bg-primary-500' : '';
</script>
<nav class="list-nav p-4">
<ul>
<li>
<a href="/" class={$page.url.pathname === '/' ? 'bg-primary-500' : ''} on:click={drawerClose}
>Home</a
<a
href="/"
class={$page.url.pathname === '/' ? 'bg-primary-500' : ''}
on:click={() => drawerStore.close()}>Home</a
>
</li>
<li><a href="/dib" class={classesActive('/dib')} on:click={drawerClose}>Data</a></li>
<li><a href="/tools" class={classesActive('/tools')} on:click={drawerClose}>Tools</a></li>
<li><a href="/asn" class={classesActive('/asn')} on:click={drawerClose}>ASN</a></li>
<li><a href="/proxy" class={classesActive('/proxy')} on:click={drawerClose}>Proxy</a></li>
<li><a href="/monero" class={classesActive('/monero')} on:click={drawerClose}>Monero</a></li>
{#each navs as nav}
<li>
<a href={nav.path} class={classes(nav.path)} on:click={() => drawerStore.close()}
>{nav.name}</a
>
</li>
{/each}
</ul>
</nav>

7
frontend/src/lib/components/navigation/navs.js
View file

@ -1,5 +1,10 @@
export const navs = [
export const adminNavs = [
{ name: 'Dashboard', path: '/app/dashboard/' },
{ name: 'Prober', path: '/app/prober/' },
{ name: 'Crons', path: '/app/crons/' }
];
export const navs = [
{ name: 'Remote Nodes', path: '/remote-nodes/' },
{ name: 'Add Node', path: '/add-node/' }
];