Add UserIcon and selectedDate select to nav in layout

This commit is contained in:
qowevisa 2024-11-14 19:51:34 +02:00
parent 16222089b4
commit a790150536

View File

@ -3,13 +3,9 @@
let { children } = $props();
import { page } from '$app/stores';
const currentPath = $derived($page.url.pathname);
// import { goto } from '$app/navigation';
import {selectedDate} from "$lib/stores/dateStore"
import UserIcon from '$lib/icons/UserIcon.svelte';
// $effect(()=>{
// if (!isAuthenticated && $page.url.pathname != "/login"){
// // goto("/login")
// }
// });
const paths = [
{
Path: "/ping",
@ -41,16 +37,25 @@
{#if $page.url.pathname != "/login"}
<nav class="bg-gray-900 p-4 flex justify-between items-center">
<div class="flex flex-col space-y-2 w-full">
<!-- <div class="flex flex-grow justify-center px-4"> -->
<!-- <input type="text" placeholder="Search" class="w-2/5 bg-gray-800 text-gray-400 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> -->
<!-- </div> -->
<!-- <div class="border-t border-gray-700 my-2"></div> -->
<div class="flex text-white space-x-4">
{#each paths as path}
<a class="button-link {currentPath === path.Path ? 'onPath' : ''}" href="{path.Path}">{path.Name}</a>
{/each}
</div>
</div>
<div class="flex items-center space-x-4">
<label class="text-white">
Select Date:
<input
type="date"
bind:value={$selectedDate}
class="bg-gray-800 text-white p-2 rounded-md border border-gray-700"
/>
</label>
<button class="bg-gray-700 text-white p-2 rounded-full">
<UserIcon width="1.5em" height="1.5em" color="#f0f0f0"/>
</button>
</div>
</nav>
{/if}