feat: setup drizzle (#594)

* chore: migration to SvelteKit 2

* stage 1: migrate to svelte 5 and fix rerendering issues

* stage 2: fix more $: reactivity across dashboard

* fix merge conflicts

* chore: migrate code in main to svelte 5

* chore: update preventDefault

* chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte

* chore: enforce .ts across dashboard

* rename from classroomio-com to website

* stage-3: Replace carbon icon svelte with lucide icon

* update lock file

* chore: finish icon replacement

* fix: settings and setup page multiple rerender

* stage 3: More icon and rerendering fixes

* feat: setup drizzle and better auth

* fix: onboarding validation error showing translation key #586 (#593)

* fix: onboarding validation error showing translation key #586

* fix: remove debug log for profile update errors

* chore: add a clean command

* fix: remove message from email verification response

apps/dashboard/src/lib/components/Navigation/MobileMenu.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
+  import { stopPropagation } from '$lib/utils/functions/svelte';
+
   import { page } from '$app/stores';
   import { user } from '$lib/utils/store/user';
   import { type TCustomLinks } from './types';
   import CustomLinks from './CustomLinks.svelte';
   import AuthButtons from './AuthButtons.svelte';
 
-  export let mobileMenuOpen = false;
-  export let customLinks: TCustomLinks | undefined = undefined;
-  export let disableSignup = false;
-  export let redirect = '';
+  interface Props {
+    mobileMenuOpen?: boolean;
+    customLinks?: TCustomLinks | undefined;
+    disableSignup?: boolean;
+    redirect?: string;
+  }
 
-  let mobileMenuRef: HTMLElement;
+  let {
+    mobileMenuOpen = $bindable(false),
+    customLinks = undefined,
+    disableSignup = false,
+    redirect = ''
+  }: Props = $props();
 
   function closeMobileMenu() {
     mobileMenuOpen = false;
@@ -18,33 +27,25 @@
 </script>
 
 <!-- Mobile Menu Overlay -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if mobileMenuOpen}
-  <div
-    class="mobile-menu-overlay fixed inset-0 z-50 bg-black bg-opacity-50 lg:hidden"
-    on:click={closeMobileMenu}
-  >
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="mobile-menu-overlay fixed inset-0 z-50 bg-black bg-opacity-50 lg:hidden" onclick={closeMobileMenu}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      bind:this={mobileMenuRef}
       class="mobile-menu-sidebar absolute right-0 top-0 h-full w-64 transform bg-white shadow-lg transition-transform duration-300 ease-in-out"
-      on:click|stopPropagation
+      onclick={stopPropagation()}
     >
       <div class="flex items-center justify-between border-b border-gray-200 p-4">
         <h3 class="text-lg font-semibold text-gray-800">Menu</h3>
         <button
-          on:click={closeMobileMenu}
+          onclick={closeMobileMenu}
+          aria-label="Close menu"
           class="rounded-md p-2 text-gray-500 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-700"
         >
           <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            ></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
           </svg>
         </button>
       </div>
@@ -56,12 +57,7 @@
           <!-- Login/Signup buttons in mobile menu -->
           {#if !$user.isLoggedIn && !$page.url.pathname?.includes('/404')}
             <li class="pt-4">
-              <AuthButtons
-                {disableSignup}
-                {redirect}
-                isMobile={true}
-                onMobileClick={closeMobileMenu}
-              />
+              <AuthButtons {disableSignup} {redirect} isMobile={true} onMobileClick={closeMobileMenu} />
             </li>
           {/if}
         </ul>