sveltekit-ui 1.0.0

package/src/lib/Components/Layout/NavBar/FullNav/index.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { fly } from "svelte/transition"
+  import stop_scroll_propagation_y from "$lib/actions/stop_scroll_propagation_y"
+
+  let { manager, full_nav } = $props()
+</script>
+
+{#if manager?.is_full_nav_shown}
+  <div
+    role="button"
+    tabindex="0"
+    class="underlay"
+    onwheel={(e) => e.stopPropagation()}
+    ontouchmove={(e) => e.stopPropagation()}
+    onclick={() => manager.set_is_full_nav_toggled_on(false)}
+    onkeydown={(event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        manager.set_is_full_nav_toggled_on(false)
+      }
+    }}
+  ></div>
+  <div
+    class="container"
+    style="height: {manager?.available_content_height + 1}px; top: {manager?.shown_nav_bar_height - 1}px;"
+    in:fly={{ duration: 300, x: -255, opacity: "100%" }}
+    out:fly={{ duration: 300, x: -255, opacity: "100%" }}
+  >
+    {#if full_nav}
+      {@render full_nav()}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .underlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--shadow8);
+  }
+  .container {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 25rem;
+    z-index: 9;
+    border-right: 1px solid var(--shadow7-t);
+    background-color: var(--bg);
+    overflow: scroll;
+  }
+</style>

package/src/lib/Components/Layout/NavBar/NavGuts/index.svelte

