Trying to make pages adjust dynamically for navbar

fclauncher/frontend/src/App.svelte

@@ -4,7 +4,7 @@
 	import Loading from './Loading.svelte'
   import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
 	import { onMount } from 'svelte'
-	import { loading, testPage } from './global'
+	import { loading, testPage, navMargin } from './global'
 	import { slide } from 'svelte/transition'
     import Navbar from './Navbar.svelte'
 	import Testpage from './Testpage.svelte'

fclauncher/frontend/src/Navbar.svelte

@@ -1,9 +1,18 @@
 <script lang="ts" src="https://kit.fontawesome.com/172593a6a5.js" crossorigin="anonymous">
-import {addingInstance, testPage} from './global'
+    import { main } from '../wailsjs/go/models';
+import {addingInstance, testPage, navMargin} from './global'
+
+function extend(){
+    $navMargin = 17;
+}
+
+function unextend(){
+    $navMargin = 6;
+}
 </script>
 
 <main>
-<nav class="navbar">
+<nav class="navbar" id="navbar" on:mouseover={extend} on:focus={extend} on:mouseleave={unextend}>
     <ul class="navbar-nav">
         <li class="logo">
             <a href="#" class="nav-link">

fclauncher/frontend/src/Testpage.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 import {LaunchInstance} from '../wailsjs/go/main/InstanceManager';
-import {instances, loading} from './global'
+import {instances, loading, navMargin} from './global'
     var testArray = ["test","test2","test3"];
 
     let pack: string = "";
     let instance: string
     let radio: string = "";
+    let marginScale: string= $navMargin + "rem";
 
     function launchclick(event) {
 		$loading = true
@@ -17,7 +18,9 @@ import {instances, loading} from './global'
 </script>
 
 
-<main>
+<main style="margin-left: {marginScale};">
+    <div class="header">
+        <div>Instances</div>
     <div class="container">
         <div class="tile-group">
             {#each $instances as instance}
@@ -32,8 +35,9 @@ import {instances, loading} from './global'
             
         </div>
     </div>
+    </div>
     <div class="options-container">
-        <button class="launch-button" on:click={launchclick}>Launch {radio}</button>
+        <button class="launch-button" on:click={launchclick}>Launch {$navMargin}</button>
         </div>
 </main>
 <style>
@@ -51,31 +55,31 @@ body{
 main{
     display: flex;
     flex-direction: row;
-    justify-content: right;
+}
+
+.header{
+    flex: 3;
 }
 .options-container{
     display: flex;
     height: 100vh;
-    width: 20rem;
-    border: green 2px;
     justify-self: right;
     justify-content: center;
     align-items: center;
+    width: 15rem;
 }
 .launch-button{
     height: 3rem;
 }
 .container{
    display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  min-width: 70%;
+   min-height: fit-content;
 }
 .tile-group{
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    flex: 1;
+    flex-grow:1 ;
 }
 .input-container{
     position: relative;

fclauncher/frontend/src/global.ts

@@ -3,3 +3,4 @@ export const loading = writable(true)
 export const addingInstance = writable(false)
 export const testPage = writable(false)
 export const instances = writable([])
+export const navMargin = writable(3)