dxc-technology · PelayoFelgueroso · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
@@ -100,13 +100,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
       <DxcApplicationLayout
-        header={
-          <DxcApplicationLayout.Header logo={{ src: dxcLogo, alt: "DXC Technology" }} appTitle="Halstack react" />
-        }
+        header={<DxcApplicationLayout.Header logo={{ src: dxcLogo, alt: "DXC Technology" }} />}
         sidenav={
           <DxcApplicationLayout.Sidenav
             navItems={filteredSections}
-            branding={<SidenavLogo expanded={isExpanded} />}
+            branding={isExpanded && <SidenavLogo />}
             topContent={
               isExpanded && (
                 <DxcTextInput

diff --git a/apps/website/pages/components/sidenav/code.tsx b/apps/website/pages/components/sidenav/code.tsx
@@ -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;
diff --git a/apps/website/pages/components/sidenav/index.tsx b/apps/website/pages/components/sidenav/index.tsx
@@ -1,36 +1,17 @@
-// 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 SidenavCodePage from "screens/components/sidenav/code/SidenavCodePage";
+import SidenavOverviewPage from "screens/components/sidenav/overview/SidenavOverviewPage";
 
-const Code = () => (
+const Index = () => (
   <>
     <Head>
-      <title>Sidenav code — Halstack Design System</title>
+      <title>Sidenav — Halstack Design System</title>
     </Head>
-    <SidenavCodePage />
+    <SidenavOverviewPage />
   </>
 );
 
-Code.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
+Index.getLayout = (page: ReactElement) => <SidenavPageLayout>{page}</SidenavPageLayout>;
 
-export default Code;
+export default Index;
diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
@@ -1,60 +1,28 @@
 import styled from "@emotion/styled";
-import Image from "@/common/Image";
 import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-import halstackLogo from "@/common/images/halstack_logo.svg";
 
-const LogoContainer = styled.div`
+const SidenavTitle = styled.div`
   display: flex;
-  flex-direction: column;
-  margin: var(--spacing-padding-none) var(--spacing-padding-l);
-`;
-
-const Title = styled.div`
-  color: var(--color-fg-primary-strong);
-  font-size: var(--typography-title-l);
-  font-family: var(--typography-font-family);
-`;
-
-const Subtitle = styled.div`
-  color: var(--color-fg-neutral-strongest);
-  font-size: var(--typography-title-m);
-  margin-left: var(--spacing-padding-s);
+  align-items: center;
   font-family: var(--typography-font-family);
+  font-size: var(--typography-ttle-m);
+  color: var(--color-fg-neutral-dark);
+  font-weight: var(--typography-title-bold);
 `;
 
-const SidenavLogo = ({ subtitle = "Design System", expanded }: { subtitle?: string; expanded: boolean }) => {
+const SidenavLogo = () => {
   const pathVersion = process.env.NEXT_PUBLIC_SITE_VERSION;
   const isDev = process.env.NODE_ENV === "development";
 
-  return expanded ? (
-    <DxcFlex alignItems="center">
-      <LogoContainer>
-        <DxcFlex alignItems="center" gap="var(--spacing-gap-s)">
-          <Image
-            alt="Halstack logo"
-            height={24}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            src={halstackLogo}
-            width={24}
-          />
-          <Title>Halstack</Title>
-        </DxcFlex>
-        <Subtitle>{subtitle}</Subtitle>
-      </LogoContainer>
+  return (
+    <DxcFlex alignItems="center" gap="var(--spacing-gap-xs)">
+      <SidenavTitle>Halstack Design System</SidenavTitle>
       <DxcBadge
         color="primary"
         label={isDev ? "dev" : pathVersion === "next" ? pathVersion : `v${pathVersion}`}
         size="small"
       />
     </DxcFlex>
-  ) : (
-    <Image
-      alt="Halstack logo"
-      height={32}
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      src={halstackLogo}
-      width={32}
-    />
   );
 };
 

diff --git a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
@@ -7,9 +7,8 @@ import { ReactNode } from "react";
 
 const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    // { label: "Overview", path: "/components/sidenav" },
-    // { label: "Code", path: "/components/sidenav/code" },
-    { label: "Code", path: "/components/sidenav" },
+    { label: "Overview", path: "/components/sidenav" },
+    { label: "Code", path: "/components/sidenav/code" },
   ];
   // TODO: UPDATE DESCRIPTION WHEN OVERVIEW IS ADDED
   return (
@@ -18,10 +17,12 @@ const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
           <ComponentHeading name="Sidenav" />
           <DxcParagraph>
-            The sidenav component provides a vertical navigation structure placed on the left side of the interface.
+            The sidenav component provides a vertical navigation structure placed on the left side of the interface. It
+            provides global access to navigation, branding, and user actions, ensuring consistency and orientation
+            across products and applications.
           </DxcParagraph>
           <DxcParagraph>
-            The sidenav is part of the application layout, so it can only be used inside of it. Please check the{" "}
+            It is part of the application layout, so it can only be used inside of it. Please check the{" "}
             <Link href="/components/application-layout" passHref legacyBehavior>
               <DxcLink>DxcApplicationLayout</DxcLink>
             </Link>{" "}

diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
@@ -153,7 +153,7 @@ const sections = [
         title: "Application layout with sidenav",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/with-sidenav-xce9s2?fontsize=14&hidenavigation=1&theme=dark"
+            src="https://codesandbox.io/embed/ysg7l5?view=editor+%2B+preview&hidenavigation=1"
             style={{
               width: "100%",
               minHeight: "500px",
@@ -162,7 +162,6 @@ const sections = [
               overflow: "hidden",
             }}
             title="Application layout with sidenav"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
             sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
           />
         ),