Revert "Hide top on scroll (#589)" (#594)

# Motivation

To unblock merging to nns-dapp, we temporarily reverted the auto-hiding
header on scroll feature. Since it’s not being published, no UX
degradation is expected.

# Changes

- revert pr #589.

# Screenshots

No changes.

src/lib/components/Content.svelte

@@ -7,14 +7,11 @@
   import { onDestroy } from "svelte";
   import ContentBackdrop from "$lib/components/ContentBackdrop.svelte";
   import Header from "$lib/components/Header.svelte";
-  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let back = false;
 
   // Observed: nested component - bottom sheet - might not call destroy when navigating route and therefore offset might not be reseted which is not the case here
   onDestroy(() => ($layoutBottomOffset = 0));
-
-  let scrollContainer: HTMLDivElement;
 </script>
 
 <div
@@ -28,13 +25,9 @@
     <slot name="toolbar-end" slot="toolbar-end" />
   </Header>
 
-  <div
-    class="scrollable-content"
-    class:open={$layoutMenuOpen}
-    bind:this={scrollContainer}
-  >
+  <div class="scrollable-content" class:open={$layoutMenuOpen}>
     <ContentBackdrop />
-    <ScrollSentinel {scrollContainer} />
+
     <slot />
   </div>
 </div>

src/lib/components/Header.svelte

@@ -2,12 +2,11 @@
   import Toolbar from "$lib/components/Toolbar.svelte";
   import MenuButton from "$lib/components/MenuButton.svelte";
   import Back from "$lib/components/Back.svelte";
-  import { layoutContentTopHidden } from "$lib/stores/layout.store";
 
   export let back = false;
 </script>
 
-<header data-tid="header-component" class:hidden={$layoutContentTopHidden}>
+<header data-tid="header-component">
   <Toolbar>
     <svelte:fragment slot="start">
       {#if back}
@@ -28,23 +27,11 @@
 
   header {
     --toolbar-padding: 0;
-    transition: all var(--animation-time-normal) ease-in-out;
-
     @include media.min-width(medium) {
       --toolbar-padding: 0 var(--padding-2x);
     }
     @include media.min-width(large) {
       --toolbar-padding: 0;
     }
-
-    &.hidden {
-      opacity: 0;
-      transform: translateY(-100%);
-      // Reset on tablet+
-      @include media.min-width(medium) {
-        opacity: 1;
-        transform: none;
-      }
-    }
   }
 </style>

src/lib/components/Island.svelte

@@ -2,7 +2,6 @@
   import { onDestroy } from "svelte";
   import { layoutContentScrollY } from "$lib/stores/layout.store";
   import { BREAKPOINT_LARGE } from "$lib/constants/constants";
-  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let testId: string | undefined = undefined;
 
@@ -11,15 +10,12 @@
     layoutContentScrollY.set(innerWidth < BREAKPOINT_LARGE ? "auto" : "hidden");
 
   onDestroy(() => layoutContentScrollY.set("auto"));
-
-  let scrollContainer: HTMLElement;
 </script>
 
 <svelte:window bind:innerWidth />
 
 <div class="island" data-tid={testId}>
-  <div class="scrollable-island" bind:this={scrollContainer}>
-    <ScrollSentinel {scrollContainer} />
+  <div class="scrollable-island">
     <slot />
   </div>
 </div>

src/lib/components/SplitContent.svelte

@@ -7,7 +7,6 @@
   } from "$lib/stores/layout.store";
   import Header from "$lib/components/Header.svelte";
   import ContentBackdrop from "$lib/components/ContentBackdrop.svelte";
-  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let back = false;
   export const resetScrollPosition = () => {
@@ -44,7 +43,6 @@
     <div class="scrollable-content-end" bind:this={scrollableElement}>
       <ContentBackdrop />
 
-      <ScrollSentinel scrollContainer={scrollableElement} />
       <slot name="end" />
     </div>
   </div>

src/lib/components/SplitPane.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-  import {
-    layoutContentTopHidden,
-    layoutMenuOpen,
-  } from "$lib/stores/layout.store";
+  import { layoutMenuOpen } from "$lib/stores/layout.store";
 
   let innerWidth = 0;
 
@@ -21,7 +18,7 @@
 
 <svelte:window bind:innerWidth />
 
-<div class="split-pane" class:header-hidden={$layoutContentTopHidden}>
+<div class="split-pane">
   <slot name="menu" />
   <slot />
 </div>
@@ -45,18 +42,6 @@
       var(--header-offset, 0px) + var(--header-height)
     );
     padding-top: var(--split-pane-content-top-offset);
-    transition: padding-top var(--animation-time-normal) ease;
-
-    &.header-hidden {
-      padding-top: 0;
-      // Reset on tablet+
-      @include media.min-width(medium) {
-        padding-top: var(--split-pane-content-top-offset);
-      }
-      @include media.min-width(large) {
-        padding-top: var(--header-offset, 0);
-      }
-    }
 
     :global(header) {
       position: fixed;

src/lib/stores/layout.store.ts

@@ -3,4 +3,3 @@ import { writable } from "svelte/store";
 export const layoutBottomOffset = writable<number>(0);
 export const layoutMenuOpen = writable<boolean>(false);
 export const layoutContentScrollY = writable<"hidden" | "auto">("auto");
-export const layoutContentTopHidden = writable<boolean>(false);