@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/dist/labs/SideNav/SideNav.js

@@ -1,3 +1,4 @@
+import _Skeleton from "@mui/material/Skeleton";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -12,59 +13,97 @@
 
 import styled from "@emotion/styled";
 import { memo, useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { ExpandLeftIcon } from "../../icons.generated/index.js";
-import { NavAccordion } from "../NavAccordion.js";
+import { useTranslation } from "react-i18next";
+import { NavAccordion } from "./NavAccordion.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { OktaLogo } from "./OktaLogo.js";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
 import { SideNavHeader } from "./SideNavHeader.js";
-import { SideNavItemContent, SideNavListItemContainer } from "./SideNavItemContent.js";
+import { SideNavItemContent, StyledSideNavListItem } from "./SideNavItemContent.js";
 import { SideNavFooterContent } from "./SideNavFooterContent.js";
+import { SideNavItemContentContext } from "./SideNavItemContentContext.js";
+import { SideNavToggleButton } from "./SideNavToggleButton.js";
+import { SortableList } from "./SortableList/SortableList.js";
+import { arrayMove } from "@dnd-kit/sortable";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 export const DEFAULT_SIDE_NAV_WIDTH = "300px";
-const SideNavContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "expandedWidth"
+export const SIDENAV_COLLAPSE_ICON_POSITION = "77px";
+const StyledCollapsibleContent = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
-  expandedWidth
+  odysseyDesignTokens,
+  isSideNavCollapsed
 }) => ({
-  display: "flex",
+  position: "relative",
+  display: "inline-grid",
+  gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,
   height: "100%",
-  maxWidth: expandedWidth,
-  overflow: "hidden"
+  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
+  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+  overflow: "hidden",
+  ...(isSideNavCollapsed && {
+    gridTemplateColumns: 0,
+    opacity: 0
+  })
 }));
-const SideNavCollapsedContainer = styled("div", {
+const StyledOpacityTransitionContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
   odysseyDesignTokens,
   isSideNavCollapsed
 }) => ({
-  backgroundColor: odysseyDesignTokens.HueNeutral300,
-  paddingTop: odysseyDesignTokens.Spacing5,
-  cursor: "pointer",
-  width: isSideNavCollapsed ? "auto" : 0,
-  opacity: isSideNavCollapsed ? 1 : 0,
-  visibility: isSideNavCollapsed ? "visible" : "hidden",
-  transitionProperty: "opacity",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
+  display: "inline-grid",
+  gridTemplateRows: "max-content 1fr max-content",
+  height: "100%",
+  transition: `opacity 50ms`,
+  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+  overflow: "hidden",
+  ...(isSideNavCollapsed && {
+    opacity: 0
+  })
 }));
