djfhgsdjhghjsdf
This commit is contained in:
parent
7d3569be36
commit
bd2d0487e2
12 changed files with 104 additions and 2 deletions
|
@ -25,7 +25,7 @@ export async function handle({ event, resolve }) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!PUBLIC_RESOURCES.includes(event.route.id) && !user) return redirect(303, '/');
|
if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
|
||||||
|
|
||||||
return await resolve(event);
|
return await resolve(event);
|
||||||
}
|
}
|
||||||
|
|
22
src/lib/components/Dropdown.svelte
Normal file
22
src/lib/components/Dropdown.svelte
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
<script>
|
||||||
|
import { slide } from 'svelte/transition';
|
||||||
|
import { Menu } from 'lucide-svelte';
|
||||||
|
|
||||||
|
let visible = false;
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
visible = !visible;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="relative w-fit text-sm">
|
||||||
|
<button class="w-min" on:click={toggle}><Menu></Menu></button>
|
||||||
|
{#if visible}
|
||||||
|
<button
|
||||||
|
transition:slide
|
||||||
|
class="w-52 z-10 h-fit translate-y-12 py-2 bg-neutral-900 rounded-lg origin-top right-0 absolute"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
3
src/lib/components/DropdownButton.svelte
Normal file
3
src/lib/components/DropdownButton.svelte
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="px-3 py-1.5 flex space-x-1 hover:bg-neutral-600 transition-all">
|
||||||
|
<slot />
|
||||||
|
</div>
|
4
src/lib/components/Footer.svelte
Normal file
4
src/lib/components/Footer.svelte
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<div
|
||||||
|
class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
|
||||||
|
bg-neutral-200 dark:bg-neutral-900 transition-colors"
|
||||||
|
></div>
|
35
src/lib/components/Header.svelte
Normal file
35
src/lib/components/Header.svelte
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
<script>
|
||||||
|
import { user } from '$lib/stores';
|
||||||
|
|
||||||
|
import HeaderLink from '$lib/components/HeaderLink.svelte';
|
||||||
|
import Dropdown from '$lib/components/Dropdown.svelte';
|
||||||
|
import DropdownButton from '$lib/components/DropdownButton.svelte';
|
||||||
|
import { Cog, LogOut } from 'lucide-svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
|
||||||
|
bg-neutral-200 dark:bg-neutral-900 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="my-auto flex space-x-4">
|
||||||
|
<p class="my-auto text-xl hover:scale-105 focus:scale-105 active:scale-95 transition-all">
|
||||||
|
File Uploader
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-2 my-auto">
|
||||||
|
<HeaderLink href="/dashboard">Dashboard</HeaderLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="my-auto flex space-x-2">
|
||||||
|
<Dropdown>
|
||||||
|
<DropdownButton>
|
||||||
|
<p class="my-auto">Uploads</p>
|
||||||
|
</DropdownButton>
|
||||||
|
<DropdownButton>
|
||||||
|
<p class="my-auto">Settings</p>
|
||||||
|
</DropdownButton>
|
||||||
|
<DropdownButton>
|
||||||
|
<p class="my-auto text-red-500">Logout</p>
|
||||||
|
</DropdownButton>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
19
src/lib/components/HeaderLink.svelte
Normal file
19
src/lib/components/HeaderLink.svelte
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
|
export let href;
|
||||||
|
let selected = false;
|
||||||
|
|
||||||
|
page.subscribe((pg) => {
|
||||||
|
selected = pg.url.pathname === href;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a
|
||||||
|
{href}
|
||||||
|
class="my-auto md:text-lg transition-all {selected
|
||||||
|
? 'font-bold tracking-wider'
|
||||||
|
: 'hover:text-neutral-500 focus:text-neutral-500'}"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</a>
|
|
@ -10,7 +10,8 @@
|
||||||
{:else if style === 'button'}
|
{:else if style === 'button'}
|
||||||
<a
|
<a
|
||||||
{href}
|
{href}
|
||||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400
|
||||||
|
hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</a>
|
</a>
|
||||||
|
|
18
src/routes/(app)/+layout.svelte
Normal file
18
src/routes/(app)/+layout.svelte
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
<script>
|
||||||
|
import Header from '$lib/components/Header.svelte';
|
||||||
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-full min-h-screen">
|
||||||
|
<div class="w-full h-12">
|
||||||
|
<Header></Header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full min-h-[calc(100vh-4rem)] my-2">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full h-20">
|
||||||
|
<Footer></Footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
0
src/routes/(app)/settings/+page.svelte
Normal file
0
src/routes/(app)/settings/+page.svelte
Normal file
0
src/routes/(app)/uploads/+page.svelte
Normal file
0
src/routes/(app)/uploads/+page.svelte
Normal file
Loading…
Reference in a new issue