it has to be passed to be used

openstax · Aug 29, 2024 · 8cb782c · 8cb782c
1 parent 53b3d1f
commit 8cb782c
Showing 1 changed file with 5 additions and 2 deletions.
diff --git 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"