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}