yap #1
10 changed files with 56 additions and 23 deletions
|
@ -1,3 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
@ -6,6 +8,11 @@ html {
|
|||
@apply dark:bg-neutral-950;
|
||||
@apply dark:text-neutral-200;
|
||||
@apply transition-colors;
|
||||
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { redirect } from '@sveltejs/kit';
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
import { getSession } from '$lib/server/database';
|
||||
import { COOKIE } from '$lib/config';
|
||||
|
||||
|
@ -25,7 +25,9 @@ export async function handle({ event, resolve }) {
|
|||
};
|
||||
}
|
||||
|
||||
if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
|
||||
if (event.route.id) {
|
||||
if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
|
||||
}
|
||||
|
||||
return await resolve(event);
|
||||
}
|
||||
|
|
|
@ -9,12 +9,14 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="relative w-fit text-sm">
|
||||
<button class="w-min" on:click={toggle}><Menu></Menu></button>
|
||||
<div class="flex relative w-fit">
|
||||
<button class="my-auto w-min" on:click={toggle}>
|
||||
<Menu class="w-5 h-5"></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"
|
||||
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-neutral-200 dark:bg-neutral-900 rounded-lg origin-top right-0 absolute transition-all"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
|
|
@ -2,6 +2,9 @@
|
|||
export let href = '';
|
||||
</script>
|
||||
|
||||
<a {href} class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-600">
|
||||
<a
|
||||
{href}
|
||||
class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
|
|
|
@ -1,24 +1,50 @@
|
|||
<script>
|
||||
import { Sun, Moon } from 'lucide-svelte';
|
||||
|
||||
import { user, darkMode } 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 Logo from '$lib/components/Logo.svelte';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex place-content-between px-4 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
|
||||
class="flex place-content-between px-4 my-2 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
|
||||
>
|
||||
<div class="flex my-auto space-x-4">
|
||||
<p class="my-auto text-xl transition-all hover:scale-105 focus:scale-105 active:scale-95">
|
||||
File Uploader
|
||||
</p>
|
||||
<div class="flex my-auto space-x-2">
|
||||
<div class="flex my-auto space-x-6">
|
||||
<a
|
||||
href="/dashboard"
|
||||
class="flex-none my-auto w-20 text-xl transition-all fill-black dark:fill-white hover:scale-105 focus:scale-105 active:scale-95"
|
||||
>
|
||||
<Logo></Logo>
|
||||
</a>
|
||||
<div class="flex my-auto space-x-3">
|
||||
<HeaderLink href="/dashboard">Dashboard</HeaderLink>
|
||||
<HeaderLink href="/uploads">Uploads</HeaderLink>
|
||||
<HeaderLink href="/admin">Admin</HeaderLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex my-auto space-x-2">
|
||||
<p class="font-bold">{$user?.username}</p>
|
||||
<Dropdown>
|
||||
<div>
|
||||
<button
|
||||
class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
|
||||
on:click={() => {
|
||||
$darkMode = !$darkMode;
|
||||
}}
|
||||
>
|
||||
{#if $darkMode}
|
||||
<Sun class="my-auto w-5 h-5" />
|
||||
{:else}
|
||||
<Moon class="my-auto w-5 h-5" />
|
||||
{/if}
|
||||
<p>Theme</p>
|
||||
</button>
|
||||
</div>
|
||||
<DropdownButton>
|
||||
<p class="my-auto">Uploads</p>
|
||||
<p class="my-auto">ShareX Profile</p>
|
||||
</DropdownButton>
|
||||
<DropdownButton>
|
||||
<p class="my-auto">Settings</p>
|
||||
|
|
|
@ -11,13 +11,7 @@
|
|||
{disabled}
|
||||
>
|
||||
<div
|
||||
class="flex space-x-2 rounded-lg border-b-2 p-2 transition-colors
|
||||
|
||||
border-neutral-400 bg-neutral-200
|
||||
hover:border-neutral-500 hover:group-disabled/button:border-neutral-400
|
||||
|
||||
dark:border-neutral-700 dark:bg-neutral-900
|
||||
hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 bg-neutral-200 hover:border-neutral-500 hover:group-disabled/button:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-900 hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<Header></Header>
|
||||
</div>
|
||||
|
||||
<div class="w-full min-h-[calc(100vh-4rem)] my-2">
|
||||
<div class="w-full min-h-[calc(100vh-4.5rem)] my-2">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
|
0
src/routes/(app)/admin/+page.svelte
Normal file
0
src/routes/(app)/admin/+page.svelte
Normal file
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { user } from '$lib/stores';
|
||||
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
|
|
|
@ -16,11 +16,9 @@
|
|||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<Button click={goBack}>
|
||||
<Undo />
|
||||
<p>Go Back</p>
|
||||
</Button>
|
||||
<Link style="button" href="/">
|
||||
<Home />
|
||||
<p>Go Home</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue