chore(ui): merge SideBar and ProgressionSideBar

apps/site/components/withSidebar.tsx

@@ -14,29 +14,35 @@ import type { NavigationKeys } from '#site/types';
 type WithSidebarProps = {
   navKeys: Array<NavigationKeys>;
   context?: Record<string, RichTranslationValues>;
+  showProgressionIcons?: boolean;
 };
 
-const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context }) => {
+const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname()!;
   const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
+  const sideNavigation = getSideNavigation(navKeys, context);
 
-  const mappedSidebarItems = getSideNavigation(navKeys, context).map(
-    ([, { label, items }]) => ({
-      groupName: label,
-      items: items.map(([, item]) => item),
-    })
-  );
+  const mappedSidebarItems =
+    // If there's only a single navigation key, use it's sub-items
+    // as our navigation.
+    (navKeys.length === 1 ? sideNavigation[0][1].items : sideNavigation).map(
+      ([, { label, items }]) => ({
+        groupName: label,
+        items: items.map(([, item]) => item),
+      })
+    );
 
   return (
     <Sidebar
       groups={mappedSidebarItems}
       pathname={pathname.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
-      onSelect={value => push(value)}
+      onSelect={push}
       as={Link}
+      {...props}
     />
   );
 };

apps/site/layouts/Learn.tsx

@@ -5,15 +5,15 @@ import WithBreadcrumbs from '#site/components/withBreadcrumbs';
 import WithFooter from '#site/components/withFooter';
 import WithMetaBar from '#site/components/withMetaBar';
 import WithNavBar from '#site/components/withNavBar';
-import WithProgressionSidebar from '#site/components/withProgressionSidebar';
+import WithSideBar from '#site/components/withSidebar';
 import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks';
 
 const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
     <Article>
-      <WithProgressionSidebar navKey="learn" />
+      <WithSideBar navKeys={['learn']} showProgressionIcons={true} />
 
       <div>
         <main>