Freeze word navigation strip

Author: MrCars0n

src/routes/lexicon/+page.svelte

@@ -9,7 +9,6 @@
     import Navbar from '$lib/components/Navbar.svelte';
     import WordNavigationStrip from '$lib/components/WordNavigationStrip.svelte';
     import config from '$lib/data/config';
-    import { SearchIcon } from '$lib/icons';
     import {
         currentReversalLettersStore,
         currentReversalWordsStore,
@@ -19,15 +18,12 @@
         vernacularLanguageStore,
         vernacularWordsStore
     } from '$lib/data/stores/lexicon.ts';
-    import { onMount, tick } from 'svelte';
+    import { SearchIcon } from '$lib/icons';
     import { getRoute } from '$lib/navigate';
+    import { onMount, tick } from 'svelte';
 
-    const {
-        vernacularAlphabet,
-        reversalAlphabets,
-        reversalLanguages,
-        reversalIndexes
-    } = $page.data;
+    const { vernacularAlphabet, reversalAlphabets, reversalLanguages, reversalIndexes } =
+        $page.data;
 
     const alphabets = {
         reversal: Object.values(reversalAlphabets[0])[0],
@@ -255,8 +251,12 @@
     });
 </script>
 
-<div class="grid grid-rows-[auto,1fr] fixed bg-base-100" style="height:100vh;height:100dvh;width:100vw;">
-    <!--<div class="flex flex-col min-h-screen max-h-screen bg-base-100">-->
+<div
+    class="grid fixed bg-base-100"
+    class:grid-rows-[auto,auto,1fr]={selectedWord}
+    class:grid-rows-[auto,1fr]={!selectedWord}
+    style="height:100vh;height:100dvh;width:100vw;"
+>
     <Navbar {showBackButton}>
         {#snippet start()}
             <label for="sidebar" class="navbar">
@@ -267,7 +267,7 @@
         {/snippet}
         {#snippet end()}
             <div class="flex flex-nowrap">
-                <div id="extraButtons" class="pr-4">
+                <div id="extraButtons" class:pr-4={!selectedWord}>
                     <button
                         class="dy-btn dy-btn-ghost dy-btn-circle"
                         on:click={() => {
@@ -294,27 +294,33 @@
         />
     {/if}
 
-    <div
-        class="flex-1 overflow-y-auto bg-base-100 width-full"
-        bind:this={scrollContainer}
-        on:scroll={checkIfScrolledToBottom}
-    >
-        {#if selectedWord}
-            {#if !showBackButton}
-            {showBackButton = true}
-            {/if}
-            <WordNavigationStrip
-                currentWord={selectedWord}
-                onSelectWord={selectWord}
-            />
-            <LexiconXmlView
-                {wordIds}
-                onSelectWord={selectWord}
-            />
-        {:else if selectedLanguage === vernacularLanguage}
+    {#if selectedWord}
+        {#if !showBackButton}
+            {(showBackButton = true)}
+        {/if}
+        <WordNavigationStrip currentWord={selectedWord} onSelectWord={selectWord} />
+        <div
+            class="flex-1 overflow-y-auto bg-base-100 width-full"
+            bind:this={scrollContainer}
+            on:scroll={checkIfScrolledToBottom}
+        >
+            <LexiconXmlView {wordIds} onSelectWord={selectWord} />
+        </div>
+    {:else if selectedLanguage === vernacularLanguage}
+        <div
+            class="flex-1 overflow-y-auto bg-base-100 width-full"
+            bind:this={scrollContainer}
+            on:scroll={checkIfScrolledToBottom}
+        >
             <LexiconVernacularListView {vernacularWordsList} onSelectWord={selectWord} />
-        {:else}
+        </div>
+    {:else}
+        <div
+            class="flex-1 overflow-y-auto bg-base-100 width-full"
+            bind:this={scrollContainer}
+            on:scroll={checkIfScrolledToBottom}
+        >
             <LexiconReversalListView {reversalWordsList} onSelectWord={selectWord} />
-        {/if}
-    </div>
+        </div>
+    {/if}
 </div>