@@ -0,0 +1,87 @@
+<script>
+  import Hamburger from "$lib/Components/Hamburger/index.svelte"
+
+  let { manager, logo, nav_bar_extra } = $props()
+
+  let nav_bar_width = $state(null)
+  let logo_width = $state(null)
+  let nav_links_width = $state(null)
+  let nav_hamburger_width = $state(null)
+
+  // let is_room_for_links = $derived(
+  //   nav_bar_width && logo_width && nav_links_width && nav_hamburger_width
+  //     ? nav_bar_width - logo_width - nav_links_width - nav_hamburger_width > 0
+  //     : true
+  // )
+  // class:hide_but_maintain_width={!is_room_for_links}
+</script>
+
+<div class="container" bind:offsetWidth={nav_bar_width}>
+  <div style="display: flex; align-items: center; gap: 1rem;">
+    {#if manager?.is_show_hamburger}
+      <div class="nav_hamburger" bind:offsetWidth={nav_hamburger_width}>
+        <Hamburger
+          val={manager.is_full_nav_toggled_on}
+          on_change={(input) => manager.set_is_full_nav_toggled_on(input)}
+        />
+      </div>
+    {/if}
+    <div
+      class="logo_container"
+      role="button"
+      tabindex="0"
+      onclick={() => manager.to_home()}
+      onkeydown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          manager.to_home()
+        }
+      }}
+      bind:offsetWidth={logo_width}
+    >
+      {#if logo}
+        {@render logo()}
+      {/if}
+    </div>
+  </div>
+  <div class="nav_links" bind:offsetWidth={nav_links_width}>
+    {#if nav_bar_extra}
+      {@render nav_bar_extra()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex: 1;
+    overflow: scroll;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .logo_container {
+    display: flex;
+    align-self: center;
+    flex: 0;
+    padding: 0.1rem;
+    margin-right: 0.5rem;
+    min-height: 3rem;
+    min-width: fit-content;
+  }
+  .nav_links {
+    display: flex;
+    align-items: center;
+  }
+  /* .hide_but_maintain_width {
+    position: fixed;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+    z-index: -1;
+  } */
+  .nav_hamburger {
+    display: flex;
+    align-items: center;
+    height: 3rem;
+    margin-left: 0.1rem;
+  }
+</style>

package/src/lib/Components/Layout/NavBar/index.svelte

@@ -0,0 +1,72 @@
+<script>
+  import NavGuts from "./NavGuts/index.svelte"
+  import FullNav from "./FullNav/index.svelte"
+
+  let { manager, logo, sub_bar, nav_bar_extra, full_nav } = $props()
+
+  let nav_bar_height_loc = $state(null)
+  $effect(() => {
+    manager.set_nav_bar_height(nav_bar_height_loc)
+  })
+</script>
+
+<div class="container">
+  <div class="navbar" bind:offsetHeight={nav_bar_height_loc}>
+    <div
+      class="navbar_body"
+      class:floated_nav={!manager?.is_at_top}
+      class:below_top={!manager?.is_at_top || manager?.is_full_nav_toggled_on}
+      class:flat_card={manager?.is_at_top}
+      style="--br: {manager?.border_radius}rem; --nav_margin_x: {manager?.nav_margin_x}rem; --nav_margin_top: {manager?.nav_margin_top}rem; --nav_margin_bottom: {manager?.nav_margin_bottom}rem;"
+    >
+      <div
+        class="mainbar"
+        style="--nav_main_padding_x: {manager?.nav_main_padding_x}rem; --nav_main_padding_y: {manager?.nav_main_padding_y}rem;"
+      >
+        <NavGuts {manager} {logo} {nav_bar_extra} />
+      </div>
+      {#if sub_bar}
+        {@render sub_bar()}
+      {/if}
+    </div>
+  </div>
+  <div class="full_nav">
+    <FullNav {manager} {full_nav} />
+  </div>
+</div>
+
+<style>
+  .container {
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    flex: 0;
+  }
+  .navbar_body {
+    border-radius: var(--br);
+    margin: var(--nav_margin_top) var(--nav_margin_x) var(--nav_margin_bottom) var(--nav_margin_x);
+    min-height: 5rem;
+    padding: 0;
+    background-color: var(--bg);
+    border-bottom: 1px solid transparent;
+  }
+  .mainbar {
+    display: flex;
+    flex: 1;
+    padding: var(--nav_main_padding_y) var(--nav_main_padding_x);
+  }
+  .below_top {
+    border-bottom: 1px solid var(--shadow7-t);
+  }
+  /* .floated_nav {
+		box-shadow: 0 0.1rem 1rem var(--g2);
+	} */
+  .full_nav {
+    position: relative;
+    z-index: -1;
+  }
+</style>

package/src/lib/Components/Layout/index.svelte

@@ -0,0 +1,149 @@
+<script>
+  import NavBar from "./NavBar/index.svelte"
+  import Alert from "$lib/Components/Alert/index.svelte"
+  import Confetti from "$lib/Components/Confetti/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
+  import { goto, beforeNavigate, afterNavigate } from "$app/navigation"
+  import { innerHeight } from "svelte/reactivity/window"
+  import { fade } from "svelte/transition"
+  import { onMount } from "svelte"
+
+  let { manager, content, nav_bar_logo, nav_bar_extra, full_nav, sub_bar, additional } = $props()
+
+  beforeNavigate(() => {
+    manager.set_is_navigating(true)
+  })
+  afterNavigate(() => {
+    manager.set_is_navigating(false)
+  })
+
+  $effect(() => {
+    manager.set_base_theme()
+  })
+
+  let screen_width_loc = $state(null)
+  $effect(() => {
+    manager.set_screen_width(screen_width_loc)
+  })
+
+  $effect(() => {
+    manager.set_screen_height(innerHeight.current)
+  })
+
+  onMount(() => {
+    if (manager?.favicons?.favicon_inactive) {
+      function update_favicon() {
+        const favicon = document.querySelector('link[rel="icon"][sizes="any"]')
+        const path = document.hidden ? manager?.favicons?.favicon_inactive : manager?.favicons?.favicon
+        favicon?.setAttribute("href", path)
+      }
+      document.addEventListener("visibilitychange", update_favicon)
+      return () => {
+        document.removeEventListener("visibilitychange", update_favicon)
+      }
+    }
+  })
+</script>
+
+<svelte:window
+  onscrollend={() => manager?.handle_scrollend()}
+  onscroll={() => manager?.handle_scroll()}
+  onkeypress={(e) => {
+    if ((e?.metaKey || e?.ctrlKey) && e?.key && e?.key.toLowerCase() === "b") {
+      event.preventDefault()
+      manager.set_is_full_nav_toggled_on(!manager?.is_full_nav_toggled_on)
+    }
+  }}
+/>
+
+{#if manager}
+  <div class="container" bind:clientWidth={screen_width_loc}>
+    {#if !manager?.is_all_nav_bar_hidden}
+      <NavBar {manager} logo={nav_bar_logo} {nav_bar_extra} {full_nav} {sub_bar} />
+    {/if}
+    <div class="fill_screen">
+      {#if content}
+        {@render content()}
+      {/if}
+    </div>
+    <div class="additional">
+      {#if additional}
+        {@render additional()}
+      {/if}
+    </div>
+    <Alert manager={manager.alert_manager} />
+    <Confetti manager={manager?.confetti_manager} />
+  </div>
+  {#if manager?.is_navigating}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div
+      transition:fade={{ delay: 0, duration: 500 }}
+      onscroll={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      onclick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      onkeypress={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      onpointerdown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      ontouchdown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      class="loader_container"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading, please wait"
+    >
+      <div class="loader_inner_container">
+        <LoadingWheel sw={0.7} />
+      </div>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  .container {
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+  }
+  .fill_screen {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-x: scroll;
+    /* overflow-x: hidden; tbd mainly cause image display bg blur */
+  }
+  .additional {
+    position: absolute;
+  }
+  .loader_container {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 0;
+    min-height: 100vh;
+    min-height: 100dvh;
+    background: var(--shadow3-t);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 14;
+  }
+  .loader_inner_container {
+    height: 14rem;
+    width: 14rem;
+  }
+</style>