@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/src/labs/SideNav/SideNav.tsx

@@ -10,44 +10,45 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import styled from "@emotion/styled";
+import styled, { CSSObject } from "@emotion/styled";
 import {
   memo,
   useMemo,
   useState,
   useCallback,
-  KeyboardEvent,
   useRef,
   useEffect,
+  KeyboardEventHandler,
 } from "react";
+import { Skeleton } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
-import { ExpandLeftIcon } from "../../icons.generated";
-import { NavAccordion } from "../NavAccordion";
+import { NavAccordion } from "./NavAccordion";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider";
 import type { SideNavProps } from "./types";
-import { OktaLogo } from "./OktaLogo";
 import { SideNavHeader } from "./SideNavHeader";
 import {
   SideNavItemContent,
-  SideNavListItemContainer,
+  StyledSideNavListItem,
 } from "./SideNavItemContent";
 import { SideNavFooterContent } from "./SideNavFooterContent";
+import { SideNavItemContentContext } from "./SideNavItemContentContext";
+import { SideNavToggleButton } from "./SideNavToggleButton";
+import { SortableList } from "./SortableList/SortableList";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { arrayMove } from "@dnd-kit/sortable";
 
 export const DEFAULT_SIDE_NAV_WIDTH = "300px";
 
-const SideNavContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "expandedWidth",
-})(({ expandedWidth }: { expandedWidth: SideNavProps["expandedWidth"] }) => ({
-  display: "flex",
-  height: "100%",
-  maxWidth: expandedWidth,
-  overflow: "hidden",
-}));
+// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)
+// to align it in the middle of the nav header text
+export const SIDENAV_COLLAPSE_ICON_POSITION = "77px";
 
-const SideNavCollapsedContainer = styled("div", {
+const StyledCollapsibleContent = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
@@ -58,43 +59,97 @@ const SideNavCollapsedContainer = styled("div", {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
   }) => ({
-    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,
+    position: "relative",
+    display: "inline-grid",
+    gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,
+    // gridTemplateRows: "max-content 1fr max-content",
+    height: "100%",
+    transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+    overflow: "hidden",
+
+    ...(isSideNavCollapsed && {
+      gridTemplateColumns: 0,
+      opacity: 0,
+    }),
   }),
 );
 
-const SideNavExpandContainer = styled("nav", {
+const StyledOpacityTransitionContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "isSideNavCollapsed" &&
-    prop !== "expandedWidth",
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
   ({
     odysseyDesignTokens,
     isSideNavCollapsed,
-    expandedWidth,
   }: {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
-    expandedWidth: string;
   }) => ({
-    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,
+    display: "inline-grid",
+    gridTemplateRows: "max-content 1fr max-content",
+    height: "100%",
+    transition: `opacity 50ms`,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-    borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+    overflow: "hidden",
+
+    ...(isSideNavCollapsed && {
+      opacity: 0,
+    }),
+  }),
+);
+
+const StyledSideNav = styled("nav", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+})(
+  ({
+    odysseyDesignTokens,
+    isSideNavCollapsed,
+  }: {
+    odysseyDesignTokens: DesignTokens;
+    isSideNavCollapsed: boolean;
+  }) => ({
+    position: "relative",
+    display: "inline-block",
+    height: "100%",
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+
+    "&::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)`,
+    },
   }),
 );
 
@@ -109,36 +164,43 @@ const SideNavHeaderContainer = styled("div", {
     hasContentScrolled: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    position: "sticky",
-    top: 0,
+    flexShrink: 0,
     // The bottom border should appear only if the scrollable region has been scrolled
-    ...(hasContentScrolled && {
-      borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
-    }),
+    ...(hasContentScrolled &&
+      ({
+        borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+      } satisfies CSSObject)),
   }),
 );
 
-const SideNavListContainer = styled.ul({
+const SideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none",
-});
+}));
 
-const SideNavScrollableContainer = styled.div({
-  flex: 1,
+const SideNavScrollableContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  flex: "1 1 100%",
   overflowY: "auto",
-});
+  paddingInline: odysseyDesignTokens.Spacing2,
+}));
+
+const SectionHeaderContainer = styled("li", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  paddingBlock: odysseyDesignTokens.Spacing1,
+  paddingInline: odysseyDesignTokens.Spacing4,
+}));
 
-const SectionHeader = styled("li", {
+const SectionHeader = styled("h3", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
-  paddingLeft: odysseyDesignTokens.Spacing4,
   textTransform: "uppercase",
 }));
 
