AppBar work around

Lujia-Cheng · Feb 4, 2024 · e880d11 · e880d11
1 parent 62d1af2
commit e880d11
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 74 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 **/.env
 **/node_modules
-.idea
+.idea
+.vscode
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,10 +1,10 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import {createTheme, ThemeProvider} from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import GreetingMsg from "./components/GreetingMsg";
 import NavBar from "./components/NavBar";
-import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
 import Content from "./components/Content";
 import AppBar from "@mui/material/AppBar";
 
@@ -24,9 +24,11 @@ function App() {
 
   // hide a greeting message when it's scrolled out of the view
   const [showGreetingMsg, setShowGreetingMsg] = React.useState(true);
+
   useEffect(() => {
     function handleScroll() {
       const nav = document.getElementById("navbar");
+
       if (nav?.getBoundingClientRect().top <= 0) {
         setShowGreetingMsg(false);
       }
@@ -40,46 +42,44 @@ function App() {
   const [section, setSection] = React.useState(0);
 
   function changeSection(event, newSection) {
-    // change section on click
-    setSection(newSection);
-
-    // scroll to the top of the page
+    // scroll thus the top the nav bar line up with the top of the screen
     const navbar = document.getElementById("navbar");
     window.scrollTo({
-      top: navbar?.getBoundingClientRect().top,
+      top: navbar.getBoundingClientRect().top + window.scrollY,
       behavior: "smooth",
     });
+
+    // change section on click
+    setSection(newSection);
   }
 
   return (
     <ThemeProvider theme={theme}>
-      <CssBaseline/>
-      <Box
-        display="flex"
-        flexDirection="column"
-        minHeight={showGreetingMsg ? "100vh" : "0"}
-      >
-        <Box
-          flex={1}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-        >
-          {showGreetingMsg ? <GreetingMsg/> : null}
-        </Box>
+      <CssBaseline />
+      <Grid display="flex" flexDirection="column">
+        {showGreetingMsg && (
+          <Grid
+            flexGrow={1}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            height="95vh"
+          >
+            <GreetingMsg />
+          </Grid>
+        )}
         {/* todo evaluate the bar when scrolling https://mui.com/material-ui/react-app-bar/#back-to-top*/}
+
         <AppBar
           id="navbar"
+          height="10vh"
           position={showGreetingMsg ? "relative" : "sticky"}
-          top="0"
         >
-          <NavBar value={section} onChange={changeSection}/>
+          <NavBar value={section} onChange={changeSection} />
         </AppBar>
-      </Box>
-      <Box padding="0 8em">
-        {/* todo sticky navbar while scrolling  */}
-        <Content value={section}/>
-      </Box>
+
+        <Content value={section} />
+      </Grid>
     </ThemeProvider>
   );
 }

diff --git a/frontend/src/components/GreetingMsg.js b/frontend/src/components/GreetingMsg.js
@@ -1,14 +1,15 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
 
 function GreetingMsg() {
   return (
-    <p>
+    <Grid>
       <Typography variant="h1">Hi, I'm Luke.</Typography>
       <Typography variant="h2" maxWidth="90vw">
         Welcome to my website.
       </Typography>
-    </p>
+    </Grid>
   );
 }
 export default GreetingMsg;
diff --git a/frontend/src/components/NavBar.js b/frontend/src/components/NavBar.js
@@ -2,8 +2,9 @@ import React from "react";
 import ArticleIcon from "@mui/icons-material/Article";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
-import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
 import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
 
 import GithubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
@@ -13,38 +14,35 @@ import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutli
 
 function NavBar({ value, onChange }) {
   return (
-    <Box
-      display="flex"
-      justifyContent="space-between"
-      alignItems="center"
-      padding="0 4em"
-    >
-      <Tabs value={value} onChange={onChange} scrollButtons>
+    <Grid display="flex" justifyContent="space-between">
+      <Tabs value={value} onChange={onChange} variant="scrollable">
         <Tab label="CV" icon={<InfoIcon />} iconPosition="start" />
         <Tab label="Chat" icon={<ChatIcon />} iconPosition="start" />
         <Tab
-          label="Projects"
+          label="Blogs"
           icon={<DriveFileRenameOutlineIcon />}
           iconPosition="start"
         />
-        <Tab label="Blog" icon={<ArticleIcon />} iconPosition="start" />
+        <Tab label="Projects" icon={<ArticleIcon />} iconPosition="start" />
       </Tabs>
 
-      <Box margin-right="0">
-        <Button
-          label="Github"
-          onClick={() => window.open("https://github.com/Lujia-Cheng")}
-        >
-          <GithubIcon />
-        </Button>
+      <Grid margin-left="auto" display="flex" justifyContent="space-between">
+        <Divider orientation="vertical" />
         <Button
           label="LinkedIn"
           onClick={() => window.open("https://www.linkedin.com/in/luke-cheng/")}
         >
           <LinkedInIcon />
         </Button>
-      </Box>
-    </Box>
+        <Divider orientation="vertical" />
+        <Button
+          label="Github"
+          onClick={() => window.open("https://github.com/Lujia-Cheng")}
+        >
+          <GithubIcon />
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 

diff --git a/frontend/src/components/Resume.js b/frontend/src/components/Resume.js
@@ -14,10 +14,8 @@ function Resume() {
   }, []);
 
   return (
-    <Paper variant="outlined" elevation={3} square={false}>
-      <Box margin="2em 6em">
-        <Markdown children={markdown} />
-      </Box>
+    <Paper variant="outlined" square={false} padding="2em">
+      <Markdown children={markdown} />
     </Paper>
   );
 }

diff --git a/frontend/src/components/Todo.js b/frontend/src/components/Todo.js
@@ -1,23 +1,23 @@
 import React from "react";
-import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 
 function Todo() {
   return (
-    <Box
+    <Grid
       display="flex"
       flexDirection="column"
       justifyContent="center"
       alignItems="center"
-      minHeight="100vh"
+      height="100vh"
     >
       <Typography variant="h3" align="center">
         🚧🚧 Under Construction 🚧🚧
       </Typography>
       <Typography variant="h5" align="center">
         Check back in a week or two!
       </Typography>
-    </Box>
+    </Grid>
   );
 }