🚝 Adds gap between hamburger and view selector

This commit is contained in:
Rune Harlyk
2024-08-26 19:59:26 +02:00
committed by Rune Harlyk
parent d903bd5a1c
commit a4d8f0f613
@@ -1,41 +1,41 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores';
import { telemetry } from '$lib/stores/telemetry'; import { telemetry } from '$lib/stores/telemetry';
import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'; import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
import BatteryIndicator from '$lib/components/statusbar/BatteryIndicator.svelte'; import BatteryIndicator from '$lib/components/statusbar/BatteryIndicator.svelte';
import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'; import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte';
import SleepButton from './SleepButton.svelte'; import SleepButton from './SleepButton.svelte';
import ThemeButton from './ThemeButton.svelte'; import ThemeButton from './ThemeButton.svelte';
import FullscreenButton from './FullscreenButton.svelte'; import FullscreenButton from './FullscreenButton.svelte';
import StopButton from './StopButton.svelte'; import StopButton from './StopButton.svelte';
import ViewSelector from './ViewSelector.svelte'; import ViewSelector from './ViewSelector.svelte';
import { Hamburger } from '../icons'; import { Hamburger } from '../icons';
</script> </script>
<div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0"> <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
<div class="flex-1"> <div class="flex-1 gap-2">
<label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button"> <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
<Hamburger class="h-6 w-auto" /> <Hamburger class="h-6 w-auto" />
</label> </label>
{#if $page.data.title === 'Controller'} {#if $page.data.title === 'Controller'}
<ViewSelector /> <ViewSelector />
{:else} {:else}
<h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1> <h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
{/if} {/if}
</div> </div>
<UpdateIndicator /> <UpdateIndicator />
<FullscreenButton /> <FullscreenButton />
<ThemeButton/> <ThemeButton />
<RssiIndicator rssi={$telemetry.rssi.rssi}/> <RssiIndicator rssi={$telemetry.rssi.rssi} />
<BatteryIndicator battery={$telemetry.battery} /> <BatteryIndicator battery={$telemetry.battery} />
<SleepButton /> <SleepButton />
<StopButton /> <StopButton />
</div> </div>