Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redoing account section

Browse Source
This commit is contained in:
Eclypsed
2024-01-21 01:48:49 -05:00
parent 54309d06cf
commit 529e261023
9 changed files with 117 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(settings)/+layout.js
+6
View File
@@ -0,0 +1,6 @@
/** @type {import('./$types').LayoutLoad} */
export const load = ({ url }) => {
return {
url: url.pathname,
}
}
src/routes/(settings)/settings/+layout.svelte
+12 -58
View File
@@ -1,68 +1,22 @@
<script>
import IconButton from '$lib/components/utility/iconButton.svelte'
import { goto } from '$app/navigation'
import { page } from '$app/stores'
const settingRoutes = {
connections: {
displayName: 'Connections',
uri: '/settings/connections',
icon: 'fa-solid fa-circle-nodes',
},
// devices: {
// displayName: 'Devices',
// uri: '/settings/devices',
// icon: 'fa-solid fa-mobile-screen',
// },
}
</script>
<main class="mx-auto grid h-full max-w-screen-xl gap-8 p-8">
<nav class="h-full rounded-lg p-6">
<h1 class="flex h-6 justify-between text-neutral-400">
<span>
<i class="fa-solid fa-gear" />
Settings
</span>
{#if $page.url.pathname.split('/').at(-1) !== 'settings'}
<IconButton on:click={() => goto('/settings')}>
<i slot="icon" class="fa-solid fa-caret-left" />
</IconButton>
{/if}
</h1>
<ol class="ml-2 mt-4 flex flex-col gap-3 border-2 border-transparent border-l-neutral-500 px-2">
{#each Object.values(settingRoutes) as route}
<li>
{#if $page.url.pathname === route.uri}
<div class="rounded-lg bg-neutral-500 px-3 py-1">
<i class={route.icon} />
{route.displayName}
</div>
{:else}
<a href={route.uri} class="block rounded-lg px-3 py-1 opacity-50 hover:bg-neutral-700">
<i class={route.icon} />
{route.displayName}
</a>
{/if}
</li>
{/each}
</ol>
</nav>
<div class="relative h-full overflow-y-scroll rounded-lg">
<main class="h-full">
<h1 class="sticky top-0 grid grid-cols-[1fr_auto_1fr] grid-rows-1 items-center text-2xl">
<IconButton on:click={() => history.back()}>
<i slot="icon" class="fa-solid fa-arrow-left" />
</IconButton>
<span>Account</span>
</h1>
<section class="px-[5vw]">
<slot />
</div>
</section>
</main>
<style>
main {
grid-template-columns: 20rem auto;
}
nav {
background-color: rgba(82, 82, 82, 0.25);
}
i {
text-align: center;
width: 1rem;
margin-right: 0.2rem;
h1 {
height: 80px;
padding: 16px 5vw;
}
</style>
src/routes/(settings)/settings/+page.svelte
+47 -10
View File
@@ -1,13 +1,50 @@
<!-- This is template for reference -->
<script>
import IconButton from '$lib/components/utility/iconButton.svelte'
import { goto } from '$app/navigation'
export let data
const settingRoutes = {
connections: {
displayName: 'Connections',
uri: '/settings/connections',
icon: 'fa-solid fa-circle-nodes',
},
// devices: {
// displayName: 'Devices',
// uri: '/settings/devices',
// icon: 'fa-solid fa-mobile-screen',
// },
}
</script>
<section></section>
<style>
section {
border-radius: 0.5rem;
background-color: rgba(82, 82, 82, 0.25);
height: 24rem;
}
</style>
<nav class="h-full rounded-lg bg-neutral-950 p-6">
<h1 class="flex h-6 justify-between text-neutral-400">
<span>
<i class="fa-solid fa-gear" />
Settings
</span>
{#if data.url.split('/').at(-1) !== 'settings'}
<IconButton on:click={() => goto('/settings')}>
<i slot="icon" class="fa-solid fa-caret-left" />
</IconButton>
{/if}
</h1>
<ol class="ml-2 mt-4 flex flex-col gap-3 border-2 border-transparent border-l-neutral-500 px-2">
{#each Object.values(settingRoutes) as route}
<li>
{#if data.url === route.uri}
<div class="rounded-lg bg-neutral-500 px-3 py-1">
<i class={route.icon} />
{route.displayName}
</div>
{:else}
<a href={route.uri} class="block rounded-lg px-3 py-1 opacity-50 hover:bg-neutral-700">
<i class={route.icon} />
{route.displayName}
</a>
{/if}
</li>
{/each}
</ol>
</nav>