70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import { useLocation } from "react-router-dom";
|
|
import { useMemo, ReactNode } from "react";
|
|
import { Path, SlotID } from "@/app/constant";
|
|
import { getLang } from "@/app/locales";
|
|
|
|
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
|
import { isIOS } from "@/app/utils";
|
|
|
|
import backgroundUrl from "!url-loader!@/app/icons/background.svg";
|
|
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();
|
|
|
|
let containerClassName = "flex h-[100%] w-[100%] bg-center overflow-hidden";
|
|
let sidebarClassName = "flex-0 overflow-hidden";
|
|
let pageClassName = "flex-1 h-[100%] min-w-0 overflow-hidden";
|
|
|
|
if (isMobileScreen) {
|
|
containerClassName =
|
|
"relative flex flex-col-reverse h-[100%] w-[100%] bg-center";
|
|
sidebarClassName = "absolute w-[100%] bottom-0 z-10";
|
|
pageClassName = "w-[100%] h-[100%]";
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={containerClassName}
|
|
style={{
|
|
backgroundImage: `url(${backgroundUrl})`,
|
|
direction: getLang() === "ar" ? "rtl" : "ltr",
|
|
}}
|
|
>
|
|
{isAuth ? (
|
|
props.noAuth
|
|
) : (
|
|
<>
|
|
<div className={sidebarClassName}>{props.sidebar}</div>
|
|
|
|
<div
|
|
className={pageClassName}
|
|
id={SlotID.AppBody}
|
|
style={{
|
|
// #3016 disable transition on ios mobile screen
|
|
transition: isMobileScreen && isIOSMobile ? "none" : undefined,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|