fix styling and crash

Author: avivkeller

apps/site/components/withSidebar.tsx

@@ -23,13 +23,17 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   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

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 SideBar from '#site/components/withSidebar';
+import WithSideBar from '#site/components/withSidebar';
 import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks';
 
 const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
     <Article>
-      <SideBar navKeys={['learn']} showProgressionIcons={true} />
+      <WithSideBar navKeys={['learn']} showProgressionIcons={true} />
 
       <div>
         <main>

packages/ui-components/Containers/Sidebar/SidebarGroup/index.module.css

@@ -5,22 +5,60 @@
     w-full
     flex-col
     gap-2;
-}
 
-.groupName {
-  @apply px-2
-    py-1
-    text-xs
-    font-semibold
-    text-neutral-800
-    dark:text-neutral-600;
-}
+  &:not(.progression) {
+    .groupName {
+      @apply px-2
+      py-1
+      text-xs
+      font-semibold
+      text-neutral-800
+      dark:text-neutral-600;
+    }
+  }
 
-.itemList {
-  @apply m-0
-    flex
-    flex-col
-    items-start
-    gap-0.5
-    p-0;
+  &.progression {
+    @apply flex
+      flex-col
+      gap-4
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+
+    .itemList {
+      @apply relative
+        -left-1
+        flex
+        flex-col
+        after:absolute
+        after:left-[0.45rem]
+        after:top-0
+        after:z-10
+        after:h-full
+        after:w-px
+        after:bg-neutral-200
+        after:content-['']
+        dark:after:bg-neutral-800;
+
+      a {
+        @apply first:before:absolute
+          first:before:bottom-[calc(50%+0.25rem)]
+          first:before:left-0
+          first:before:h-20
+          first:before:w-4
+          first:before:bg-white
+          first:before:content-['']
+          last:after:absolute
+          last:after:left-0
+          last:after:top-[calc(50%+0.25rem)]
+          last:after:h-20
+          last:after:w-4
+          last:after:bg-white
+          last:after:content-['']
+          first:dark:before:bg-neutral-950
+          last:dark:after:bg-neutral-950;
+      }
+    }
+  }
 }

packages/ui-components/Containers/Sidebar/SidebarGroup/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
 import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
@@ -16,18 +17,23 @@ type SidebarGroupProps = {
 const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
-  showProgressionIcons = false,
+  showProgressionIcons,
   ...props
 }) => (
-  <section className={styles.group}>
+  <section
+    className={classNames({
+      [styles.group]: true,
+      [styles.progression]: showProgressionIcons,
+    })}
+  >
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>
       {items.map(({ label, link }) => (
         <SidebarItem
           key={link}
           label={label}
           link={link}
-          showProgressionIcon={showProgressionIcons}
+          showProgressionIcons={showProgressionIcons}
           {...props}
         />
       ))}

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

@@ -1,26 +1,24 @@
 @reference '../../../styles/index.css';
 
 .item {
-  @apply flex
+  @apply font-regular
+    relative
+    z-20
+    flex
     w-full
-    list-none
+    items-center
+    overflow-hidden
+    text-sm
     text-neutral-800
     dark:text-neutral-200;
 
-  a {
-    @apply inline-flex
-      items-center
-      gap-2
-      p-2;
-  }
-
   .label {
     @apply font-regular
-      w-full
+      p-2
       text-sm;
   }
 
-  svg {
+  .progressionIcon {
     @apply shrink-0
       fill-neutral-200
       stroke-white
@@ -35,18 +33,24 @@
       dark:text-neutral-200;
   }
 
-  .active {
+  &.progression {
+    .label {
+      @apply p-1;
+    }
+  }
+
+  &.active {
     @apply text-neutral-900
       dark:text-white;
 
-    svg {
+    .progressionIcon {
       @apply fill-green-500;
     }
-  }
 
-  &:not(.progression) > .active {
-    @apply rounded-sm
-      bg-green-600
-      text-white;
+    &:not(.progression) .label {
+      @apply rounded-sm
+        bg-green-600
+        text-white;
+    }
   }
 }

packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx

@@ -2,7 +2,7 @@ import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 import type { FC } from 'react';
 
-import ActiveLink from '#ui/Common/BaseActiveLink';
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
 import type { FormattedMessage, LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
@@ -13,28 +13,31 @@ type SidebarItemProps = {
   link: string;
   as?: LinkLike;
   pathname?: string;
-  showProgressionIcon?: boolean;
+  showProgressionIcons?: boolean;
 };
 
 const SidebarItem: FC<SidebarItemProps> = ({
   label,
   link,
-  showProgressionIcon = false,
+  showProgressionIcons = false,
   ...props
 }) => (
-  <li
+  <BaseActiveLink
     className={classNames({
       [styles.item]: true,
-      [styles.progression]: showProgressionIcon,
+      [styles.progression]: showProgressionIcons,
     })}
+    href={link}
+    activeClassName={styles.active}
+    {...props}
   >
-    <ActiveLink href={link} activeClassName={styles.active} {...props}>
-      {showProgressionIcon && <ProgressionIcon />}
-      <span className={styles.label}>{label}</span>
+    {showProgressionIcons && (
+      <ProgressionIcon className={styles.progressionIcon} />
+    )}
+    <span className={styles.label}>{label}</span>
 
-      {link.startsWith('http') && <ArrowUpRightIcon className={styles.icon} />}
-    </ActiveLink>
-  </li>
+    {link.startsWith('http') && <ArrowUpRightIcon className={styles.icon} />}
+  </BaseActiveLink>
 );
 
 export default SidebarItem;

packages/ui-components/Containers/Sidebar/index.tsx

@@ -7,7 +7,9 @@ import type { LinkLike } from '#ui/types';
 import styles from './index.module.css';
 
 type SidebarProps = {
-  groups: Array<Omit<ComponentProps<typeof SidebarGroup>, 'as' | 'pathname'>>;
+  groups: Array<
+    Pick<ComponentProps<typeof SidebarGroup>, 'items' | 'groupName'>
+  >;
   pathname?: string;
   title: string;
   onSelect: (value: string) => void;
@@ -29,8 +31,7 @@ const SideBar: FC<SidebarProps> = ({
   }));
 
   const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
+    .flatMap(item => item.items)
     .find(item => pathname === item.value);
 
   return (