From e85672dd756f3868ac1939fea240cee93b77bda6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 11 Jul 2024 09:39:43 +0800
Subject: [PATCH] Add an overlay when the left menu is opened in slide out mode

---
 .../components/templates/NavigationLayout.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx
index c6364fe19..e8e97630d 100644
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/packages/web/components/templates/NavigationLayout.tsx
@@ -143,6 +143,26 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
               },
             }}
           ></SpanBox>
+          <SpanBox
+            css={{
+              display: 'none',
+              position: 'fixed',
+              zIndex: '2',
+              backgroundColor: 'var(--colors-overlay)',
+              '@mdDown': {
+                display: 'flex',
+                top: '0px',
+                left: LIBRARY_LEFT_MENU_WIDTH,
+                width: '100vw',
+                height: '100vh',
+                pointerEvents: 'auto',
+              },
+            }}
+            onClick={(event) => {
+              props.setShowNavigationMenu(false)
+              event.stopPropagation()
+            }}
+          ></SpanBox>
         </>
       )}
       {props.children}