@@ -153,15 +215,14 @@ const SideNavFooter = styled("div", {
     isContentScrollable: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    position: "sticky",
-    bottom: 0,
-    paddingTop: odysseyDesignTokens.Spacing2,
+    flexShrink: 0,
     transitionProperty: "box-shadow",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
     // The box shadow should appear above the footer only if the scrollable region has overflow
     ...(isContentScrollable && {
-      boxShadow: odysseyDesignTokens.DepthHigh,
+      boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)",
     }),
   }),
 );
@@ -169,45 +230,76 @@ const SideNavFooter = styled("div", {
 const SideNavFooterItemsContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  paddingTop: odysseyDesignTokens.Spacing2,
-  paddingBottom: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  // paddingBlockEnd: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
-  justifyContent: "center",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "& a": {
+
+  a: {
     color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-  },
-  "& a:hover": {
-    textDecoration: "none",
-  },
-  "& a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading,
+
+    "&:hover": {
+      textDecoration: "none",
+    },
+    "&:visited": {
+      color: odysseyDesignTokens.TypographyColorHeading,
+    },
   },
 }));
 
+const LoadingItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  alignItems: "center",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4,
+}));
+
 const getHasScrollableContent = (scrollableContainer: HTMLElement) =>
   scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
 
