bleh

src/components/AnimatedSVG/AnimatedSVG.module.css

@@ -0,0 +1,20 @@
+/* the value 54150 is decided by getting the length of the path (54122 for the logo asset) */
+
+.svgWrapper path {
+  stroke-dasharray: 54150;
+  stroke-dashoffset: 54150;
+  animation: draw 5s ease-in-out infinite;
+  animation-fill-mode: both;
+}
+
+@keyframes draw {
+  0% {
+    stroke-dashoffset: 54150;
+  }
+  60% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 54150;
+  }
+}

src/components/AnimatedSVG/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from "./AnimatedSVG.module.css";
+
+const AnimatedSVG = ({ stroke = "#ffffff" }) => {
+  return (
+    <div className={styles.svgWrapper}>
+      {/* width, height and viewBox are necessary */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="512" height="512" viewBox="0 0 512 512"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
+          <path
+            d="M1480 4540 c-20 -20 -20 -33 -20 -611 0 -379 4 -597 10 -609 19 -36
+            72 -40 548 -40 l462 0 0 -275 0 -275 -881 0 c-650 0 -886 -3 -902 -12 -46 -24
+            -46 -26 -47 -375 l0 -333 -289 0 c-159 0 -301 -4 -314 -9 -47 -18 -48 -23 -45
+            -734 l3 -669 24 -19 c22 -18 49 -19 696 -19 665 0 673 0 699 21 l26 20 0 683
+            c0 681 0 683 -21 702 -20 18 -42 19 -320 22 l-299 3 0 279 0 280 835 0 835 0
+            0 -280 0 -279 -300 -3 c-296 -3 -300 -3 -322 -26 l-23 -23 0 -680 0 -681 24
+            -19 c22 -18 49 -19 701 -19 652 0 679 1 701 19 l24 19 0 681 0 680 -23 23
+            c-22 23 -26 23 -322 26 l-300 3 0 279 0 280 835 0 835 0 0 -280 0 -279 -300
+            -3 c-296 -3 -300 -3 -322 -26 l-23 -23 -3 -647 c-2 -356 0 -662 3 -680 3 -18
+            15 -42 26 -53 18 -18 39 -19 698 -19 653 0 680 1 702 19 l24 19 0 681 0 680
+            -23 23 c-22 23 -26 23 -322 26 l-300 3 0 329 c0 180 -3 336 -6 345 -18 45 -9
+            45 -944 45 l-880 0 0 275 0 275 463 0 c475 0 528 4 547 40 6 12 10 230 10 607
+            0 579 0 590 -20 611 l-21 22 -1059 0 c-1047 0 -1060 0 -1080 -20z m2020 -615
+            l0 -475 -940 0 -940 0 0 475 0 475 940 0 940 0 0 -475z m-2202 -2642 l2 -563
+            -570 0 -570 0 0 565 0 565 568 -2 567 -3 3 -562z m1832 2 l0 -565 -570 0 -570
+            0 0 565 0 565 570 0 570 0 0 -565z m1830 0 l0 -565 -570 0 -570 0 0 558 c0
+            307 3 562 7 565 3 4 260 7 570 7 l563 0 0 -565z"
+            stroke={stroke}
+            strokeWidth="32px"
+            strokeMiterlimit={10}
+            fill="none"
+            id="svglength"
+          // document.getElementById('svglength').getTotalLength()
+          />
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default AnimatedSVG;

src/components/Navbar/Navbar.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-evenly;
+  justify-content: space-around;
   position: sticky;
   top: 0;
   left: 0;

src/components/Navbar/index.jsx

@@ -1,16 +1,25 @@
-import React from 'react'
+import React, { useContext } from 'react'
+
 import styles from "./Navbar.module.css";
-import { NavLink } from 'react-router-dom';
+
+import { AuthContext } from "../../App";
+import StyledNavLink from '../StyledNavLink';
 
 const Navbar = () => {
+  const auth = useContext(AuthContext);
+
   return (
     <nav className={styles.navbar_wrapper}>
-      <NavLink to="/">Home</NavLink>
-      <NavLink to="/login">Login</NavLink>
-      <NavLink to="/graph">Graph</NavLink>
-      <NavLink to="/graph2">Graph2</NavLink>
+      <StyledNavLink path="/" text="Home" />
+      {
+        auth === true ?
+          <StyledNavLink path="/logout" text="Logout" /> :
+          <StyledNavLink path="/login" text="Login" />
+      }
+      <StyledNavLink path="/graph" text="Graph" />
+      <StyledNavLink path="/about" text="About" />
     </nav>
   )
 }
 
-export default Navbar
+export default Navbar

src/components/StyledNavLink/StyledNavLink.module.css

@@ -0,0 +1,12 @@
+.link_wrapper {
+  padding: 2em;
+  border-radius: 20%;
+}
+
+.active_link {
+
+}
+
+.inactive_link {
+
+}

src/components/StyledNavLink/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom';
+
+import styles from "./StyledNavLink.module.css";
+
+/**
+ * @param {{
+ * path: string,
+ * text: string,
+ * activeClass: string,
+ * inactiveClass: string
+ * }}
+ * @returns
+ */
+const StyledNavLink = ({
+  path = "/",
+  text = "Go To",
+  activeClass = styles.active_link,
+  inactiveClass = styles.inactive_link
+}) => {
+  return (
+    <div className={styles.link_wrapper}>
+      <NavLink
+        to={path}
+        className={({ isActive }) => isActive ? activeClass : inactiveClass}
+      >
+        {text}
+      </NavLink>
+    </div>
+  )
+}
+
+export default StyledNavLink;