Supbase login + waiting list page

src/components/Course/components/Navigation/index.svelte

@@ -82,11 +82,11 @@
     });
   });
 
-  $: {
-    if (process.browser && show !== null) {
-      localStorage.setItem('hideCourseNav', `${!show}`);
-    }
-  }
+  // $: {
+  //   if (process.browser && show !== null) {
+  //     localStorage.setItem('hideCourseNav', `${!show}`);
+  //   }
+  // }
 </script>
 
 <div class="root z-10 {!show && 'hide'}">

src/components/CourseContainer/index.svelte

@@ -41,9 +41,7 @@
 <style>
   .root {
     display: flex;
-    border-right: 1px solid var(--border-color);
     width: 100%;
-    max-width: calc(100% - 100px);
   }
 
   .rightBar {

src/components/Form/TextField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { afterUpdate } from 'svelte';
+  import { onMount } from 'svelte';
   export let label;
   export let placeholder;
   export let value;
@@ -9,7 +9,8 @@
   export let type = 'text';
   export let autoFocus = false;
   export let isRequired = false;
-
+  export let isDisabled = false;
+  export let errorMessage;
   let ref;
 
   function typeAction(node) {
@@ -20,7 +21,7 @@
     }
   }
 
-  afterUpdate(() => {
+  onMount(() => {
     if (autoFocus) {
       ref.focus();
     }
@@ -28,15 +29,25 @@
 </script>
 
 <label class="block {className}">
-  {#if label}<label for="text-field" class="m-0">{label}</label>{/if}
+  {#if label}
+    <label for="text-field" class="m-0">
+      {label} <span class="text-red-700">*</span>
+    </label>
+  {/if}
   <input
     id="text-field"
     use:typeAction
-    class="form-input {inputClassName} p-2 mt-1 block w-full bg-white border border-gray-300"
+    class="form-input p-2 mt-1 block w-full bg-white border {inputClassName} {errorMessage
+      ? 'border-red-500'
+      : 'border-gray-300'}"
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
     bind:this={ref}
-    required={true}
+    required={isRequired}
+    disabled={isDisabled}
   />
+  {#if errorMessage}
+    <p class="text-sm text-red-500">{errorMessage}</p>
+  {/if}
 </label>

src/components/Navigation/index.svelte

@@ -29,8 +29,10 @@
     <li>
       <a
         class="block"
-        aria-current={segment === undefined ? 'page' : undefined}
-        href="."
+        aria-current={segment === undefined || segment === 'dashbboard'
+          ? 'page'
+          : undefined}
+        href="dashbboard"
       >
         Dashboard
       </a>
@@ -64,7 +66,15 @@
       </a>
     </li>
     <span class="flex-grow" />
-    <Avatar src={user.avatar} name={user.label} className="mr-2" />
+    <li>
+      <a
+        class="block"
+        aria-current={segment === 'profile' ? 'page' : undefined}
+        href="profile"
+      >
+        <Avatar src={user.avatar} name={user.label} className="mr-2" />
+      </a>
+    </li>
     <!-- <li class="hidden">
       <a
         class="flex items-center"