dmxconnect/frontend/src/App.svelte

<script>
  import { _ } from 'svelte-i18n'
	import NavigationBar from './components/General/NavigationBar.svelte';
  import Clock from './components/General/Clock.svelte'
  import Preparation from './components/Preparation/Preparation.svelte';
  import Animation from './components/Animation/Animation.svelte';
  import Settings from './components/Settings/Settings.svelte';
  import Devices from './components/Devices/Devices.svelte';
  import Show from './components/Show/Show.svelte';
  import GeneralConsole from './components/Console/GeneralConsole.svelte';

  let selectedMenu = "settings"
  // 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 === "settings"}
  <Settings />
  {:else if selectedMenu === "devices"}
  <Devices />
  {:else if selectedMenu === "preparation"}
  <Preparation />
  {:else if selectedMenu === "animation"}
  <Animation />
  {:else if selectedMenu === "show"}
  <Show />
  {:else if selectedMenu === "console"}
  <GeneralConsole />
  {/if}
</main>

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

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