dxc-technology
diff --git a/‎apps/website/pages/components/sidenav/code.tsx‎
Lines changed: 17 additions & 0 deletions b/‎apps/website/pages/components/sidenav/code.tsx‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎apps/website/pages/components/sidenav/index.tsx‎
Lines changed: 10 additions & 14 deletions b/‎apps/website/pages/components/sidenav/index.tsx‎
Lines changed: 10 additions & 14 deletions
diff --git a/‎apps/website/pages/components/sidenav/specifications.tsx‎
Lines changed: 0 additions & 21 deletions b/‎apps/website/pages/components/sidenav/specifications.tsx‎
Lines changed: 0 additions & 21 deletions
diff --git a/‎apps/website/pages/components/sidenav/usage.tsx‎
Lines changed: 0 additions & 21 deletions b/‎apps/website/pages/components/sidenav/usage.tsx‎
Lines changed: 0 additions & 21 deletions
diff --git a/‎apps/website/screens/components/sidenav/SidenavPageLayout.tsx‎
Lines changed: 3 additions & 6 deletions b/‎apps/website/screens/components/sidenav/SidenavPageLayout.tsx‎
Lines changed: 3 additions & 6 deletions
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout";
+import SidenavCodePage from "screens/components/sidenav/code/SidenavCodePage";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Sidenav code — Halstack Design System</title>
+    </Head>
+    <SidenavCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
+
+export default Code;
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout";
-import SidenavCodePage from "screens/components/sidenav/code/SidenavCodePage";
+import SidenavOverviewPage from "screens/components/sidenav/overview/SidenavOverviewPage";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Sidenav — Halstack Design System</title>
-      </Head>
-      <SidenavCodePage></SidenavCodePage>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Sidenav — Halstack Design System</title>
+    </Head>
+    <SidenavOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <SidenavPageLayout>{page}</SidenavPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
 
 export default Index;
@@ -7,9 +7,8 @@ import { ReactNode } from "react";
 
 const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/sidenav" },
-    { label: "Usage", path: "/components/sidenav/usage" },
-    { label: "Specifications", path: "/components/sidenav/specifications" },
+    { label: "Overview", path: "/components/sidenav" },
+    { label: "Code", path: "/components/sidenav/code" },
   ];
 
   return (
@@ -18,9 +17,7 @@ const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
           <ComponentHeading name="Sidenav" />
           <DxcParagraph>
-            The sidenav component is part of the layout of the application and it makes easier to divide the main screen
-            into two different areas. The main area will have all the content and the sidenav as a secondary element as
-            an index, including links to different resources on the web page.
+            The sidenav component provides a vertical navigation structure placed on the left side of the interface.
           </DxcParagraph>
           <DxcParagraph>
             The sidenav is part of the application layout, so it can only be used inside of it. Please check the{" "}