Skip to content

Commit

Permalink
style navbar a little
Browse files Browse the repository at this point in the history
  • Loading branch information
Inveracity committed Jul 22, 2023
1 parent 88e9d3d commit 6f32c08
Showing 1 changed file with 26 additions and 17 deletions.
43 changes: 26 additions & 17 deletions frontend/src/components/Navbar.svelte
Original file line number Diff line number Diff line change
@@ -1,31 +1,40 @@
<script>
<script lang="ts">
import { server } from '$lib/stores/server';
import { status } from '$lib/stores/status';
import { RectangleListSolid, UsersSolid } from 'flowbite-svelte-icons';
import Login from './Login.svelte';
import { showUserList } from '$lib/stores/users';
import { showChannelList } from '$lib/stores/channel';
import { currentUser } from '$lib/pocketbase';
import Logout from './Logout.svelte';
$: highlight = $status !== 'connected' ? 'bg-red-400' : 'bg-green-400';
</script>

<div class="navbar bg-base-300">
<div class="flex-1 justify-start gap-2">
<div class="avatar">
<div class="w-2 rounded-full bg-green-400" />
<div class="w-2 rounded-full {highlight}" />
</div>
<div class="btn btn-ghost upper-case text-xl">{$server}</div>
<div>
<button class="btn btn-secondary" on:click|preventDefault={() => showUserList.toggle()}>
<UsersSolid />
</button>
</div>
<div>
<button class="btn btn-secondary" on:click|preventDefault={() => showChannelList.toggle()}>
<RectangleListSolid />
</button>
</div>
{#if $currentUser}
<div class="btn btn-ghost upper-case text-sm">{$currentUser?.name}</div>
<div>
<button class="btn btn-secondary" on:click|preventDefault={() => showUserList.toggle()}>
<UsersSolid />
</button>
</div>
<div>
<button class="btn btn-secondary" on:click|preventDefault={() => showChannelList.toggle()}>
<RectangleListSolid />
</button>
</div>
{/if}
</div>
<div class="flex-none">
<div class="justify-end">
<Login />
{#if $currentUser}
<div class="flex-none">
<div class="justify-end">
<Logout />
</div>
</div>
</div>
{/if}
</div>

0 comments on commit 6f32c08

Please sign in to comment.