From 9afcac5af9d579b7252b3c588e81f81da1b4f7cb Mon Sep 17 00:00:00 2001
From: Ilya Lyamkin <ilyal@spotify.com>
Date: Fri, 16 Apr 2021 16:59:26 +0200
Subject: [PATCH] Pass NavLinkProps to SidebarItem

Signed-off-by: Ilya Lyamkin <ilyal@spotify.com>
---
 .changeset/healthy-phones-press.md         | 5 +++++
 packages/core/src/layout/Sidebar/Items.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/healthy-phones-press.md

diff --git a/.changeset/healthy-phones-press.md b/.changeset/healthy-phones-press.md
new file mode 100644
index 0000000000..c771caefc5
--- /dev/null
+++ b/.changeset/healthy-phones-press.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Allow passing NavLinkProps to SidebarItem component to use in NavLink
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index e41a45a225..7c9c0a901f 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -32,7 +32,7 @@ import React, {
   useContext,
   useState,
 } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, NavLinkProps } from 'react-router-dom';
 import { sidebarConfig, SidebarContext } from './config';
 
 const useStyles = makeStyles<BackstageTheme>(theme => {
@@ -138,7 +138,7 @@ type SidebarItemButtonProps = SidebarItemBaseProps & {
 type SidebarItemLinkProps = SidebarItemBaseProps & {
   to: string;
   onClick?: (ev: React.MouseEvent) => void;
-};
+} & NavLinkProps;
 
 type SidebarItemProps = SidebarItemButtonProps | SidebarItemLinkProps;
 
@@ -156,6 +156,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
     onClick,
     children,
     className,
+    ...navLinkProps
   } = props;
   const classes = useStyles();
   // XXX (@koroeskohr): unsure this is optimal. But I just really didn't want to have the item component
@@ -216,6 +217,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
       activeClassName={classes.selected}
       to={props.to}
       ref={ref}
+      {...navLinkProps}
     >
       {content}
     </NavLink>