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

@@ -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={() => {

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 />