Active Nav Link

* Added active nav link component and styles

views/components/Sidebar/NavItem.jsx

@@ -1,17 +1,14 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 import { ListItem, ListItemIcon, ListItemText } from '@mui/material'
-import './NavItem.css'
+import SidebarLink from './SidebarLink'
 
 const NavItem = ({ to, Icon, label }) => {
   return (
-    <ListItem>
-      <Link to={to} className="sidenav_link">
-        <ListItemIcon className="sidenav_icon_container">
-          <Icon />
-        </ListItemIcon>
-        <ListItemText primary={label} sx={{ color: 'text.primary' }} />
-      </Link>
+    <ListItem component={SidebarLink} to={to} sx={{ width: 228 }}>
+      <ListItemIcon sx={{ minWidth: 40 }}>
+        <Icon />
+      </ListItemIcon>
+      <ListItemText primary={label} sx={{ color: 'text.primary' }} />
     </ListItem>
   )
 }

views/components/Sidebar/SidebarLink.css

@@ -0,0 +1,21 @@
+.sidenav_link {
+  text-decoration: none;
+  padding: 6px 12px 6px 12px;
+  display: flex;
+  flex-direction: row;
+  &:visited&:focus {
+    text-decoration: none;
+  }
+}
+
+.sidenav_link-active {
+  text-decoration: none;
+  display: flex;
+  flex-direction: row;
+  background-color: #addbff;
+  border-radius: 8px;
+  padding: 6px 12px 6px 12px;
+  &:visited&:focus {
+    text-decoration: none;
+  }
+}

views/components/Sidebar/SidebarLink.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react'
+import { NavLink } from 'react-router-dom'
+import './SidebarLink.css'
+
+const SidebarLink = forwardRef((props, ref) => (
+  <NavLink
+    ref={ref}
+    to={props.to}
+    className={({ isActive }) =>
+      isActive ? 'sidenav_link-active' : 'sidenav_link'
+    }
+  >
+    {props.children}
+  </NavLink>
+))
+
+export default SidebarLink