feat: implement header and layout in page.svelte

README.md

@@ -26,4 +26,5 @@ A hello world app for Svelte + 100ms. Built with SvelteKit.
    1. directly in the components, subscribing with the proper selector and calling the unsubscribe method in onDestroy
    2. Creating a few helper svelte store wrappers in hmsStores.ts for commonly used selectors
 8. Create a hmsStore.ts file with helper function to convert from hms to svelte store and create two stores for isConnected and peers in the room.
-9. 
+9. Implement page.svelte, also add a leave on unload function for handling tab closing. Implement header with a logo and a leave button.
+10. 

src/routes/+page.svelte

@@ -1,8 +1,30 @@
 <script>
   import './styles.css';
+  import {hmsActions} from "./hms.ts";
+  import Conference from "./Conference.svelte";
+  import JoinForm from "./JoinForm.svelte";
+  import Header from "./Header.svelte";
+  import Footer from "./Footer.svelte";
+  import {hmsIsConnected} from "./hmsStores.ts";
+
+  function leaveRoom() {
+    hmsActions.leave();
+  }
+
 </script>
 
+<!-- leave room on tab close -->
+<svelte:window on:unload={leaveRoom} />
+
 <svelte:head>
     <title>100ms Svelte App</title>
     <meta name="description" content="Svelte HMS World" />
 </svelte:head>
+
+<Header/>
+{#if $hmsIsConnected}
+    <Conference />
+{:else}
+    <JoinForm />
+{/if}
+<Footer/>

src/routes/Conference.svelte

@@ -0,0 +1 @@
+<p>Conference</p>

src/routes/Header.svelte

@@ -0,0 +1,30 @@
+<script>
+  import {hmsIsConnected} from "./hmsStores.ts";
+  import {hmsActions} from "./hms.ts";
+
+  function leaveRoom() {
+    hmsActions.leave();
+  }
+</script>
+
+
+<header>
+    <img
+            class="logo"
+            src="https://www.100ms.live/assets/logo.svg"
+            alt="100ms Logo"
+    />
+
+    {#if hmsIsConnected}
+        <button id="leave-btn" class="btn-danger" on:click={leaveRoom}> Leave Room </button>
+    {/if}
+</header>
+
+<style>
+    header {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+</style>

src/routes/JoinForm.svelte

@@ -0,0 +1 @@
+<p>Join Form</p>

src/routes/styles.css

@@ -69,6 +69,17 @@ pre {
 	color: var(--color-text);
 }
 
+.btn-danger {
+	border: 1px solid transparent;
+	border-radius: 4px;
+	padding: 6px 14px;
+	background-color: #f44336;
+	color: white;
+	font-family: inherit;
+	font-size: 14px;
+	cursor: pointer;
+}
+
 .text-column {
 	display: flex;
 	max-width: 48rem;