From 3af31860bb1a7d3e8b886fd8d9f2feb6a50f7a09 Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Thu, 13 Oct 2022 11:50:08 -0400
Subject: [PATCH] Close menu and prevent overscroll (#4739)

* Close menu and prevent overscroll

* Update Shell.tsx

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 packages/ui/v2/core/Shell.tsx                  |  2 +-
 packages/ui/v2/core/layouts/SettingsLayout.tsx | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 5f6379499e..b1999a75e2 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -828,7 +828,7 @@ function MainContainer({
       {/* The following is used for settings navigation on medium and smaller screens */}
       <div
         className={classNames(
-          "absolute z-40 m-0 h-screen w-screen bg-black opacity-50",
+          "overflow-none fixed z-40 m-0 h-screen w-screen overscroll-none bg-black opacity-50",
           sideContainerOpen ? "" : "hidden"
         )}
         onClick={() => {
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index b429372087..55b6b78dec 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -1,6 +1,7 @@
 import { MembershipRole, UserPermissionRole } from "@prisma/client";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect, useState } from "react";
 
 import { classNames } from "@calcom/lib";
@@ -291,6 +292,7 @@ export default function SettingsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const router = useRouter();
   const state = useState(false);
   const [sideContainerOpen, setSideContainerOpen] = state;
 
@@ -307,6 +309,12 @@ export default function SettingsLayout({
     };
   }, []);
 
+  useEffect(() => {
+    if (sideContainerOpen) {
+      setSideContainerOpen(!sideContainerOpen);
+    }
+  }, [router.asPath]);
+
   return (
     <Shell
       flexChildrenContainer
@@ -317,7 +325,7 @@ export default function SettingsLayout({
       SettingsSidebarContainer={
         <div
           className={classNames(
-            "absolute inset-y-0 z-50 m-0 h-screen transform overflow-y-scroll border-gray-100 bg-gray-50 transition duration-200 ease-in-out",
+            "fixed inset-y-0 z-50 m-0 h-screen transform overflow-y-scroll border-gray-100 bg-gray-50 transition duration-200 ease-in-out",
             sideContainerOpen ? "translate-x-0" : "-translate-x-full"
           )}>
           <SettingsSidebarContainer />