-const SideNavExpandContainer = styled("nav", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed" && prop !== "expandedWidth"
+const StyledSideNav = styled("nav", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
   odysseyDesignTokens,
-  isSideNavCollapsed,
-  expandedWidth
+  isSideNavCollapsed
 }) => ({
+  position: "relative",
+  display: "inline-block",
+  height: "100%",
   backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-  flexDirection: "column",
-  display: "flex",
-  opacity: isSideNavCollapsed ? 0 : 1,
-  visibility: isSideNavCollapsed ? "hidden" : "visible",
-  width: isSideNavCollapsed ? "0" : expandedWidth,
-  transitionProperty: "opacity, width",
-  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-  borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`
+  "&::after": {
+    backgroundColor: odysseyDesignTokens.HueNeutral200,
+    content: "''",
+    height: "100%",
+    opacity: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    transform: `translateX(0)`,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    width: odysseyDesignTokens.Spacing2,
+    zIndex: 2
+  },
+  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)": {
+    ...(isSideNavCollapsed && {
+      "&::after": {
+        opacity: 1,
+        transform: `translateX(100%)`
+      },
+      "[data-sidenav-toggle='true']": {
+        transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`
+      }
+    })
+  },
+  "[data-sidenav-toggle='true']": {
+    position: "absolute",
+    top: SIDENAV_COLLAPSE_ICON_POSITION,
+    right: 0,
+    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    transform: `translate3d(100%, 0, 0)`
+  }
 }));
 const SideNavHeaderContainer = styled("div", {
   shouldForwardProp: prop => prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
@@ -72,22 +111,34 @@ const SideNavHeaderContainer = styled("div", {
   hasContentScrolled,
   odysseyDesignTokens
 }) => ({
-  position: "sticky",
-  top: 0,
+  flexShrink: 0,
   ...(hasContentScrolled && {
     borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`
   })
 }));
-const SideNavListContainer = styled.ul({
+const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none"
-});
-const SideNavScrollableContainer = styled.div({
-  flex: 1,
-  overflowY: "auto"
-});
-const SectionHeader = styled("li", {
+}));
+const SideNavScrollableContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  flex: "1 1 100%",
+  overflowY: "auto",
+  paddingInline: odysseyDesignTokens.Spacing2
+}));
+const SectionHeaderContainer = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  paddingBlock: odysseyDesignTokens.Spacing1,
+  paddingInline: odysseyDesignTokens.Spacing4
+}));
+const SectionHeader = styled("h3", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
@@ -96,9 +147,6 @@ const SectionHeader = styled("li", {
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
-  paddingLeft: odysseyDesignTokens.Spacing4,
   textTransform: "uppercase"
 }));
 const SideNavFooter = styled("div", {
@@ -107,14 +155,13 @@ const SideNavFooter = styled("div", {
   isContentScrollable,
   odysseyDesignTokens
 }) => ({
-  position: "sticky",
-  bottom: 0,
-  paddingTop: odysseyDesignTokens.Spacing2,
+  flexShrink: 0,
   transitionProperty: "box-shadow",
   transitionDuration: odysseyDesignTokens.TransitionDurationMain,
   transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
   ...(isContentScrollable && {
-    boxShadow: odysseyDesignTokens.DepthHigh
+    boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
   })
 }));
 const SideNavFooterItemsContainer = styled("div", {
@@ -122,42 +169,73 @@ const SideNavFooterItemsContainer = styled("div", {
 })(({
   odysseyDesignTokens
 }) => ({
-  paddingTop: odysseyDesignTokens.Spacing2,
-  paddingBottom: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
-  justifyContent: "center",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "& a": {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`
-  },
-  "& a:hover": {
-    textDecoration: "none"
-  },
-  "& a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading
+  a: {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    "&:hover": {
+      textDecoration: "none"
+    },
+    "&:visited": {
+      color: odysseyDesignTokens.TypographyColorHeading
+    }
   }
 }));
+const LoadingItemContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4
+}));
 const getHasScrollableContent = scrollableContainer => scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
