starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-24 10:21:15 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Even better layouts

Browse Source
This commit is contained in:
Gregory Schier
2023-03-25 18:33:01 -07:00
parent 402b2a551f
commit 0d82cc7574
6 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src-web/components/Workspace.tsx
View File

@@ -11,6 +11,8 @@ const side = { gridArea: 'side' };
const head = { gridArea: 'head' };
const body = { gridArea: 'body' };
const FLOATING_SIDEBAR_BREAKPOINT = 960;
export default function Workspace() {
const windowSize = useWindowSize();
const styles = useMemo<CSSProperties>(
@@ -26,23 +28,17 @@ export default function Workspace() {
return (
<div className="grid w-full h-full" style={styles}>
<SidebarContainer style={side} floating={windowSize.width < 800}>
<SidebarContainer style={side} floating={windowSize.width < FLOATING_SIDEBAR_BREAKPOINT}>
<Sidebar />
</SidebarContainer>
<HeaderContainer>
<WorkspaceHeader className="pointer-events-none" />
</HeaderContainer>
<BodyContainer>
<RequestResponse />
</BodyContainer>
<RequestResponse style={body} vertical={windowSize.width < FLOATING_SIDEBAR_BREAKPOINT} />
</div>
);
}
const BodyContainer = memo(function BodyContainer({ children }: { children: ReactNode }) {
return <div style={body}>{children}</div>;
});
const HeaderContainer = memo(function HeaderContainer({ children }: { children: ReactNode }) {
return (
<div