From 447c9a78427a1d8ee949e1b8a6c9054e5b2e6401 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Thu, 20 Nov 2025 10:55:19 +0100 Subject: [PATCH 1/4] Added overview doc to sidenav --- .../website/pages/components/sidenav/code.tsx | 17 + .../pages/components/sidenav/index.tsx | 31 +- .../components/sidenav/SidenavPageLayout.tsx | 11 +- .../sidenav/code/SidenavCodePage.tsx | 3 +- .../sidenav/overview/SidenavOverviewPage.tsx | 388 +++++++++++++----- .../overview/images/sidenav_anatomy.png | Bin 48620 -> 130214 bytes .../overview/images/sidenav_bottomcontent.png | Bin 0 -> 67888 bytes .../overview/images/sidenav_branding.png | Bin 0 -> 146559 bytes .../overview/images/sidenav_mainnav.png | Bin 0 -> 121953 bytes .../sidenav/overview/images/sidenav_modes.png | Bin 0 -> 85749 bytes .../overview/images/sidenav_responsive.png | Bin 2625 -> 0 bytes 11 files changed, 311 insertions(+), 139 deletions(-) create mode 100644 apps/website/pages/components/sidenav/code.tsx create mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_bottomcontent.png create mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_branding.png create mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_mainnav.png create mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_modes.png delete mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png diff --git a/apps/website/pages/components/sidenav/code.tsx b/apps/website/pages/components/sidenav/code.tsx new file mode 100644 index 000000000..9bb8d2993 --- /dev/null +++ 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 = () => ( + <> + + Sidenav code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/sidenav/index.tsx b/apps/website/pages/components/sidenav/index.tsx index 8e099c450..50ec17a20 100644 --- 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 = () => ( -// <> -// -// Sidenav — Halstack Design System -// -// {/* */} -// -// -// ); - -// Index.getLayout = (page: ReactElement) => {page}; - -// 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 = () => ( <> - Sidenav code — Halstack Design System + Sidenav — Halstack Design System - + ); -Code.getLayout = (page: ReactElement) => {page}; +Index.getLayout = (page: ReactElement) => {page}; -export default Code; +export default Index; diff --git a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx index fb5616270..7bf20138c 100644 --- 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 }) => { - 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. - 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{" "} DxcApplicationLayout {" "} diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 1cb2135c1..5ea9cbaa2 100644 --- 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: (