Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🖇 Adds navigation for routes

Browse Source
This commit is contained in:
Rune Harlyk
2023-07-12 15:32:30 +02:00
parent 0f857ecefd
commit 0111ffd8a2
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.svelte
+13 -9
View File
@@ -1,22 +1,26 @@
<script lang="ts"> <script lang="ts">
import { Router, Route } from 'svelte-routing';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Topbar from './components/Topbar.svelte'; import TopBar from './components/TopBar.svelte';
import { connect } from './lib/socket'; import { connect } from './lib/socket';
import Stream from './components/Views/Stream.svelte'; import Controller from './routes/Controller.svelte';
import Controls from './components/Controls.svelte'; import Config from './routes/Config.svelte';
import Health from './routes/SystemHealth.svelte';
import location from './lib/location'; import location from './lib/location';
import Sidebar from './components/Sidebar.svelte'; import Sidebar from './components/Sidebar.svelte';
export let url = window.location.pathname;
onMount(() => { onMount(() => {
connect(`ws://${location}`); connect(`ws://${location}`);
}); });
</script> </script>
<main class="w-screen h-screen"> <Router {url}>
<Topbar /> <TopBar />
<Sidebar /> <Sidebar />
<div class="flex justify-center items-center w-full h-full"> <div class="absolute w-full h-full">
<Stream /> <Route path="/" component={Controller} />
<Controls /> <Route path="/config" component={Config} />
<Route path="/health" component={Health} />
</div> </div>
</main> </Router>
app/src/components/Sidebar.svelte
+4 -3
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Link } from 'svelte-routing';
import { Icon, XMark, ChartBar, DevicePhoneMobile, Cog6Tooth } from 'svelte-hero-icons'; import { Icon, XMark, ChartBar, DevicePhoneMobile, Cog6Tooth } from 'svelte-hero-icons';
import { sidebarOpen } from '../lib/store'; import { sidebarOpen } from '../lib/store';
@@ -23,8 +24,8 @@
<Icon src={XMark} size="32" /> <Icon src={XMark} size="32" />
</button> </button>
<div class="h-full w-full flex flex-col justify-evenly items-center"> <div class="h-full w-full flex flex-col justify-evenly items-center">
<button on:click={closeMenu}><Icon src={DevicePhoneMobile} size="32" /></button> <Link to="/"><Icon src={DevicePhoneMobile} size="32" /></Link>
<button on:click={closeMenu}><Icon src={ChartBar} size="32" /></button> <Link to="/health"><Icon src={ChartBar} size="32" /></Link>
<button on:click={closeMenu}><Icon src={Cog6Tooth} size="32" /></button> <Link to="/config"><Icon src={Cog6Tooth} size="32" /></Link>
</div> </div>
</div> </div>