From 5ef60df3d54b4ec91d795119a3ef7cf341bdc082 Mon Sep 17 00:00:00 2001
From: Jeremy Valentine <38669521+valentine195@users.noreply.github.com>
Date: Sat, 17 Jun 2023 19:50:32 -0400
Subject: [PATCH] fix: sticky nav panel (close #38)

---
 src/calendar/ui/Calendar.svelte | 44 ++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/calendar/ui/Calendar.svelte b/src/calendar/ui/Calendar.svelte
index aa2dc76..88a904e 100644
--- a/src/calendar/ui/Calendar.svelte
+++ b/src/calendar/ui/Calendar.svelte
@@ -85,23 +85,25 @@
             </div>
             <Nav />
         </div>
-        {#if $viewState == ViewState.Year}
-            <Year />
-        {:else if $viewState == ViewState.Month}
-            {#key $displaying}
-                <Month year={$displaying.year} month={$displaying.month} />
-            {/key}
-        {:else if $viewState == ViewState.Week}
-            <Weekdays year={$displaying.year} month={$displaying.month} />
-            <Week
-                year={$displaying.year}
-                month={$displaying.month}
-                dayArray={weekForDay}
-                {weekNumber}
-            />
-        {:else if $viewState == ViewState.Day}
-            <DayView />
-        {/if}
+        <div class="calendar">
+            {#if $viewState == ViewState.Year}
+                <Year />
+            {:else if $viewState == ViewState.Month}
+                {#key $displaying}
+                    <Month year={$displaying.year} month={$displaying.month} />
+                {/key}
+            {:else if $viewState == ViewState.Week}
+                <Weekdays year={$displaying.year} month={$displaying.month} />
+                <Week
+                    year={$displaying.year}
+                    month={$displaying.month}
+                    dayArray={weekForDay}
+                    {weekNumber}
+                />
+            {:else if $viewState == ViewState.Day}
+                <DayView />
+            {/if}
+        </div>
         {#if $viewing}
             <hr />
             <DayView />
@@ -110,6 +112,14 @@
 {/key}
 
 <style scoped>
+    .calendar-container {
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+    .calendar {
+        overflow: auto;
+    }
     .top-container {
         display: flex;
         flex-flow: column;