Add nav drawer on desktop and fix scroll position

OctoPrint · Apr 3, 2024 · d1dfa5d · d1dfa5d
1 parent c2ab526
commit d1dfa5d
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "data.octoprint.org",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.4.1",

diff --git a/src/App.js b/src/App.js
@@ -1,14 +1,19 @@
 import React from "react";
 
 import useMediaQuery from "@mui/material/useMediaQuery";
-import {createTheme, ThemeProvider} from "@mui/material/styles";
+import {useTheme, createTheme, ThemeProvider} from "@mui/material/styles";
 import {styled} from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import Box from "@mui/material/Box";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Container from "@mui/material/Container";
 import Link from "@mui/material/Link";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
 
 import DarkModeToggle from "./components/DarkModeToggle";
 import DaysToggle from "./components/DaysToggle";
@@ -60,14 +65,43 @@ export default function App(props) {
 }
 
 function Main({darkMode, handleDarkModeToggle}) {
+    const theme = useTheme();
+
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down("lg"));
+
     const year = new Date().getFullYear();
 
+    const NavItems = [
+        {name: "Instance Stats", link: "#instances"},
+        {name: "Printing Stats", link: "#printing"},
+        {name: "Python Stats", link: "#python"},
+        {name: "Server Stats", link: "#server"},
+        {name: "Client Stats", link: "#client"},
+        {name: "RPi Stats", link: "#rpi"},
+        {name: "Firmware Stats", link: "#firmware"},
+        {name: "Achievement Stats", link: "#achievements"}
+    ];
+
+    const DrawerList = (
+        <Box sx={{width: 250}} role="presentation">
+            <List>
+                {NavItems.map((item, index) => (
+                    <ListItem key={"drawer-item-" + index} disablePadding>
+                        <ListItemButton href={item.link}>
+                            <ListItemText primary={item.name} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+        </Box>
+    );
+
     const Navbar = () => {
         return (
-            <AppBar>
+            <AppBar position="fixed" sx={{zIndex: (theme) => theme.zIndex.drawer + 1}}>
                 <Toolbar sx={{flexWrap: "wrap"}}>
-                    <Box display={"flex"} flexGrow={1}>
-                        data.octoprint.org
+                    <Box display="flex" flexGrow={1}>
+                        {!isSmallScreen ? "data.octoprint.org" : " "}
                     </Box>
                     <DaysToggle />
                     <DarkModeToggle darkMode={darkMode} onChange={handleDarkModeToggle} />
@@ -80,11 +114,21 @@ function Main({darkMode, handleDarkModeToggle}) {
         <>
             <CssBaseline />
             <Navbar />
+            {!isSmallScreen && (
+                <Drawer variant="permanent">
+                    <Offset />
+                    {DrawerList}
+                </Drawer>
+            )}
             <Offset />
             <Container
                 component={"main"}
                 maxWidth="lg"
-                sx={{"mt": {lg: 4}, "mb": 4, "& > *": {my: 2}}}
+                sx={{
+                    "mt": {lg: 4},
+                    "mb": 4,
+                    "& > *": {my: 2}
+                }}
             >
                 <InstanceStats />
                 <PrintingStats />

diff --git a/src/components/Stats.js b/src/components/Stats.js
@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from "react";
-import CircularProgress from '@mui/material/CircularProgress';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardContent from '@mui/material/CardContent';
+import React, {useState, useEffect} from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import {useTheme} from "@mui/material/styles";
 
 import fetchStats from "../util/data";
-import { Typography } from "@mui/material";
+import {Typography} from "@mui/material";
 
 export default function Stats(props) {
-    const [ loading, setLoading ] = useState(true);
-    const [ since, setSince ] = useState();
-    const [ lastUpdate, setLastUpdate ] = useState();
+    const theme = useTheme();
+
+    const [loading, setLoading] = useState(true);
+    const [since, setSince] = useState();
+    const [lastUpdate, setLastUpdate] = useState();
 
     useEffect(() => {
         fetchStats(props.stats).then((data) => {
@@ -25,26 +28,36 @@ export default function Stats(props) {
     const Content = () => {
         if (loading) {
             return (
-                <div style={{ display: "flex", justifyContent: "center", }}>
+                <div style={{display: "flex", justifyContent: "center"}}>
                     <CircularProgress />
                 </div>
-            )
+            );
         } else {
             return (
                 <>
                     {props.children}
-                    <Typography variant="caption">Based on usage data from {since} until {lastUpdate}</Typography>
+                    <Typography variant="caption">
+                        Based on usage data from {since} until {lastUpdate}
+                    </Typography>
                 </>
-            )
+            );
         }
-    }
+    };
 
     return (
         <Card style={{}}>
-            <CardHeader title={props.title} titleTypographyProps={{ id: props.anchor }} />
+            <CardHeader
+                title={props.title}
+                titleTypographyProps={{
+                    id: props.anchor,
+                    style: {
+                        scrollMarginTop: theme.mixins.toolbar.minHeight + 40
+                    }
+                }}
+            />
             <CardContent>
                 <Content />
             </CardContent>
         </Card>
     );
-}
+}