public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Close menu and prevent overscroll (#4739) 

* Close menu and prevent overscroll

* Update Shell.tsx

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/4988/head
Joe Au-Yeung 2022-10-13 11:50:08 -04:00 committed by GitHub
parent f0aded92db
commit 3af31860bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/v2/core/Shell.tsx
View File

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

10
packages/ui/v2/core/layouts/SettingsLayout.tsx
View File

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