Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 06:19:38 +02:00
Code Issues Releases Activity

migration to new backend

Browse source
This commit is contained in:
Sean Morley 2024-07-08 11:44:39 -04:00
parent 28a5d423c2
commit 9abe9fb315
309 changed files with 21476 additions and 24132 deletions
Download patch file Download diff file Expand all files Collapse all files

147
frontend/src/lib/components/Navbar.svelte Normal file
View file

@ -0,0 +1,147 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { goto } from '$app/navigation';
export let data: any;
import type { SubmitFunction } from '@sveltejs/kit';
import DotsHorizontal from '~icons/mdi/dots-horizontal';
import WeatherSunny from '~icons/mdi/weather-sunny';
import WeatherNight from '~icons/mdi/weather-night';
import Forest from '~icons/mdi/forest';
import Flower from '~icons/mdi/flower';
import Water from '~icons/mdi/water';
import AboutModal from './AboutModal.svelte';
import Avatar from './Avatar.svelte';
let isAboutModalOpen: boolean = false;
const submitUpdateTheme: SubmitFunction = ({ action }) => {
const theme = action.searchParams.get('theme');
console.log('theme', theme);
if (theme) {
document.documentElement.setAttribute('data-theme', theme);
}
};
</script>
{#if isAboutModalOpen}
<AboutModal on:close={() => (isAboutModalOpen = false)} />
{/if}
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/></svg
>
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 gap-2"
>
{#if data.user}
<li>
<button on:click={() => goto('/visited')}>Visited</button>
</li>
<li>
<button on:click={() => goto('/planner')}>Planner</button>
</li>
<li>
<button on:click={() => goto('/worldtravel')}>World Travel</button>
</li>
<li>
<button on:click={() => goto('/featured')}>Featured</button>
</li>
{/if}
{#if !data.user}
<li>
<button class="btn btn-primary" on:click={() => goto('/login')}>Login</button>
</li>
<li>
<button class="btn btn-primary" on:click={() => goto('/signup')}>Signup</button>
</li>
{/if}
</ul>
</div>
<a class="btn btn-ghost text-xl" href="/"
>AdventureLog <img src="/favicon.png" alt="Map Logo" class="w-8" /></a
>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 gap-2">
{#if data.user}
<li>
<button class="btn btn-neutral" on:click={() => goto('/visited')}>Visited</button>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/planner')}>Planner</button>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button
>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/featured')}>Featured</button>
</li>
{/if}
{#if !data.user}
<li>
<button class="btn btn-primary" on:click={() => goto('/login')}>Login</button>
</li>
<li>
<button class="btn btn-primary" on:click={() => goto('/signup')}>Signup</button>
</li>
{/if}
</ul>
</div>
<div class="navbar-end">
{#if data.user}
<Avatar user={data.user} />
{/if}
<div class="dropdown dropdown-bottom dropdown-end">
<div tabindex="0" role="button" class="btn m-1 ml-4">
<DotsHorizontal class="w-6 h-6" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<button class="btn" on:click={() => (isAboutModalOpen = true)}>About AdventureLog</button>
<p class="font-bold m-4 text-lg">Theme Selection</p>
<form method="POST" use:enhance={submitUpdateTheme}>
<li>
<button formaction="/?/setTheme&theme=light"
>Light<WeatherSunny class="w-6 h-6" />
</button>
</li>
<li>
<button formaction="/?/setTheme&theme=dark">Dark<WeatherNight class="w-6 h-6" /></button
>
</li>
<li>
<button formaction="/?/setTheme&theme=night"
>Night<WeatherNight class="w-6 h-6" /></button
>
</li>
<li>
<button formaction="/?/setTheme&theme=forest">Forest<Forest class="w-6 h-6" /></button>
<button formaction="/?/setTheme&theme=garden">Garden<Flower class="w-6 h-6" /></button>
<button formaction="/?/setTheme&theme=aqua">Aqua<Water class="w-6 h-6" /></button>
</li>
</form>
</ul>
</div>
</div>
</div>