dmxconnect/frontend/src/App.svelte

<script>
  import logo from './assets/images/logo-universal.png'
  import {Greet} from '../wailsjs/go/main/App.js'
  import { _ } from 'svelte-i18n'
	import NavigationBar from './components/NavigationBar.svelte';
  import Clock from './components/Clock.svelte'
  import Stage from './components/Stage.svelte';
  import Atmo from './components/Atmo.svelte';
  import Settings from './components/Settings.svelte';
  import DevicesLibrary from './components/DevicesLibrary.svelte';

  let selectedMenu = "stage"
  // When the navigation menu changed, update the selected menu
	function onNavigationChanged(event){
    selectedMenu = event.detail.menu;
	}
</script>

<header>
    <NavigationBar on:navigationChanged="{onNavigationChanged}"/>
    <Clock/>
</header>
<main>
	{#if selectedMenu === "stage"}
  <Stage />
  {:else if selectedMenu === "atmo"}
  <Atmo />
  {:else if selectedMenu === "settings"}
  <Settings />
  {:else if selectedMenu === "devicesLibrary"}
  <DevicesLibrary />
  {/if}
</main>

<style>
	main {
		text-align: left;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>