public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Highlight nav items if routes are active

pull/2/head
Bailey Pumfleet 2021-03-30 13:25:09 +01:00
parent a758c28fb0
commit f6c50106bd
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Shell.tsx
View File

@ -1,8 +1,10 @@
import Link from 'next/link'; import Link from 'next/link';
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/router";
import { signOut, useSession } from 'next-auth/client'; import { signOut, useSession } from 'next-auth/client';
export default function Shell(props) { export default function Shell(props) {
const router = useRouter();
const [ session, loading ] = useSession(); const [ session, loading ] = useSession();
const [ profileDropdownExpanded, setProfileDropdownExpanded ] = useState(false); const [ profileDropdownExpanded, setProfileDropdownExpanded ] = useState(false);
@ -24,19 +26,19 @@ export default function Shell(props) {
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-10 flex items-baseline space-x-4">
<Link href="/"> <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>
<Link href="/"> <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>
<Link href="/"> <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>
<Link href="/integrations"> <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>
<Link href="/"> <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> </Link>
</div> </div>
</div> </div>