header work

daxaxelrod · Jan 14, 2024 · 5d1a235 · 5d1a235
1 parent 71c70fe
commit 5d1a235
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 51 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/app/components/NavBar.tsx b/frontend/src/app/components/NavBar.tsx
@@ -7,7 +7,6 @@ import {
     Grid,
     MenuProps,
     Dropdown,
-    Space,
     Col,
 } from "antd";
 import { Squeeze as Hamburger } from "hamburger-react";
@@ -17,6 +16,7 @@ import { isLoggedIn } from "axios-jwt";
 import { Link } from "react-router-dom";
 import { HomeOutlined, FileOutlined, UserOutlined } from "@ant-design/icons";
 import usePageTracking from "./hooks/usePageTracking";
+import useWindowScrollPosition from "./hooks/useWindowScrollPosition";
 
 const { Header } = Layout;
 
@@ -58,13 +58,21 @@ export default function NavBar() {
     // use hamburger menu on mobile
     const isMedOrBelow = !sizes.lg && !sizes.xl && !sizes.xxl;
 
+    const scrollPosition = useWindowScrollPosition();
+    const hasScrolled = useMemo(
+        () => scrollPosition.scrollY > 0,
+        [scrollPosition.scrollY]
+    );
+
     return (
         <Header
-            className="header"
+            className={`main-header header ${
+                hasScrolled ? "nav-scrolled" : ""
+            }`}
             style={{
                 paddingLeft: 0,
                 paddingRight: 0,
-                background: "#f0f2f5",
+                background: "white",
                 height: "100%",
                 paddingTop: 10,
                 paddingBottom: 10,

diff --git a/frontend/src/app/components/hooks/useWindowScrollPosition.ts b/frontend/src/app/components/hooks/useWindowScrollPosition.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export default function useWindowScrollPosition() {
+    const [scrollPosition, setPosition] = useState({ scrollX: 0, scrollY: 0 });
+
+    useEffect(() => {
+        function updatePosition() {
+            setPosition({ scrollX: window.scrollX, scrollY: window.scrollY });
+        }
+
+        window.addEventListener("scroll", updatePosition);
+        updatePosition();
+
+        return () => window.removeEventListener("scroll", updatePosition);
+    }, []);
+
+    return scrollPosition;
+}
diff --git a/frontend/src/app/components/onboarding/LoginForm.tsx b/frontend/src/app/components/onboarding/LoginForm.tsx
@@ -77,7 +77,6 @@ export default function LoginForm() {
                     autoComplete="email"
                 />
             </Form.Item>
-
             <Form.Item
                 label={isMobile ? null : "Password"}
                 name="password"
@@ -90,15 +89,14 @@ export default function LoginForm() {
                     placeholder="******"
                 />
             </Form.Item>
-
             <Form.Item
                 wrapperCol={{
                     xs: { span: 24 },
                     sm: { span: 24 },
-                    md: { span: 12, offset: !screens.lg ? 6 : 12 },
-                    lg: { span: 0, offset: 8 },
-                    xl: { span: 0, offset: 8 },
-                    xxl: { span: 0, offset: 8 },
+                    md: { span: 24, offset: !screens.lg ? 6 : 12 },
+                    lg: { span: 12, offset: 8 },
+                    xl: { span: 12, offset: 8 },
+                    xxl: { span: 12, offset: 8 },
                 }}
             >
                 <Button
@@ -110,7 +108,6 @@ export default function LoginForm() {
                     Login
                 </Button>
             </Form.Item>
-
             {loginError ? (
                 <Row style={{ marginBottom: "2rem" }}>
                     <Col xs={{ offset: 0, span: 24 }}>

diff --git a/frontend/src/app/pages/dashboard/Dashboard.tsx b/frontend/src/app/pages/dashboard/Dashboard.tsx
@@ -41,7 +41,7 @@ export default function Home(props: any) {
 
     useEffect(() => {
         if (!isLoggedIn()) {
-            navigate("/join");
+            navigate("/");
         } else {
             // hrm, do this here and its better for user experience, gets to see data faster
             // but do it in the sub component and it makes more sense code wise.
@@ -50,7 +50,7 @@ export default function Home(props: any) {
                 navigate("/home");
             }
         }
-    }, [accessToken, pageNum]);
+    }, [accessToken, dispatch, location.pathname, navigate, pageNum]);
 
     return (
         <Layout style={{ padding: "0 24px 24px" }}>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -15,3 +15,19 @@ code {
 #root {
     min-height: 100vh;
 }
+
+.main-header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.main-header.nav-scrolled {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    transition: 2s;
+}
+
+.main-header:not(.nav-scrolled) {
+    box-shadow: none;
+    transition: 2s;
+}