Highlight Icons in NavSidebar (#31)

* Finish Secondary Nav

* Add highlight on navSidebar

* fix: enable highlight

* fix: remove sidebar use in 'organism' component

this caused `Error: Invariant failed: You should not use <Link> outside a <Router>` errors in storybook and repeats functionality found in `organisms/DisplayNavAndPage.tsx`

Co-authored-by: Safin Singh <safin.singh@gmail.com>

Author: hyperupcall

src/components/organisms/DirectMessages.tsx

@@ -6,7 +6,6 @@ import SearchBar from '../atoms/SearchBar'
 import WordWithLine from '../atoms/WordWithLine'
 import GroupDmCard from '../molecules/GroupDmCard'
 import UserDmCard from '../molecules/UserDmCard'
-import Sidebar from './NavSidebar'
 
 const DirectMessages = () => {
   return (
@@ -17,7 +16,6 @@ const DirectMessages = () => {
       borderBottomRightRadius="45px"
       direction="row"
     >
-      <Sidebar />
       <Flex w="100%" justifyContent="center" direction="row">
         <Flex w="85%" paddingY="30px" direction="column">
           <Text fontSize="25px" color="white">

src/components/organisms/DisplayNavAndPage.tsx

@@ -12,7 +12,7 @@ export default function DisplayNavAndPage({
   return (
     <Stack spacing={4} direction="row" width="calc(100% - 20px)">
       <Box marginRight="25px">
-        <NavSidebar />
+        <NavSidebar active="dm" />
       </Box>
       <Stack spacing={8} marginTop="15px" width="100%">
         {children}

src/components/organisms/NavSidebar.tsx

@@ -15,7 +15,11 @@ import { Link } from 'react-router-dom'
 
 import { commonShadow } from '../common'
 
-export default function Sidebar() {
+interface navProps {
+  active: string
+}
+
+export default function Sidebar(props: navProps) {
   return (
     <Flex
       direction="column"
@@ -87,37 +91,54 @@ export default function Sidebar() {
       >
         <Link to="/chat">
           <FontAwesomeIcon
-            color="#979797"
+            color={props.active === 'dm' ? '#fff' : '#979797'}
             size="lg"
             cursor="pointer"
             icon={faComment}
+            style={
+              props.active === 'dm'
+                ? { filter: 'drop-shadow(0px 0px 10px #4F80E2)' }
+                : {}
+            }
           />
         </Link>
-
         <Link to="/explore">
           <FontAwesomeIcon
-            color="#979797"
+            color={props.active === 'explore' ? '#fff' : '#979797'}
             size="lg"
             cursor="pointer"
             icon={faCompass}
+            style={
+              props.active === 'explore'
+                ? { filter: 'drop-shadow(0px 0px 10px #4F80E2)' }
+                : {}
+            }
           />
         </Link>
-
         <Link to="/users">
           <FontAwesomeIcon
-            color="#979797"
+            color={props.active === 'friends' ? '#fff' : '#979797'}
             size="lg"
             cursor="pointer"
             icon={faUsers}
+            style={
+              props.active === 'friends'
+                ? { filter: 'drop-shadow(0px 0px 10px #4F80E2)' }
+                : {}
+            }
           />
         </Link>
-
         <Link to="/community">
           <FontAwesomeIcon
-            color="#979797"
+            color={props.active === 'communities' ? '#fff' : '#979797'}
             size="lg"
             cursor="pointer"
             icon={faGlobeAmericas}
+            style={
+              props.active === 'communities'
+                ? { filter: 'drop-shadow(0px 0px 10px #4F80E2)' }
+                : {}
+            }
           />
         </Link>
       </Flex>

src/pages/Home.tsx

@@ -12,7 +12,7 @@ export default function Home(): JSX.Element {
   return (
     <Stack spacing={4} direction="row" width="100%">
       <Box marginRight="25px">
-        <NavSidebar />
+        <NavSidebar active="dm" />
       </Box>
       <Stack spacing={8} marginTop="15px" marginRight="15px" width="100%">
         <FindInterface />