+const LoadingItem = () => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(LoadingItemContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(_Skeleton, {
+      variant: "circular",
+      width: odysseyDesignTokens.Spacing4,
+      height: odysseyDesignTokens.Spacing4
+    }), _jsx(_Skeleton, {
+      variant: "rounded",
+      width: "100%"
+    })]
+  });
+};
 const SideNav = ({
-  navHeaderText,
+  appName,
+  footerComponent,
+  footerItems,
+  hasCustomFooter,
   isCollapsible,
+  isCompact,
+  isLoading,
+  logoProps,
   onCollapse,
   onExpand,
-  sideNavItems,
-  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
-  footerItems,
-  footerComponent,
-  logo
+  onSort,
+  sideNavItems
 }) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
   const scrollableContentRef = useRef(null);
   const resizeObserverRef = useRef(null);
   const intersectionObserverRef = useRef(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);
   useEffect(() => {
     const updateIsContentScrollable = () => {
       if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -188,9 +266,11 @@ const SideNav = ({
       });
     }
     if (intersectionObserverRef.current && scrollableContentRef.current) {
-      const ul = scrollableContentRef.current;
-      const li = ul?.firstChild;
-      intersectionObserverRef.current.observe(li);
+      const ulElement = scrollableContentRef.current;
+      const [liElement] = Array.from(ulElement?.children || []);
+      if (liElement) {
+        intersectionObserverRef.current.observe(liElement);
+      }
     }
     return () => {
       if (resizeObserverRef.current) {
@@ -203,10 +283,10 @@ const SideNav = ({
       }
       cancelAnimationFrame(resizeObserverDebounceTimer);
     };
-  }, []);
+  }, [sideNavItems]);
   const scrollIntoViewRef = useRef(null);
   const firstSideNavItemIdWithIsSelected = useMemo(() => {
-    const flattenedItems = sideNavItems.flatMap(sideNavItem => sideNavItem.children ? [sideNavItem, ...sideNavItem.children] : sideNavItem);
+    const flattenedItems = sideNavItems.flatMap(sideNavItem => sideNavItem.nestedNavItems ? [sideNavItem, ...sideNavItem.nestedNavItems] : sideNavItem);
     const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
     return firstItemWithIsSelected?.id;
   }, [sideNavItems]);
