fixed scrolling behavior

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

Hide file tree

Showing 5 changed files with 66 additions and 45 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,11 +1,12 @@
-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 Grid from "@mui/material/Grid";
 import Content from "./components/Content";
+import Footer from "./components/Footer";
 import AppBar from "@mui/material/AppBar";
 
 function App() {
@@ -26,60 +27,74 @@ function App() {
   const [showGreetingMsg, setShowGreetingMsg] = React.useState(true);
 
   useEffect(() => {
-    function handleScroll() {
-      const nav = document.getElementById("navbar");
-
-      if (nav?.getBoundingClientRect().top <= 0) {
-        setShowGreetingMsg(false);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          // If greeting message is not intersecting (visible) in the viewport, hide it
+          if (!entry.isIntersecting) {
+            setShowGreetingMsg(false);
+          }
+        });
+      },
+      {
+        rootMargin: "0px",
+        threshold: 0.1, // Adjust threshold to control when the callback is executed
       }
+    );
+
+    const greetingMsgElement = document.getElementById("greeting-msg");
+    if (greetingMsgElement) {
+      observer.observe(greetingMsgElement);
     }
 
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
+    return () => {
+      if (greetingMsgElement) {
+        observer.unobserve(greetingMsgElement);
+      }
+    };
   }, []);
 
   // navbar & content sync
-  const [section, setSection] = React.useState(0);
+  const [section, setSection] = React.useState(1);
 
-  function changeSection(event, newSection) {
-    // 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 + window.scrollY,
-      behavior: "smooth",
-    });
+  function scrollDown() {
+    // scroll sown until the greeting message out of the view
+    const topNavBar = document
+      .getElementById("nav")
+      ?.getBoundingClientRect().top;
+    window.scroll({top: topNavBar + window.scrollY, behavior: "smooth"});
+  }
 
-    // change section on click
+  function changeSection(event, newSection) {
+    scrollDown();
     setSection(newSection);
   }
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Grid display="flex" flexDirection="column">
-        {showGreetingMsg && (
+      {showGreetingMsg ? (
+        <Grid display="flex" flexDirection="column" height="100vh">
           <Grid
-            flexGrow={1}
+            id="greeting-msg"
             display="flex"
             justifyContent="center"
             alignItems="center"
-            height="95vh"
+            flexGrow="1"
           >
             <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"}
-        >
-          <NavBar value={section} onChange={changeSection} />
+          <AppBar id="nav" position="relative">
+            <NavBar value={section} onChange={changeSection}/>
+          </AppBar>
+        </Grid>
+      ) : (
+        <AppBar id="nav" position="sticky">
+          <NavBar value={section} onChange={changeSection}/>
         </AppBar>
-
-        <Content value={section} />
-      </Grid>
+      )}
+      <Content value={section}/>
+      <Footer/>
     </ThemeProvider>
   );
 }

diff --git a/frontend/src/components/ChatAssistant.js b/frontend/src/components/ChatAssistant.js
@@ -1,9 +1,11 @@
 import React from "react";
+import Todo from "./Todo";
 
 function ChatAssistant() {
   return (
     <div>
       working on my own ai chatbot assistant
+      <Todo/>
     </div>
   );
 }

diff --git a/frontend/src/components/Content.js b/frontend/src/components/Content.js
@@ -2,10 +2,11 @@ import React from "react";
 import Resume from "./Resume";
 import ChatAssistant from "./ChatAssistant";
 import Todo from "./Todo";
+
 function Content({ value }) {
   const content = {
-    0: <Resume />,
-    1: <ChatAssistant />,
+    1: <Resume/>,
+    2: <ChatAssistant/>,
   };
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 

diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
@@ -0,0 +1,4 @@
+function Footer() {
+}
+
+export default Footer;
diff --git a/frontend/src/components/NavBar.js b/frontend/src/components/NavBar.js
@@ -1,5 +1,4 @@
 import React from "react";
-import ArticleIcon from "@mui/icons-material/Article";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Divider from "@mui/material/Divider";
@@ -10,20 +9,20 @@ import GithubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
 import InfoIcon from "@mui/icons-material/Info";
 import ChatIcon from "@mui/icons-material/Chat";
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
+import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
+
+import CreateIcon from "@mui/icons-material/Create";
+import CodeIcon from "@mui/icons-material/Code";
 
 function NavBar({ value, onChange }) {
   return (
     <Grid display="flex" justifyContent="space-between">
       <Tabs value={value} onChange={onChange} variant="scrollable">
-        <Tab label="CV" icon={<InfoIcon />} iconPosition="start" />
+        <Tab label="About" icon={<InfoIcon/>} iconPosition="start"/>
+        <Tab label="CV" icon={<AssignmentIndIcon/>} iconPosition="start"/>
         <Tab label="Chat" icon={<ChatIcon />} iconPosition="start" />
-        <Tab
-          label="Blogs"
-          icon={<DriveFileRenameOutlineIcon />}
-          iconPosition="start"
-        />
-        <Tab label="Projects" icon={<ArticleIcon />} iconPosition="start" />
+        <Tab label="Blog" icon={<CreateIcon/>} iconPosition="start"/>
+        <Tab label="Projects" icon={<CodeIcon/>} iconPosition="start"/>
       </Tabs>
 
       <Grid margin-left="auto" display="flex" justifyContent="space-between">