72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import { useLocation } from "react-router-dom";
|
|
import { useMemo, ReactNode } from "react";
|
|
import { Path, SIDEBAR_ID, SlotID } from "@/app/constant";
|
|
import { getLang } from "@/app/locales";
|
|
|
|
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
|
import { isIOS } from "@/app/utils";
|
|
import useListenWinResize from "@/app/hooks/useListenWinResize";
|
|
|
|
interface ScreenProps {
|
|
children: ReactNode;
|
|
noAuth: ReactNode;
|
|
sidebar: ReactNode;
|
|
}
|
|
|
|
export default function Screen(props: ScreenProps) {
|
|
const location = useLocation();
|
|
const isAuth = location.pathname === Path.Auth;
|
|
|
|
const isMobileScreen = useMobileScreen();
|
|
const isIOSMobile = useMemo(
|
|
() => isIOS() && isMobileScreen,
|
|
[isMobileScreen],
|
|
);
|
|
|
|
useListenWinResize();
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
bg-global flex h-[100%] w-[100%] bg-center
|
|
max-md:relative max-md:flex-col-reverse
|
|
md:overflow-hidden
|
|
`}
|
|
style={{
|
|
direction: getLang() === "ar" ? "rtl" : "ltr",
|
|
}}
|
|
>
|
|
{isAuth ? (
|
|
props.noAuth
|
|
) : (
|
|
<>
|
|
<div
|
|
className={`
|
|
max-md:absolute max-md:w-[100%] max-md:bottom-0 max-md:z-10
|
|
md:flex-0 md:overflow-hidden
|
|
`}
|
|
id={SIDEBAR_ID}
|
|
>
|
|
{props.sidebar}
|
|
</div>
|
|
|
|
<div
|
|
className={`
|
|
h-[100%]
|
|
max-md:w-[100%]
|
|
md:flex-1 md:min-w-0 md:overflow-hidden
|
|
`}
|
|
id={SlotID.AppBody}
|
|
style={{
|
|
// #3016 disable transition on ios mobile screen
|
|
transition: isIOSMobile ? "none" : undefined,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|