From f32f94618048e060f79125afa246377998a9a11e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 25 Jun 2023 01:46:28 -0400
Subject: [PATCH] [AppLayout] Add `overlapHeader` to opt-in to overlapping main
 and header

---
 src/lib/components/AppLayout.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/AppLayout.svelte b/src/lib/components/AppLayout.svelte
index 7b8fb5227..2a8337690 100644
--- a/src/lib/components/AppLayout.svelte
+++ b/src/lib/components/AppLayout.svelte
@@ -12,6 +12,7 @@
 
   export let navWidth = 240;
   export let headerHeight = 64;
+  export let overlapHeader = false;
   /** Control whether nav should be full height (default) or header should be full width */
   export let headerFullWidth = false;
   $: areas = headerFullWidth ? "'header header' 'aside main'" : "'aside header' 'aside main'";
@@ -39,6 +40,7 @@
     classes.root,
     $$props.class
   )}
+  class:overlapHeader
 >
   <!-- Render backdrop first to fix stacking order with <aside> nav -->
   {#if $showDrawer && temporaryDrawer}
@@ -77,7 +79,10 @@
   .AppLayout :global(> main) {
     grid-area: main;
     overflow: auto;
-    /* Overlap under header to support background blur */
+  }
+
+  /* Overlap under header to support background blur */
+  .AppLayout.overlapHeader :global(> main) {
     margin-top: calc(var(--headerHeight) * -1);
     padding-top: var(--headerHeight);
   }