Init

src/routes/__layout.svelte

@@ -1,59 +1,41 @@
 <script>
-  let scrollTop = 0
+  import '../app.css'
+  import NavBar from '../components/NavBar.svelte'
+  import Modal from 'svelte-simple-modal'
 
-  function scrollToTop(argument) {
-    document.body.scrollTop = 0
-    document.documentElement.scrollTop = 0
-  }
+  let scrollTop = 0
 </script>
 
 <svelte:window bind:scrollY="{scrollTop}" />
+<svelte:head>
+  <script>
+    if (document) {
+      let mode = localStorage.theme || 'light'
+      if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark')
+        localStorage.theme = 'dark'
+      } else {
+        document.documentElement.classList.remove('dark')
+        localStorage.theme = 'light'
+      }
+    }
+  </script>
+</svelte:head>
 
-<div class="navbar" style="background-color: transparent">
-  <div class="navbar-end">
-    <div class="navbar-item">
-      <a href="https://github.com/iptv-org/api">
-        <span class="icon">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <path
-              d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
-            />
-          </svg>
-        </span>
-      </a>
-    </div>
-  </div>
-</div>
-
-<slot></slot>
-
-<footer
-  class="footer"
-  style="
-    background-color: transparent;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    padding: 3rem 1.5rem;
-    pointer-events: none;
-  "
+<header
+  class:absolute="{scrollTop <= 150}"
+  class:fixed="{scrollTop > 150}"
+  class="z-40 w-full min-w-[360px]"
+  style="top: {scrollTop > 150 && scrollTop <= 210 ? scrollTop-210: 0}px"
 >
-  <div class="content">
-    <div class="level">
-      <div class="level-left"></div>
-      <div class="level-right">
-        {#if scrollTop > 100}
-        <button
-          class="button level-item is-hidden-mobile"
-          on:click="{scrollToTop}"
-          style="pointer-events: auto"
-        >
-          <span class="icon is-small">
-            <ion-icon name="arrow-up-outline"></ion-icon>
-          </span>
-        </button>
-        {/if}
-      </div>
-    </div>
-  </div>
-</footer>
+  <NavBar withSearch="{scrollTop > 150}" />
+</header>
+
+<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen pt-10 min-w-[360px]">
+  <Modal
+    unstyled="{true}"
+    classBg="fixed top-0 left-0 z-40 w-screen h-screen flex flex-col bg-black/[.7] overflow-y-scroll"
+    closeButton="{false}"
+    ><slot
+  /></Modal>
+</main>