From 3fb80ce6fea4c09253154b6b29327db52fbcb63c Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Wed, 26 Jan 2022 15:57:26 +0100
Subject: [PATCH] fix(nui): Show current selected link in white

---
 ui/src/components/NavBars/LeftBar.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/NavBars/LeftBar.tsx b/ui/src/components/NavBars/LeftBar.tsx
index e36df1d..2cc55be 100644
--- a/ui/src/components/NavBars/LeftBar.tsx
+++ b/ui/src/components/NavBars/LeftBar.tsx
@@ -1,6 +1,6 @@
-import { Box, VStack, Text } from '@chakra-ui/react';
+import { Box, VStack } from '@chakra-ui/react';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import type { InitData } from '../../types';
 
@@ -16,11 +16,14 @@ const LeftBar: React.FC = () => {
       <VStack align="left">
         {initData.resources.map((resource, index) => (
           <Box isTruncated key={`${resource}-${index}`}>
-            <Link to={resource}>
-              <Text _hover={{ color: 'white' }} color="grey">
-                {resource}
-              </Text>
-            </Link>
+            <NavLink
+              to={resource}
+              style={(state) => ({
+                color: state.isActive ? 'white' : 'grey',
+              })}
+            >
+              <Box _hover={{ color: 'white' }}>{resource}</Box>
+            </NavLink>
           </Box>
         ))}
       </VStack>