From f6c50106bd48df1b907ec549bc5a14df925de5b6 Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <bpumfleet@gmail.com>
Date: Tue, 30 Mar 2021 13:25:09 +0100
Subject: [PATCH] Highlight nav items if routes are active

---
 components/Shell.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 0d32940b5e..a5b93598b3 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -1,8 +1,10 @@
 import Link from 'next/link';
 import { useState } from "react";
+import { useRouter } from "next/router";
 import { signOut, useSession } from 'next-auth/client';
 
 export default function Shell(props) {
+    const router = useRouter();
     const [ session, loading ] = useSession();
     const [ profileDropdownExpanded, setProfileDropdownExpanded ] = useState(false);
 
@@ -24,19 +26,19 @@ export default function Shell(props) {
                                     <div className="hidden md:block">
                                         <div className="ml-10 flex items-baseline space-x-4">
                                             <Link href="/">
-                                                <a className="bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
+                                                <a className={router.pathname == "/" ? "bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Dashboard</a>
                                             </Link>
                                             <Link href="/">
-                                                <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Bookings</a>
+                                                <a className={router.pathname.startsWith("/bookings") ? "bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Bookings</a>
                                             </Link>
                                             <Link href="/">
-                                                <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Availability</a>
+                                                <a className={router.pathname.startsWith("/availability") ? "bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Availability</a>
                                             </Link>
                                             <Link href="/integrations">
-                                                <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Integrations</a>
+                                                <a className={router.pathname.startsWith("/integrations") ? "bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Integrations</a>
                                             </Link>
                                             <Link href="/">
-                                                <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
+                                                <a className={router.pathname.startsWith("/team") ? "bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Team</a>
                                             </Link>
                                         </div>
                                     </div>