navbar controls things

fclauncher/frontend/src/Instances.svelte

@@ -3,14 +3,13 @@
 	import {GetVersions} from '../wailsjs/go/main/App.js'
 	import {GetFabricVersions} from '../wailsjs/go/main/Fabric.js'
 	import {onMount} from 'svelte'
-	import {loading} from './global.ts'
+	import {loading, addingInstance} from './global'
 	import {slide} from 'svelte/transition'
 
   let modpacks: string[] = []
 	let pack: string
 	let instances: Instance[] = []
 	let instance: string
-	let addingInstance: boolean = false
 	let name: string = "New Modpack"
 	let loader: string = "none"
 	let fabric_ver: string = ""
@@ -55,13 +54,13 @@
 		InstallVanilla(pack, name).then(() => {
 			switch (loader){
 			case "none":
-				addingInstance = false
+				$addingInstance = false
 				$loading = false
 				updateLists()
 			break
 			case "fabric":
 				InstallFabric(name, fabric_ver).then(() => {
-					addingInstance = false
+					$addingInstance = false
 					$loading = false
 					updateLists()
 				})
@@ -87,7 +86,7 @@
   </select>
 	<button on:click={onclick}>Launch</button>
 	<br/>
-	{#if addingInstance}
+	{#if $addingInstance}
 		<div transition:slide="{{duration:300}}">
 			<select id="pack" on:change={onchange} bind:value={pack} name="pack">Select a Modpack: 
 				{#each modpacks as pack}
@@ -115,10 +114,10 @@
 			{/if}
 			<br/>
 			<button on:click={install}>Install</button>
-			<button on:click={() => {addingInstance = false}}>Cancel</button>
+			<button on:click={() => {$addingInstance = false}}>Cancel</button>
 		</div>
 	{:else}
-		<button on:click={() => {addingInstance = true}}>Add Instance</button>
+		<button on:click={() => {$addingInstance = true}}>Add Instance</button>
 	{/if}
 </main>
 

fclauncher/frontend/src/Navbar.svelte

@@ -1,4 +1,6 @@
-<script src="https://kit.fontawesome.com/172593a6a5.js" crossorigin="anonymous"></script>
+<script lang="ts" src="https://kit.fontawesome.com/172593a6a5.js" crossorigin="anonymous">
+import {addingInstance} from './global'
+</script>
 
 <main>
 <nav class="navbar">
@@ -13,7 +15,7 @@
 
         </li>
         <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="#" class="nav-link" on:click={() => {$addingInstance = false}}>
                 <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 576 512"><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>
 
                 <span class="link-text">Instances</span>
@@ -29,7 +31,7 @@
 
         </li>
         <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="#" class="nav-link" on:click={() => {$addingInstance = true}}>
                 <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
 
                 <span class="link-text">New Instance</span>

fclauncher/frontend/src/global.ts

@@ -1,2 +1,3 @@
 import { writable } from "svelte/store"
 export const loading = writable(true)
+export const addingInstance = writable(false)