NavigationTree internal component implementation + SideNav reimplementation

apps/website/pages/_app.tsx

@@ -1,17 +1,20 @@
-import { ReactElement, ReactNode, useMemo, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react";
-import SidenavLogo from "@/common/sidenav/SidenavLogo";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
 import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
-import Link from "next/link";
 import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
 import createCache, { EmotionCache } from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { GroupItem, Item, Section } from "../../../packages/lib/src/base-menu/types";
+import { isGroupItem } from "../../../packages/lib/src/base-menu/utils";
+import SidenavLogo from "@/common/sidenav/SidenavLogo";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (_page: ReactElement) => ReactNode;
@@ -26,73 +29,110 @@ const clientSideEmotionCache = createCache({ key: "css", prepend: true });
 export default function App({ Component, pageProps, emotionCache = clientSideEmotionCache }: AppPropsWithLayout) {
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
+  const router = useRouter();
+  const pathname = usePathname();
   const [filter, setFilter] = useState("");
-  const { asPath: currentPath } = useRouter();
-  const filteredLinks = useMemo(() => {
-    const filtered: LinksSectionDetails[] = [];
-    LinksSections.map((section) => {
-      const sectionFilteredLinks = section?.links.filter((link) =>
-        link.label.toLowerCase().includes(filter.toLowerCase())
-      );
-      if (sectionFilteredLinks.length) {
-        filtered.push({ label: section.label, links: sectionFilteredLinks });
-      }
-    });
-    return filtered;
-  }, [filter]);
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const filterSections = (sections: Section[], query: string): Section[] => {
+    const q = query.trim().toLowerCase();
+    if (!q) return sections;
+
+    const filterItem = (item: Item | GroupItem): Item | GroupItem | null => {
+      const labelMatches = item.label.toLowerCase().includes(q);
+
+      if (!isGroupItem(item)) return labelMatches ? item : null;
+
+      const items = item.items.reduce<(Item | GroupItem)[]>((acc, child) => {
+        const filtered = filterItem(child);
+        if (filtered) acc.push(filtered);
+        return acc;
+      }, []);
 
-  const matchPaths = (linkPath: string) => {
-    const desiredPaths = [linkPath, `${linkPath}/code`];
-    const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
-    return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
+      return labelMatches || items.length ? { ...item, items } : null;
+    };
+
+    return sections.reduce<Section[]>((acc, section) => {
+      const items = section.items.reduce<(Item | GroupItem)[]>((acc, item) => {
+        const filtered = filterItem(item);
+        if (filtered) acc.push(filtered);
+        return acc;
+      }, []);
+      if (items.length) acc.push({ ...section, items });
+      return acc;
+    }, []);
   };
 
+  const mapLinksToGroupItems = (sections: LinksSectionDetails[]): Section[] => {
+    const matchPaths = (linkPath: string) => {
+      const desiredPaths = [linkPath, `${linkPath}/code`];
+      const pathToBeMatched = pathname?.split("#")[0]?.slice(0, -1);
+      return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
+    };
+
+    return sections.map((section) => ({
+      title: section.label,
+      items: section.links.map((link) => ({
+        label: link.label,
+        href: link.path,
+        selected: matchPaths(link.path),
+        ...(link.status && {
+          badge: link.status !== "stable" ? <StatusBadge hasTitle status={link.status} /> : undefined,
+        }),
+        renderItem: ({ children }: { children: ReactNode }) => (
+          <Link key={link.path} href={link.path} passHref legacyBehavior>
+            {children}
+          </Link>
+        ),
+      })),
+    }));
+  };
+
+  useEffect(() => {
+    const paths = [...new Set(LinksSections.flatMap((s) => s.links.map((l) => l.path)))];
+    const prefetchPaths = async () => {
+      for (const path of paths) {
+        await router.prefetch(path);
+      }
+    };
+    void prefetchPaths();
+  }, []);
+
+  // TODO: ADD NEW CATEGORIZATION
+
+  const filteredSections = useMemo(() => {
+    const sections = mapLinksToGroupItems(LinksSections);
+    return filterSections(sections, filter);
+  }, [filter]);
+
   return (
     <CacheProvider value={emotionCache}>
       <Head>
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
       <DxcApplicationLayout
-        visibilityToggleLabel="Menu"
         sidenav={
-          <DxcApplicationLayout.SideNav title={<SidenavLogo />}>
-            <DxcApplicationLayout.SideNav.Section>
-              <DxcTextInput
-                placeholder="Search docs"
-                value={filter}
-                onChange={({ value }: { value: string }) => {
-                  setFilter(value);
-                }}
-                size="fillParent"
-                clearable
-                margin={{
-                  top: "large",
-                  bottom: "large",
-                  right: "medium",
-                  left: "medium",
-                }}
-              />
-            </DxcApplicationLayout.SideNav.Section>
-            {filteredLinks?.map(({ label, links }) => (
-              <DxcApplicationLayout.SideNav.Section key={label}>
-                <DxcApplicationLayout.SideNav.Group title={label}>
-                  {links.map(({ label, path, status }) => (
-                    <Link key={`${label}-${path}`} href={path} passHref legacyBehavior>
-                      <DxcApplicationLayout.SideNav.Link selected={matchPaths(path)}>
-                        {label}
-                        {status && status !== "stable" && <StatusBadge hasTitle status={status} />}
-                      </DxcApplicationLayout.SideNav.Link>
-                    </Link>
-                  ))}
-                </DxcApplicationLayout.SideNav.Group>
-              </DxcApplicationLayout.SideNav.Section>
-            ))}
-            <DxcApplicationLayout.SideNav.Section>
-              <DxcApplicationLayout.SideNav.Link href="https://github.com/dxc-technology/halstack-react" newWindow>
-                GitHub
-              </DxcApplicationLayout.SideNav.Link>
-            </DxcApplicationLayout.SideNav.Section>
-          </DxcApplicationLayout.SideNav>
+          <DxcApplicationLayout.Sidenav
+            navItems={filteredSections}
+            branding={<SidenavLogo expanded={isExpanded} />}
+            topContent={
+              isExpanded && (
+                <DxcTextInput
+                  placeholder="Search docs"
+                  value={filter}
+                  onChange={({ value }: { value: string }) => {
+                    setFilter(value);
+                  }}
+                  size="fillParent"
+                  clearable
+                />
+              )
+            }
+            expanded={isExpanded}
+            onExpandedChange={() => {
+              setIsExpanded((currentlyExpanded) => !currentlyExpanded);
+            }}
+          />
         }
       >
         <DxcApplicationLayout.Main>

apps/website/pages/components/sidenav/index.tsx

@@ -1,17 +1,36 @@
+// import Head from "next/head";
+// import type { ReactElement } from "react";
+// import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout";
+// import SidenavOverviewPage from "screens/components/sidenav/overview/SidenavOverviewPage";
+
+// const Index = () => (
+//   <>
+//     <Head>
+//       <title>Sidenav — Halstack Design System</title>
+//     </Head>
+//     {/* <SidenavOverviewPage /> */}
+//     <SidenavOverviewPage />
+//   </>
+// );
+
+// Index.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
+
+// export default Index;
+
 import Head from "next/head";
 import type { ReactElement } from "react";
 import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout";
-import SidenavOverviewPage from "screens/components/sidenav/overview/SidenavOverviewPage";
+import SidenavCodePage from "screens/components/sidenav/code/SidenavCodePage";
 
-const Index = () => (
+const Code = () => (
   <>
     <Head>
-      <title>Sidenav — Halstack Design System</title>
+      <title>Sidenav code — Halstack Design System</title>
     </Head>
-    <SidenavOverviewPage />
+    <SidenavCodePage />
   </>
 );
 
-Index.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
+Code.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
 
-export default Index;
+export default Code;

apps/website/screens/common/StatusBadge.tsx

@@ -4,6 +4,7 @@ import { ComponentStatus } from "./pagesList";
 type StatusBadgeProps = {
   hasTitle?: boolean;
   status: ComponentStatus | "required";
+  // reduced?: boolean;
 };
 
 const getBadgeColor = (status: StatusBadgeProps["status"]) => {
@@ -40,13 +41,36 @@ const getBadgeTitle = (status: StatusBadgeProps["status"]) => {
   }
 };
 
-const StatusBadge = ({ hasTitle = false, status }: StatusBadgeProps) => (
-  <DxcBadge
-    label={status[0]?.toUpperCase() + status.slice(1)}
-    color={getBadgeColor(status)}
-    title={hasTitle ? getBadgeTitle(status) : undefined}
-    size="small"
-  />
-);
+// TODO: enable icon when the status badge supports reduced version
+// const getBadgeIcon = (status: StatusBadgeProps["status"]) => {
+//   switch (status) {
+//     case "required":
+//       return "warning_amber";
+//     case "experimental":
+//       return "science";
+//     case "new":
+//       return "new_releases";
+//     case "stable":
+//       return "check_circle";
+//     case "legacy":
+//       return "history";
+//     case "deprecated":
+//       return "highlight_off";
+//     default:
+//       return "";
+//   }
+// };
+
+const StatusBadge = ({ hasTitle = false, status }: StatusBadgeProps) => {
+  return (
+    <DxcBadge
+      label={status[0]?.toUpperCase() + status.slice(1)}
+      color={getBadgeColor(status)}
+      title={hasTitle ? getBadgeTitle(status) : undefined}
+      size="small"
+      // icon={reduced ? getBadgeIcon(status) : undefined}
+    />
+  );
+};
 
 export default StatusBadge;

apps/website/screens/common/sidenav/SidenavLogo.tsx

@@ -22,11 +22,11 @@ const Subtitle = styled.div`
   font-family: var(--typography-font-family);
 `;
 
-const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {
+const SidenavLogo = ({ subtitle = "Design System", expanded }: { subtitle?: string; expanded: boolean }) => {
   const pathVersion = process.env.NEXT_PUBLIC_SITE_VERSION;
   const isDev = process.env.NODE_ENV === "development";
 
-  return (
+  return expanded ? (
     <DxcFlex alignItems="center">
       <LogoContainer>
         <DxcFlex alignItems="center" gap="var(--spacing-gap-s)">
@@ -47,6 +47,14 @@ const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {
         size="small"
       />
     </DxcFlex>
+  ) : (
+    <Image
+      alt="Halstack logo"
+      height={32}
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      src={halstackLogo}
+      width={32}
+    />
   );
 };
 

apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx

@@ -75,14 +75,6 @@ const ApplicationLayoutPropsTable = () => (
         </td>
         <td>-</td>
       </tr>
-      <tr>
-        <td>visibilityToggleLabel</td>
-        <td>
-          <TableCode>string</TableCode>
-        </td>
-        <td>Text to be placed next to the hamburger button that toggles the visibility of the sidenav.</td>
-        <td>-</td>
-      </tr>
     </tbody>
   </DxcTable>
 );
@@ -100,16 +92,6 @@ const sections = [
       </DxcParagraph>
     ),
   },
-  {
-    title: "DxcApplicationLayout.useResponsiveSidenavVisibility",
-    content: (
-      <DxcParagraph>
-        Custom hook that returns a function to manually change the visibility of the sidenav in responsive mode. This
-        can be very useful for cases where a custom sidenav is being used and some of its inner elements can close it
-        (for example, a navigation link).
-      </DxcParagraph>
-    ),
-  },
   {
     title: "Examples",
     subSections: [

apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx

@@ -12,7 +12,7 @@ const itemTypeString = `{
     icon?: string | SVG;
     label: string;
     onSelect?: () => void;
-    selectedByDefault?: boolean;
+    selected?: boolean;
 }`;
 
 const groupItemTypeString = `{
@@ -80,6 +80,7 @@ const sections = [
         title: "Action menu",
         content: <Example example={actionMenu} defaultIsVisible />,
       },
+      // TODO: We should remove this example as it is not the intended usage right? (Navigation is handled inside ApplicationLayout)
       {
         title: "Navigation menu",
         content: <Example example={navigationMenu} defaultIsVisible />,

apps/website/screens/components/sidenav/SidenavPageLayout.tsx

@@ -7,10 +7,11 @@ import { ReactNode } from "react";
 
 const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Overview", path: "/components/sidenav" },
-    { label: "Code", path: "/components/sidenav/code" },
+    // { label: "Overview", path: "/components/sidenav" },
+    // { label: "Code", path: "/components/sidenav/code" },
+    { label: "Code", path: "/components/sidenav" },
   ];
-
+  // TODO: UPDATE DESCRIPTION WHEN OVERVIEW IS ADDED
   return (
     <DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
       <PageHeading>