MuiSimple

index.html

<div id="container">

</div>

muisimple.markdown

MuiSimple

A Pen by Homer Simpson on CodePen.

License.

script.babel

const {
	Box,
	List,
	ListItem,
	ListItemButton,
	ListItemText,
	ThemeProvider,
	createTheme,
	Typography,
	CssBaseline
} = MaterialUI;
const theme = createTheme({});
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(
	<ThemeProvider theme={theme}>
		<CssBaseline />
		<header>top</header>
		<main>
			<section id="app">
				<List dense>
					{Object.keys(window).map((e, i) => {
						return (
							<ListItem disablePadding>
								<ListItemButton component="a" href="#simple-list">
									<ListItemText primary={e} />
								</ListItemButton>
							</ListItem>
						);
					})}
				</List>
			</section>
		</main>
		<footer>bottom</footer>
	</ThemeProvider>
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuzzysort@2.0.4/fuzzysort.min.js"></script>

style.css

html,
body {
	margin: 0;
	height: 100%; /* can also use viewport units (height: 100vh) */
}

#container {
	display: flex; /* displays flex-items (children) inline */
	flex-direction: column; /* stacks them vertically */
	height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

main {
	flex: 1; /* takes the remaining height of the "container" div */
	overflow: auto; /* to scroll just the "main" div */
}

section {
	height: 100%; /* takes the visible area of the "main" div */
	overflow: auto; /* recommended */
	border-bottom: 1px solid;
}

header {
}
section:last-child {
	border: none;
}
footer {
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"" rel="stylesheet" />