From b2c25ba94396463989aba661df4fa7b61bffbfad Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Tue, 1 Jun 2021 22:30:40 +0000 Subject: [PATCH] ActiveLink extends Link by adding an activated class when page is active --- components/ActiveLink.tsx | 23 +++++++++++++++++ components/Settings.tsx | 44 ++++++++++++-------------------- styles/components/activelink.css | 16 ++++++++++++ styles/globals.css | 1 + 4 files changed, 56 insertions(+), 28 deletions(-) create mode 100644 components/ActiveLink.tsx create mode 100644 styles/components/activelink.css diff --git a/components/ActiveLink.tsx b/components/ActiveLink.tsx new file mode 100644 index 0000000000000..f4da7d653a798 --- /dev/null +++ b/components/ActiveLink.tsx @@ -0,0 +1,23 @@ +import { useRouter } from 'next/router' +import PropTypes from 'prop-types' +import Link from 'next/link' +import React, { Children } from 'react' + +const ActiveLink = ({ children, activeClassName, ...props }) => { + const { asPath } = useRouter() + const child = Children.only(children) + const childClassName = child.props.className || '' + + const className = + asPath === props.href || asPath === props.as + ? `${childClassName} ${activeClassName}`.trim() + : childClassName + + return {React.cloneElement(child, { className })}; +} + +ActiveLink.defaultProps = { + activeClassName: 'active' +} as Partial + +export default ActiveLink \ No newline at end of file diff --git a/components/Settings.tsx b/components/Settings.tsx index 480e0757915e2..382141d84b419 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,6 +1,6 @@ -import Link from 'next/link'; +import ActiveLink from '../components/ActiveLink'; import { useRouter } from "next/router"; -import { UserCircleIcon, KeyIcon, CodeIcon } from '@heroicons/react/outline'; +import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon } from '@heroicons/react/outline'; export default function SettingsShell(props) { const router = useRouter(); @@ -11,15 +11,11 @@ export default function SettingsShell(props) {