+const LoadingItem = () => {
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  return (
+    <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <Skeleton
+        variant="circular"
+        width={odysseyDesignTokens.Spacing4}
+        height={odysseyDesignTokens.Spacing4}
+      />
+      <Skeleton variant="rounded" width="100%" />
+    </LoadingItemContainer>
+  );
+};
+
 const SideNav = ({
-  navHeaderText,
+  appName,
+  footerComponent,
+  footerItems,
+  hasCustomFooter,
   isCollapsible,
+  isCompact,
+  isLoading,
+  logoProps,
   onCollapse,
   onExpand,
+  onSort,
   sideNavItems,
-  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
-  footerItems,
-  footerComponent,
-  logo,
 }: SideNavProps) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const [hasContentScrolled, setHasContentScrolled] = useState(false);
   const scrollableContentRef = useRef<HTMLUListElement>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);
 
   useEffect(() => {
     const updateIsContentScrollable = () => {
@@ -267,10 +359,14 @@ const SideNav = ({
         },
       );
     }
+
     if (intersectionObserverRef.current && scrollableContentRef.current) {
-      const ul = scrollableContentRef.current;
-      const li = ul?.firstChild;
-      intersectionObserverRef.current.observe(li as HTMLElement);
+      const ulElement = scrollableContentRef.current;
+      const [liElement] = Array.from(ulElement?.children || []);
+
+      if (liElement) {
+        intersectionObserverRef.current.observe(liElement);
+      }
     }
 
     // Cleanup when unmounted:
@@ -285,7 +381,7 @@ const SideNav = ({
       }
       cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount
     };
-  }, []);
+  }, [sideNavItems]);
 
   const scrollIntoViewRef = useRef<HTMLLIElement>(null);
   /**
@@ -295,8 +391,8 @@ const SideNav = ({
    */
   const firstSideNavItemIdWithIsSelected = useMemo(() => {
     const flattenedItems = sideNavItems.flatMap((sideNavItem) =>
-      sideNavItem.children
-        ? [sideNavItem, ...sideNavItem.children]
+      sideNavItem.nestedNavItems
+        ? [sideNavItem, ...sideNavItem.nestedNavItems]
         : sideNavItem,
     );
     const firstItemWithIsSelected = flattenedItems.find(
@@ -328,155 +424,259 @@ const SideNav = ({
     [firstSideNavItemIdWithIsSelected],
   );
 
-  const processedSideNavItems = useMemo(
-    () =>
-      sideNavItems.map((item) => ({
-        ...item,
-        children: item.children?.map((childProps) => (
-          <SideNavItemContent
-            key={childProps.id}
-            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}
-            {...childProps}
-          />
-        )),
-      })),
-    [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems],
+  const sideNavItemContentProviderValue = useMemo(
+    () => ({ isCompact, depth: 1 }),
+    [isCompact],
   );
 
-  const sideNavCollapseHandler = useCallback(() => {
-    setSideNavCollapsed(!isSideNavCollapsed);
-    onCollapse?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
+  const setSelectedItem = useCallback(
+    (selectedItemId: string) => {
+      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: (
+            <SideNavItemContentContext.Provider
+              value={{
+                ...sideNavItemContentProviderValue,
+                depth: 2,
+                isSortable: item.isSortable,
+              }}
+              key={childProps.id}
+            >
+              <SideNavItemContent
+                {...childProps}
+                scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}
+                onItemSelected={setSelectedItem}
+              />
+            </SideNavItemContentContext.Provider>
+          ),
+        };
+      }),
+    }));
+  }, [
+    getRefIfThisIsFirstNodeWithIsSelected,
+    sideNavItemsList,
+    sideNavItemContentProviderValue,
+    setSelectedItem,
+  ]);
 
   const sideNavExpandClickHandler = useCallback(() => {
+    isSideNavCollapsed ? onExpand?.() : onCollapse?.();
     setSideNavCollapsed(!isSideNavCollapsed);
-    onExpand?.();
-  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);
 
-  const sideNavExpandKeyHandler = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
+  const sideNavExpandKeyHandler = useCallback<
+    KeyboardEventHandler<HTMLButtonElement>
+  >(
+    (event) => {
       if (event?.key === "Enter" || event?.code === "Space") {
         event.preventDefault();
-        setSideNavCollapsed(!isSideNavCollapsed);
-        onExpand?.();
+        sideNavExpandClickHandler();
       }
     },
-    [isSideNavCollapsed, setSideNavCollapsed, onExpand],
+    [sideNavExpandClickHandler],
   );
 
-  const expandLeftIconStyles = useMemo(
-    () => ({
-      fontSize: "1em",
-      margin: `0 ${odysseyDesignTokens.Spacing1}`,
-    }),
-    [odysseyDesignTokens],
+  const setSortedItems = useCallback(
+    (parentId: string, activeIndex: number, overIndex: number) => {
+      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 (
-    <SideNavContainer expandedWidth={expandedWidth}>
-      <SideNavCollapsedContainer
-        tabIndex={0}
-        role="button"
-        odysseyDesignTokens={odysseyDesignTokens}
-        isSideNavCollapsed={isSideNavCollapsed}
-        onClick={sideNavExpandClickHandler}
-        onKeyDown={sideNavExpandKeyHandler}
-        data-se="collapsed-region"
-        data-aria-label="expand side navigation"
-      >
-        <ExpandLeftIcon sx={expandLeftIconStyles} />
-      </SideNavCollapsedContainer>
-      <SideNavExpandContainer
-        odysseyDesignTokens={odysseyDesignTokens}
-        isSideNavCollapsed={isSideNavCollapsed}
-        data-se="expanded-region"
-        expandedWidth={expandedWidth}
-        aria-label={navHeaderText}
-      >
-        <SideNavHeaderContainer
+    <StyledSideNav
+      aria-label={t("navigation.label")}
+      id="side-nav-expandable"
+      isSideNavCollapsed={isSideNavCollapsed}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {isCollapsible && (
+        <SideNavToggleButton
+          ariaControls="side-nav-expandable"
+          isSideNavCollapsed={isSideNavCollapsed}
+          onClick={sideNavExpandClickHandler}
+          onKeyDown={sideNavExpandKeyHandler}
+        />
+      )}
+      <OdysseyThemeProvider>
+        <StyledCollapsibleContent
+          data-se="collapsible-region"
+          isSideNavCollapsed={isSideNavCollapsed}
           odysseyDesignTokens={odysseyDesignTokens}
-          hasContentScrolled={hasContentScrolled}
         >
-          <SideNavHeader
-            logo={logo || <OktaLogo />}
-            navHeaderText={navHeaderText}
-            isCollapsible={isCollapsible}
-            onCollapse={sideNavCollapseHandler}
-          />
-        </SideNavHeaderContainer>
-        <SideNavScrollableContainer data-se="scrollable-region">
-          <SideNavListContainer ref={scrollableContentRef}>
-            {processedSideNavItems?.map((item) => {
-              const {
-                id,
-                label,
-                isSectionHeader,
-                startIcon,
-                children,
-                isDefaultExpanded,
-                isDisabled,
-                isExpanded,
-              } = item;
-
-              if (isSectionHeader) {
-                return (
-                  <SectionHeader
-                    id={id}
-                    key={id}
-                    odysseyDesignTokens={odysseyDesignTokens}
-                  >
-                    {label}
-                  </SectionHeader>
-                );
-              } else if (children) {
-                return (
-                  <SideNavListItemContainer
-                    id={id}
-                    key={id}
-                    odysseyDesignTokens={odysseyDesignTokens}
-                  >
-                    <NavAccordion
-                      label={label}
-                      isDefaultExpanded={isDefaultExpanded}
-                      isExpanded={isExpanded}
-                      startIcon={startIcon}
-                      isDisabled={isDisabled}
-                    >
-                      <SideNavListContainer id={`${id}-list`}>
-                        {children}
-                      </SideNavListContainer>
-                    </NavAccordion>
-                  </SideNavListItemContainer>
-                );
-              } else {
-                return (
-                  <SideNavItemContent
-                    key={item.id}
-                    scrollRef={getRefIfThisIsFirstNodeWithIsSelected(item.id)}
-                    {...item}
-                  />
-                );
-              }
-            })}
-          </SideNavListContainer>
-        </SideNavScrollableContainer>
-        {(footerItems || footerComponent) && (
-          <SideNavFooter
+          <StyledOpacityTransitionContainer
+            isSideNavCollapsed={isSideNavCollapsed}
             odysseyDesignTokens={odysseyDesignTokens}
-            isContentScrollable={isContentScrollable}
           >
-            {footerComponent}
-            {footerItems && !footerComponent && (
-              <SideNavFooterItemsContainer
+            <SideNavHeaderContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              hasContentScrolled={hasContentScrolled}
+            >
+              <SideNavHeader
+                appName={appName}
+                isLoading={isLoading}
+                logoProps={logoProps}
+              />
+            </SideNavHeaderContainer>
+            <SideNavScrollableContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              data-se="scrollable-region"
+            >
+              <SideNavListContainer role="none" ref={scrollableContentRef}>
+                {isLoading
+                  ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)
+                  : processedSideNavItems?.map((item) => {
+                      const {
+                        id,
+                        label,
+                        isSectionHeader,
+                        startIcon,
+                        childNavItems,
+                        isSortable,
+                        isDefaultExpanded,
+                        isDisabled,
+                        isExpanded,
+                      } = item;
+
+                      if (isSectionHeader) {
+                        return (
+                          <SectionHeaderContainer
+                            id={id}
+                            key={id}
+                            odysseyDesignTokens={odysseyDesignTokens}
+                          >
+                            <SectionHeader
+                              odysseyDesignTokens={odysseyDesignTokens}
+                            >
+                              {label}
+                            </SectionHeader>
+                          </SectionHeaderContainer>
+                        );
+                      } else if (childNavItems) {
+                        return (
+                          <StyledSideNavListItem
+                            id={id}
+                            key={id}
+                            odysseyDesignTokens={odysseyDesignTokens}
+                            disabled={isDisabled}
+                            aria-disabled={isDisabled}
+                          >
+                            <NavAccordion
+                              label={label}
+                              isCompact={isCompact}
+                              isDefaultExpanded={isDefaultExpanded}
+                              isExpanded={isExpanded}
+                              startIcon={startIcon}
+                              isDisabled={isDisabled}
+                            >
+                              <SideNavListContainer role="none">
+                                {isSortable ? (
+                                  <SortableList
+                                    parentId={item.id}
+                                    items={childNavItems}
+                                    onChange={setSortedItems}
+                                    renderItem={(sortableItem) => (
+                                      <SortableList.Item
+                                        id={sortableItem.id}
+                                        isDisabled={sortableItem.isDisabled}
+                                        isSelected={sortableItem.isSelected}
+                                      >
+                                        {sortableItem.navItem}
+                                      </SortableList.Item>
+                                    )}
+                                  />
+                                ) : (
+                                  childNavItems.map((item) => item.navItem)
+                                )}
+                              </SideNavListContainer>
+                            </NavAccordion>
+                          </StyledSideNavListItem>
+                        );
+                      } else {
+                        return (
+                          <SideNavItemContentContext.Provider
+                            key={item.id}
+                            value={sideNavItemContentProviderValue}
+                          >
+                            <SideNavItemContent
+                              {...item}
+                              key={item.id}
+                              scrollRef={getRefIfThisIsFirstNodeWithIsSelected(
+                                item.id,
+                              )}
+                              onItemSelected={setSelectedItem}
+                            />
+                          </SideNavItemContentContext.Provider>
+                        );
+                      }
+                    })}
+              </SideNavListContainer>
+            </SideNavScrollableContainer>
+            {!isLoading && (footerItems || hasCustomFooter) && (
+              <SideNavFooter
                 odysseyDesignTokens={odysseyDesignTokens}
+                isContentScrollable={isContentScrollable}
               >
-                <SideNavFooterContent footerItems={footerItems} />
-              </SideNavFooterItemsContainer>
+                {hasCustomFooter
+                  ? footerComponent
+                  : footerItems && (
+                      <SideNavFooterItemsContainer
+                        odysseyDesignTokens={odysseyDesignTokens}
+                      >
+                        <SideNavFooterContent footerItems={footerItems} />
+                      </SideNavFooterItemsContainer>
+                    )}
+              </SideNavFooter>
             )}
-          </SideNavFooter>
-        )}
-      </SideNavExpandContainer>
-    </SideNavContainer>
+          </StyledOpacityTransitionContainer>
+        </StyledCollapsibleContent>
+      </OdysseyThemeProvider>
+    </StyledSideNav>
   );
 };