47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { tv } from "tailwind-variants";
|
|
import { navigationExpanded, NavigationMobile, NavigationRegion } from "./Navigation";
|
|
import { DivProps } from "../common";
|
|
import { Component } from "solid-js";
|
|
import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router";
|
|
import { refreshTab } from "~/app";
|
|
|
|
export const BodyRegion: Component<DivProps> = (props) => {
|
|
const bodyStyle = tv({
|
|
base: "relative",
|
|
variants: {
|
|
open: {
|
|
true: "px-5 lg:left-55 lg:pr-55",
|
|
false: "px-5 lg:left-24 lg:pr-24"
|
|
}
|
|
}
|
|
});
|
|
return (
|
|
<div class={bodyStyle({ open: navigationExpanded() })} {...props}>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface LayoutProps extends DivProps {
|
|
lang?: "zh" | "en";
|
|
}
|
|
|
|
export const Layout: Component<LayoutProps> = (props) => {
|
|
useBeforeLeave((e: BeforeLeaveEventArgs) => {
|
|
if (typeof e.to === "number") {
|
|
refreshTab(e.to.toString());
|
|
return;
|
|
}
|
|
refreshTab(e.to);
|
|
});
|
|
return (
|
|
<div class="relatve w-screen min-h-screen">
|
|
<NavigationRegion lang={props.lang} />
|
|
<NavigationMobile lang={props.lang} />
|
|
<BodyRegion>
|
|
{props.children}
|
|
</BodyRegion>
|
|
</div>
|
|
);
|
|
};
|