styling

src/components/AnimatedSVG/index.jsx

@@ -7,7 +7,8 @@ const AnimatedSVG = ({ stroke = "#ffffff" }) => {
       {/* width, height and viewBox are necessary */}
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="512" height="512" viewBox="0 0 512 512"
+        width="256" height="256" // adjust size here
+        viewBox="0 0 512 512"
         preserveAspectRatio="xMidYMid meet"
       >
         <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">

src/components/Navbar/Navbar.module.css

@@ -1,5 +1,6 @@
 .navbar_wrapper {
   display: flex;
+  background-color: var(--bgNav);
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
@@ -8,4 +9,5 @@
   left: 0;
   height: 100vh;
   width: 10vw;
+  padding: var(--mb-3);
 }

src/components/Navbar/index.jsx

@@ -10,13 +10,12 @@ const Navbar = () => {
 
   return (
     <nav className={styles.navbar_wrapper}>
-      <StyledNavLink path="/" text="Home" />
-      <StyledNavLink path="/graph" text="Graph" />
-      <StyledNavLink path="/about" text="About" />
+      <StyledNavLink exact path="/" text="About" />
+      <StyledNavLink exact path="/graph" text="Graph" />
       {
         auth === true ?
-          <StyledNavLink path="/logout" text="Logout" /> :
-          <StyledNavLink path="/login" text="Login" />
+          <StyledNavLink exact path="/logout" text="Logout" /> :
+          <StyledNavLink exact path="/login" text="Login" />
       }
     </nav>
   )

src/components/StyledNavLink/StyledNavLink.module.css

@@ -1,12 +1,18 @@
-.link_wrapper {
-  padding: 2em;
-  border-radius: 20%;
+a {
+  padding: var(--mb-3);
+  border-radius: 2%;
+  width: 100%;
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text);
 }
 
 .active_link {
-
+  background-color: var(--bgLinkActive);
+  box-shadow: 2px 2px black;
 }
 
 .inactive_link {
-
+  background-color: var(--bgLinkInactive);
+  box-shadow: 2px 2px var(--bg);
 }

src/components/StyledNavLink/index.jsx

@@ -18,15 +18,14 @@ const StyledNavLink = ({
   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>
+    <NavLink
+      to={path}
+      className={({ isActive }) => isActive ? activeClass : inactiveClass}
+    >
+      {text}
+    </NavLink>
   )
 }