Direction changes

Author: ReKylee

src/lib/components/Header.svelte

@@ -6,6 +6,7 @@
 
 <header
     class="mb-8 flex flex-col items-center justify-between border-b-2 border-ctp-surface1 pb-4 md:flex-row"
+    dir="ltr"
 >
     <div class="relative mb-4 text-2xl font-bold md:mb-0">
         <span class="glitch text-ctp-pink" data-text={$t("name")}>

src/routes/+layout.svelte

@@ -3,11 +3,14 @@
     import Footer from "$lib/components/Footer.svelte";
     import { theme } from "$lib/stores/theme";
     import { language } from "$lib/stores/language";
-    import { onMount } from "svelte";
-    onMount(() => {
-        theme.init();
-        language.init();
-    });
+    import { browser } from "$app/environment";
+
+    theme.init();
+    language.init();
+
+    $: if (browser) {
+        document.documentElement.dir = $language === "he" ? "rtl" : "ltr";
+    }
 </script>
 
 <div class="min-h-screen bg-ctp-crust font-sans text-ctp-text">