From 8cb782c8aa097a67e49ce8f98a3b49d4512d6e7b Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Thu, 29 Aug 2024 11:41:23 -0700
Subject: [PATCH] it has to be passed to be used

---
 src/components/SidebarNav.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index 564384ca7..39660a7cf 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -149,6 +149,7 @@ type FunctionRender = (_: {
 }) => React.ReactNode;
 
 interface SidebarNavSharedProps {
+  id?: string;
   navHeader?: React.ReactNode | FunctionRender;
   navFooter?: React.ReactNode | FunctionRender;
   children: React.ReactNode | FunctionRender;
@@ -253,13 +254,14 @@ export const SidebarNavBase = ({
 };
 
 export const SidebarNav = styled(
-  ({ className, ...props }: SidebarNavSharedProps) => {
+  ({ className, id, ...props }: SidebarNavSharedProps) => {
     const { isMobile, navIsCollapsed, setNavIsCollapsed } =
       useSidebarNavProps(props);
     const sidebarNavRef = React.useRef<HTMLElement>(null);
 
     return (
       <nav
+        id={id}
         ref={sidebarNavRef}
         data-testid="sidebarnav"
         className={classNames(className, {
@@ -284,7 +286,7 @@ export const SidebarNav = styled(
 `;
 
 export const BodyPortalSidebarNav = styled(
-  ({ className, ...props }: SidebarNavSharedProps) => {
+  ({ className, id, ...props }: SidebarNavSharedProps) => {
     const { isMobile, navIsCollapsed, setNavIsCollapsed } =
       useSidebarNavProps(props);
 
@@ -311,6 +313,7 @@ export const BodyPortalSidebarNav = styled(
 
     return (
       <BodyPortal
+        id={id}
         externalRef={ref}
         tagName="nav"
         slot="sidebar"