From a424c6144898eab057025db31c2454b8cdc59a69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Tue, 31 Aug 2021 13:12:43 -0300
Subject: [PATCH] add hightlist to current path on sidebar

---
 app/javascript/src/components/SideNav/SideNav.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/src/components/SideNav/SideNav.tsx b/app/javascript/src/components/SideNav/SideNav.tsx
index f982e08..eec31e1 100644
--- a/app/javascript/src/components/SideNav/SideNav.tsx
+++ b/app/javascript/src/components/SideNav/SideNav.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { Transition } from "@headlessui/react";
+import cs from "classnames";
 
 import { useApp } from "../../contexts/AppProvider";
 
@@ -34,6 +35,7 @@ const MenuItems: MenuItem[] = [
 
 export const SideNav = () => {
   const { sideNavExpanded, setSideNavExpanded } = useApp();
+  const location = useLocation();
 
   const handleCloseSideNav = () => {
     setSideNavExpanded(false);
@@ -74,7 +76,10 @@ export const SideNav = () => {
             <Link to={item.path} key={item.label}>
               <li
                 key={item.label}
-                className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
+                className={cs(
+                  "text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer",
+                  location.pathname === item.path ? "bg-gray-200" : ""
+                )}
               >
                 {item.label}
               </li>