-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout.js
112 lines (89 loc) · 4.18 KB
/
layout.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, { useContext, useState, useEffect } from 'react';
import Header from 'src/components/navigators/topnav';
import Footer from 'src/components/navigators/Footer';
import Toc from 'src/components/navigators/sidenav';
import dynamic from 'next/dynamic';
import { Hidden, Container, Grid, Divider, IconButton } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import AppContext from 'src/contexts/ArenaContext';
import ArenaCards from 'src/pages/arenacard';
import ArenaFiles from 'src/pages/arenafiles';
function MainLayout({ children }) {
const [ DynamicComponent, setDynamicComponent] = useState(null);
const [showSidebar, setShowSidebar] = useState(true);
const {selectedGUID, arenaEndPoint, setSelectedItem, setSelectedPage, selectedItem, selectedPage, externalUrl } = useContext(AppContext);
const [isListNavOpen, setIsListNavOpen] = useState(true);
const [ListNavComponent, setListNavComponent] = useState(null);
const mainBodyContent = () => {
// Check if the necessary context variables are set
console.log('layout.useEffect.mainBodyContent', selectedPage)
if (selectedPage==='arenalist') {
return <ArenaFiles />;
}
return <div>Please select an item from the sidebar</div>;
};
useEffect(() => {
if (selectedPage) {
const ListNavComponentImport = dynamic(() => import(`src/pages/${selectedPage}`));
setListNavComponent(() => (props) => <ListNavComponentImport {...props} />);
}
}, [selectedPage]);
// DynamicComponent population
useEffect(() => {
console.log('layout.useEffect.selectedGUID', selectedGUID)
if (arenaEndPoint === 'files' && selectedGUID) {
console.log('layout.useEffect.arenaEndPoint', arenaEndPoint)
//setDynamicComponent(() => ArenaFiles);
//setDynamicComponent(() => <ArenaFiles />);
//setDynamicComponent(ArenaFiles);
}
// Add other conditions for setting DynamicComponent here if necessary
}, [selectedGUID, arenaEndPoint]);
/*
useEffect(() => {
if (selectedPage === 'externalLink') {
setDynamicComponent(null);
} else if (arenaEndPoint === 'files' && selectedGUID) {
setDynamicComponent(() => <ArenaFiles />);
} else if (selectedPage) {
const DynamicComponentImport = dynamic(() => import(`src/pages/${selectedPage}`));
setDynamicComponent(() => (props) => <DynamicComponentImport {...props} />);
}
}, [selectedPage, selectedGUID, arenaEndPoint]);
*/
const toggleListNav = () => setIsListNavOpen(!isListNavOpen);
const toggleSidebar = () => setShowSidebar(!showSidebar);
return (
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
<Header toggleMenu={toggleSidebar} style={{ backgroundColor: 'mediumseagreen' }} />
<Grid container style={{ maxHeight: 'calc(100vh - 100px)', overflowY: 'hidden' }}>
{showSidebar && (
<Grid item xs={2} style={{ backgroundColor: 'white', overflowY: 'auto' }}>
<Container style={{ padding: '0px', backgroundColor: 'white', flex: 1, overflowY: 'auto' }}>
<Toc setSelectedPage={setSelectedPage} setSelectedItem={setSelectedItem} />
</Container>
<Divider orientation="vertical" />
</Grid>
)}
{isListNavOpen && (
<Grid item xs={2} style={{ backgroundColor: 'white', overflowY: 'auto' }}>
<Container style={{ padding: '0px', backgroundColor: 'white', flex: 1, overflowY: 'auto' }}>
{ListNavComponent ? <ListNavComponent /> : children}
</Container>
<Divider orientation="vertical" />
</Grid>
)}
<Hidden only={['sm', 'md', 'lg']}>
<Grid item xs={8} style={{ maxHeight: 'calc(100vh - 100px)', overflowY: 'auto' }}>
<Container style={{ backgroundColor: '#f0f0f0', padding: '0px' }}>
{mainBodyContent()}
</Container>
<Divider orientation="vertical" />
</Grid>
</Hidden>
</Grid>
<Footer style={{ backgroundColor: 'dimgray', color: 'white', position: 'fixed', bottom: 0, left: 0, right: 0 }} />
</div>
);
}
export default MainLayout;