@@ -216,116 +296,180 @@ const SideNav = ({
     }
   }, [firstSideNavItemIdWithIsSelected, scrollIntoViewRef]);
   const getRefIfThisIsFirstNodeWithIsSelected = useCallback(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
-  const processedSideNavItems = useMemo(() => sideNavItems.map(item => ({
-    ...item,
-    children: item.children?.map(childProps => _jsx(SideNavItemContent, {
-      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
-      ...childProps
-    }, childProps.id))
-  })), [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems]);
-  const sideNavCollapseHandler = useCallback(() => {
-    setSideNavCollapsed(!isSideNavCollapsed);
-    onCollapse?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
+  const sideNavItemContentProviderValue = useMemo(() => ({
+    isCompact,
+    depth: 1
+  }), [isCompact]);
+  const setSelectedItem = useCallback(selectedItemId => {
+    const updatedSideNavItems = sideNavItemsList.map(item => {
+      if (item.id === selectedItemId) {
+        item.isSelected = true;
+      } else if (item.isSelected) {
+        delete item.isSelected;
+      }
+      return item.nestedNavItems ? {
+        ...item,
+        nestedNavItems: item.nestedNavItems.map(childItem => {
+          if (childItem.id === selectedItemId) {
+            childItem.isSelected = true;
+          } else if (childItem.isSelected) {
+            delete childItem.isSelected;
+          }
+          return childItem;
+        })
+      } : item;
+    });
+    updateSideNavItemsList(updatedSideNavItems);
+  }, [sideNavItemsList]);
+  const processedSideNavItems = useMemo(() => {
+    return sideNavItemsList?.map(item => ({
+      ...item,
+      childNavItems: item.nestedNavItems?.map(childProps => {
+        return {
+          id: childProps.id,
+          isSelected: childProps.isSelected,
+          isDisabled: childProps.isDisabled,
+          navItem: _jsx(SideNavItemContentContext.Provider, {
+            value: {
+              ...sideNavItemContentProviderValue,
+              depth: 2,
+              isSortable: item.isSortable
+            },
+            children: _jsx(SideNavItemContent, {
+              ...childProps,
+              scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
+              onItemSelected: setSelectedItem
+            })
+          }, childProps.id)
+        };
+      })
+    }));
+  }, [getRefIfThisIsFirstNodeWithIsSelected, sideNavItemsList, sideNavItemContentProviderValue, setSelectedItem]);
   const sideNavExpandClickHandler = useCallback(() => {
+    isSideNavCollapsed ? onExpand?.() : onCollapse?.();
     setSideNavCollapsed(!isSideNavCollapsed);
-    onExpand?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);
   const sideNavExpandKeyHandler = useCallback(event => {
     if (event?.key === "Enter" || event?.code === "Space") {
       event.preventDefault();
-      setSideNavCollapsed(!isSideNavCollapsed);
-      onExpand?.();
+      sideNavExpandClickHandler();
     }
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
-  const expandLeftIconStyles = useMemo(() => ({
-    fontSize: "1em",
-    margin: `0 ${odysseyDesignTokens.Spacing1}`
-  }), [odysseyDesignTokens]);
-  return _jsxs(SideNavContainer, {
-    expandedWidth: expandedWidth,
-    children: [_jsx(SideNavCollapsedContainer, {
-      tabIndex: 0,
-      role: "button",
-      odysseyDesignTokens: odysseyDesignTokens,
+  }, [sideNavExpandClickHandler]);
+  const setSortedItems = useCallback((parentId, activeIndex, overIndex) => {
+    const sortedSideNavItems = sideNavItemsList.map(item => item.id === parentId && item.nestedNavItems ? {
+      ...item,
+      nestedNavItems: arrayMove(item.nestedNavItems, activeIndex, overIndex)
+    } : item);
+    updateSideNavItemsList(sortedSideNavItems);
+    onSort?.(sortedSideNavItems);
+  }, [onSort, sideNavItemsList]);
+  return _jsxs(StyledSideNav, {
+    "aria-label": t("navigation.label"),
+    id: "side-nav-expandable",
+    isSideNavCollapsed: isSideNavCollapsed,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [isCollapsible && _jsx(SideNavToggleButton, {
+      ariaControls: "side-nav-expandable",
       isSideNavCollapsed: isSideNavCollapsed,
       onClick: sideNavExpandClickHandler,
-      onKeyDown: sideNavExpandKeyHandler,
-      "data-se": "collapsed-region",
-      "data-aria-label": "expand side navigation",
-      children: _jsx(ExpandLeftIcon, {
-        sx: expandLeftIconStyles
-      })
-    }), _jsxs(SideNavExpandContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isSideNavCollapsed: isSideNavCollapsed,
-      "data-se": "expanded-region",
-      expandedWidth: expandedWidth,
-      "aria-label": navHeaderText,
-      children: [_jsx(SideNavHeaderContainer, {
-        odysseyDesignTokens: odysseyDesignTokens,
-        hasContentScrolled: hasContentScrolled,
-        children: _jsx(SideNavHeader, {
-          logo: logo || _jsx(OktaLogo, {}),
-          navHeaderText: navHeaderText,
-          isCollapsible: isCollapsible,
-          onCollapse: sideNavCollapseHandler
-        })
-      }), _jsx(SideNavScrollableContainer, {
-        "data-se": "scrollable-region",
-        children: _jsx(SideNavListContainer, {
-          ref: scrollableContentRef,
-          children: processedSideNavItems?.map(item => {
-            const {
-              id,
-              label,
-              isSectionHeader,
-              startIcon,
-              children,
-              isDefaultExpanded,
-              isDisabled,
-              isExpanded
-            } = item;
-            if (isSectionHeader) {
-              return _jsx(SectionHeader, {
-                id: id,
-                odysseyDesignTokens: odysseyDesignTokens,
-                children: label
-              }, id);
-            } else if (children) {
-              return _jsx(SideNavListItemContainer, {
-                id: id,
-                odysseyDesignTokens: odysseyDesignTokens,
-                children: _jsx(NavAccordion, {
-                  label: label,
-                  isDefaultExpanded: isDefaultExpanded,
-                  isExpanded: isExpanded,
-                  startIcon: startIcon,
-                  isDisabled: isDisabled,
-                  children: _jsx(SideNavListContainer, {
-                    id: `${id}-list`,
-                    children: children
-                  })
-                })
-              }, id);
-            } else {
-              return _jsx(SideNavItemContent, {
-                scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
-                ...item
-              }, item.id);
-            }
-          })
-        })
-      }), (footerItems || footerComponent) && _jsxs(SideNavFooter, {
+      onKeyDown: sideNavExpandKeyHandler
+    }), _jsx(OdysseyThemeProvider, {
+      children: _jsx(StyledCollapsibleContent, {
+        "data-se": "collapsible-region",
+        isSideNavCollapsed: isSideNavCollapsed,
         odysseyDesignTokens: odysseyDesignTokens,
-        isContentScrollable: isContentScrollable,
-        children: [footerComponent, footerItems && !footerComponent && _jsx(SideNavFooterItemsContainer, {
+        children: _jsxs(StyledOpacityTransitionContainer, {
+          isSideNavCollapsed: isSideNavCollapsed,
           odysseyDesignTokens: odysseyDesignTokens,
-          children: _jsx(SideNavFooterContent, {
-            footerItems: footerItems
-          })
-        })]
-      })]
+          children: [_jsx(SideNavHeaderContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            hasContentScrolled: hasContentScrolled,
+            children: _jsx(SideNavHeader, {
+              appName: appName,
+              isLoading: isLoading,
+              logoProps: logoProps
+            })
+          }), _jsx(SideNavScrollableContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            "data-se": "scrollable-region",
+            children: _jsx(SideNavListContainer, {
+              role: "none",
+              ref: scrollableContentRef,
+              children: isLoading ? [...Array(6)].map((_, index) => _jsx(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
+                const {
+                  id,
+                  label,
+                  isSectionHeader,
+                  startIcon,
+                  childNavItems,
+                  isSortable,
+                  isDefaultExpanded,
+                  isDisabled,
+                  isExpanded
+                } = item;
+                if (isSectionHeader) {
+                  return _jsx(SectionHeaderContainer, {
+                    id: id,
+                    odysseyDesignTokens: odysseyDesignTokens,
+                    children: _jsx(SectionHeader, {
+                      odysseyDesignTokens: odysseyDesignTokens,
+                      children: label
+                    })
+                  }, id);
+                } else if (childNavItems) {
+                  return _jsx(StyledSideNavListItem, {
+                    id: id,
+                    odysseyDesignTokens: odysseyDesignTokens,
+                    disabled: isDisabled,
+                    "aria-disabled": isDisabled,
+                    children: _jsx(NavAccordion, {
+                      label: label,
+                      isCompact: isCompact,
+                      isDefaultExpanded: isDefaultExpanded,
+                      isExpanded: isExpanded,
+                      startIcon: startIcon,
+                      isDisabled: isDisabled,
+                      children: _jsx(SideNavListContainer, {
+                        role: "none",
+                        children: isSortable ? _jsx(SortableList, {
+                          parentId: item.id,
+                          items: childNavItems,
+                          onChange: setSortedItems,
+                          renderItem: sortableItem => _jsx(SortableList.Item, {
+                            id: sortableItem.id,
+                            isDisabled: sortableItem.isDisabled,
+                            isSelected: sortableItem.isSelected,
+                            children: sortableItem.navItem
+                          })
+                        }) : childNavItems.map(item => item.navItem)
+                      })
+                    })
+                  }, id);
+                } else {
+                  return _jsx(SideNavItemContentContext.Provider, {
+                    value: sideNavItemContentProviderValue,
+                    children: _createElement(SideNavItemContent, {
+                      ...item,
+                      key: item.id,
+                      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
+                      onItemSelected: setSelectedItem
+                    })
+                  }, item.id);
+                }
+              })
+            })
+          }), !isLoading && (footerItems || hasCustomFooter) && _jsx(SideNavFooter, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            isContentScrollable: isContentScrollable,
+            children: hasCustomFooter ? footerComponent : footerItems && _jsx(SideNavFooterItemsContainer, {
+              odysseyDesignTokens: odysseyDesignTokens,
+              children: _jsx(SideNavFooterContent, {
+                footerItems: footerItems
+              })
+            })
+          })]
+        })
+      })
     })]
   });
 };