From 1e011186dc06cd9f3f57b1e12045e2d0e449d788 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 28 May 2025 16:46:41 +0200 Subject: [PATCH 1/6] Updated implementation with tokens --- packages/lib/src/sidenav/Sidenav.stories.tsx | 2 +- packages/lib/src/sidenav/Sidenav.tsx | 330 ++++++++----------- 2 files changed, 141 insertions(+), 191 deletions(-) diff --git a/packages/lib/src/sidenav/Sidenav.stories.tsx b/packages/lib/src/sidenav/Sidenav.stories.tsx index d4eb078d78..83f9beb2e3 100644 --- a/packages/lib/src/sidenav/Sidenav.stories.tsx +++ b/packages/lib/src/sidenav/Sidenav.stories.tsx @@ -57,7 +57,7 @@ const SideNav = () => (

- Single Link + Single Link Group Link Group Link diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx index 87556a7047..c07bb50ff0 100644 --- a/packages/lib/src/sidenav/Sidenav.tsx +++ b/packages/lib/src/sidenav/Sidenav.tsx @@ -1,11 +1,9 @@ import { forwardRef, MouseEvent, useContext, useEffect, useState } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import DxcBleed from "../bleed/Bleed"; -import CoreTokens from "../common/coreTokens"; import { responsiveSizes } from "../common/variables"; import DxcFlex from "../flex/Flex"; import DxcIcon from "../icon/Icon"; -import HalstackContext from "../HalstackContext"; import { GroupContext, GroupContextProvider, useResponsiveSidenavVisibility } from "./SidenavContext"; import SidenavPropsType, { SidenavGroupPropsType, @@ -13,105 +11,8 @@ import SidenavPropsType, { SidenavSectionPropsType, SidenavTitlePropsType, } from "./types"; - -const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => { - const colorsTheme = useContext(HalstackContext); - - return ( - - - {title} - - {children} - - - - ); -}; - -const Title = ({ children }: SidenavTitlePropsType): JSX.Element => ( - - {children} - -); - -const Section = ({ children }: SidenavSectionPropsType): JSX.Element => ( - <> - - {children} - - - -); - -const Group = ({ title, collapsable = false, icon, children }: SidenavGroupPropsType): JSX.Element => { - const [collapsed, setCollapsed] = useState(false); - const [isSelected, changeIsSelected] = useState(false); - - return ( - - - {collapsable && title ? ( - setCollapsed(!collapsed)} - selectedGroup={collapsed && isSelected} - > - - {typeof icon === "string" ? : icon} - {title} - - - - ) : ( - title && ( - - {typeof icon === "string" ? : icon} - {title} - - ) - )} - {!collapsed && children} - - - ); -}; - -const Link = forwardRef( - ( - { href, newWindow = false, selected = false, icon, onClick, tabIndex = 0, children, ...otherProps }, - ref - ): JSX.Element => { - const changeIsGroupSelected = useContext(GroupContext); - const setIsSidenavVisibleResponsive = useResponsiveSidenavVisibility(); - const handleClick = ($event: MouseEvent) => { - onClick?.($event); - setIsSidenavVisibleResponsive?.(false); - }; - - useEffect(() => { - changeIsGroupSelected?.((isGroupSelected) => (!isGroupSelected ? selected : isGroupSelected)); - }, [selected, changeIsGroupSelected]); - - return ( - - - {typeof icon === "string" ? : icon} - {children} - - {newWindow && } - - ); - } -); +import { scrollbarStyles } from "../styles/scroll"; +import DxcDivider from "../divider/Divider"; const SidenavContainer = styled.div` box-sizing: border-box; @@ -121,68 +22,39 @@ const SidenavContainer = styled.div` @media (max-width: ${responsiveSizes.large}rem) { width: 100vw; } - padding: 2rem 1rem; - background-color: ${(props) => props.theme.backgroundColor}; + padding: var(--spacing-padding-xl) var(--spacing-padding-none); + background-color: var(--color-bg-neutral-light); overflow-y: auto; overflow-x: hidden; - ::-webkit-scrollbar { - width: 2px; - } - ::-webkit-scrollbar-track { - background-color: ${(props) => props.theme.scrollBarTrackColor}; - border-radius: 3px; - } - ::-webkit-scrollbar-thumb { - background-color: ${(props) => props.theme.scrollBarThumbColor}; - border-radius: 3px; - } + ${scrollbarStyles} `; const SidenavTitle = styled.div` display: flex; align-items: center; - padding: 0.5rem 1.2rem; - font-family: ${(props) => props.theme.titleFontFamily}; - font-style: ${(props) => props.theme.titleFontStyle}; - font-weight: ${(props) => props.theme.titleFontWeight}; - font-size: ${(props) => props.theme.titleFontSize}; - color: ${(props) => props.theme.titleFontColor}; - letter-spacing: ${(props) => props.theme.titleFontLetterSpacing}; - text-transform: ${(props) => props.theme.titleFontTextTransform}; -`; - -const Divider = styled.div` - width: 100%; - height: 1px; - background-color: ${CoreTokens.color_grey_400}; - - &:last-child { - display: none; - } -`; - -const SidenavGroup = styled.div` - a { - padding: 0.5rem 1.2rem 0.5rem 2.25rem; - } + padding: var(--spacing-padding-xs) var(--spacing-padding-m); + font-family: var(--typography-font-family); + font-size: var(--typography-label-xl); + color: var(--color-fg-neutral-stronger); + font-weight: var(--typography-label-semibold); `; const SidenavGroupTitle = styled.span` box-sizing: border-box; display: flex; align-items: center; - gap: 0.5rem; - padding: 0.5rem 1.2rem; - font-family: ${(props) => props.theme.groupTitleFontFamily}; - font-style: ${(props) => props.theme.groupTitleFontStyle}; - font-weight: ${(props) => props.theme.groupTitleFontWeight}; - font-size: ${(props) => props.theme.groupTitleFontSize}; + width: 100%; + gap: var(--spacing-gap-s); + padding: var(--spacing-padding-xs) var(--spacing-padding-ml); + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-semibold); span::before { - font-size: 16px; + font-size: var(--height-xxs); } svg { - height: 16px; + height: var(--height-xxs); width: 16px; } `; @@ -194,37 +66,32 @@ const SidenavGroupTitleButton = styled.button<{ selectedGroup: boolean }>` align-items: center; justify-content: space-between; width: 100%; - padding: 0.5rem 1.2rem; - font-family: ${(props) => props.theme.groupTitleFontFamily}; - font-style: ${(props) => props.theme.groupTitleFontStyle}; - font-weight: ${(props) => props.theme.groupTitleFontWeight}; - font-size: ${(props) => props.theme.groupTitleFontSize}; + gap: var(--spacing-gap-s); + padding: var(--spacing-padding-xs) var(--spacing-padding-ml); + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-semibold); cursor: pointer; ${(props) => props.selectedGroup - ? `color: ${props.theme.groupTitleSelectedFontColor}; background-color: ${props.theme.groupTitleSelectedBackgroundColor};` - : `color: ${props.theme.groupTitleFontColor}; background-color: transparent;`} + ? `color: var(--color-fg-neutral-bright); background-color: var(--color-bg-neutral-stronger);` + : `color: var(--color-fg-neutral-stronger); background-color: transparent;`} &:focus, &:focus-visible { - outline: 2px solid ${(props) => props.theme.linkFocusColor}; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: -2px; } - &:hover { - ${(props) => - props.selectedGroup - ? `color: ${props.theme.groupTitleSelectedHoverFontColor}; background-color: ${props.theme.groupTitleSelectedHoverBackgroundColor};` - : `color: ${props.theme.groupTitleFontColor}; background-color: ${props.theme.groupTitleHoverBackgroundColor};`} - } + &:hover, &:active { - color: #fff; - background-color: ${(props) => (props.selectedGroup ? "#333" : props.theme.groupTitleActiveBackgroundColor)}; + background-color: ${(props) => + props.selectedGroup ? "var(--color-bg-neutral-strongest)" : "var(--color-bg-neutral-medium)"}; } span::before { - font-size: 16px; + font-size: var(--height-xxs); } svg { - height: 16px; + height: var(--height-xxs); width: 16px; } `; @@ -233,48 +100,131 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>` display: flex; align-items: center; justify-content: space-between; - gap: 0.5rem; - padding: 0.5rem 1.2rem; - box-shadow: 0 0 0 2px transparent; - font-family: ${(props) => props.theme.linkFontFamily}; - font-style: ${(props) => props.theme.linkFontStyle}; - font-weight: ${(props) => props.theme.linkFontWeight}; - font-size: ${(props) => props.theme.linkFontSize}; - letter-spacing: ${(props) => props.theme.linkFontLetterSpacing}; - text-transform: ${(props) => props.theme.linkFontTextTransform}; - text-decoration: ${(props) => props.theme.linkTextDecoration}; + width: 100%; + gap: var(--spacing-gap-s); + padding: var(--spacing-padding-xs) var(--spacing-padding-ml); + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + text-decoration: none; cursor: pointer; ${(props) => props.selected - ? `color: ${props.theme.linkSelectedFontColor}; background-color: ${props.theme.linkSelectedBackgroundColor};` - : `color: ${props.theme.linkFontColor}; background-color: transparent;`} + ? `color: var(--color-fg-neutral-bright); background-color: var(--color-bg-neutral-stronger);` + : `color: var(--color-fg-neutral-stronger); background-color: transparent;`} &:focus, &:focus-visible { - outline: 2px solid ${(props) => props.theme.linkFocusColor}; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: -2px; } - &:hover { - ${(props) => - props.selected - ? `color: ${props.theme.linkSelectedHoverFontColor}; background-color: ${props.theme.linkSelectedHoverBackgroundColor};` - : `color: ${props.theme.linkFontColor}; background-color: ${props.theme.linkHoverBackgroundColor};`} - } + &:hover, &:active { - color: #fff; - background-color: ${(props) => (props.selected ? "#333" : "#4d4d4d")}; - outline: 2px solid #0095ff; - outline-offset: -2px; + background-color: ${(props) => + props.selected ? "var(--color-bg-neutral-strongest)" : "var(--color-bg-neutral-medium)"}; } span::before { - font-size: 16px; + font-size: var(--height-xxs); } svg { - height: 16px; + height: var(--height-xxs); width: 16px; } `; +const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => { + return ( + + {title} + + {children} + + + ); +}; + +const Title = ({ children }: SidenavTitlePropsType): JSX.Element => ( + + {children} + +); + +const Section = ({ children }: SidenavSectionPropsType): JSX.Element => ( + <> + + {children} + + + +); + +const Group = ({ title, collapsable = false, icon, children }: SidenavGroupPropsType): JSX.Element => { + const [collapsed, setCollapsed] = useState(false); + const [isSelected, changeIsSelected] = useState(false); + + return ( + + {collapsable && title ? ( + setCollapsed(!collapsed)} + selectedGroup={collapsed && isSelected} + > + + {typeof icon === "string" ? : icon} + {title} + + + + ) : ( + title && ( + + {typeof icon === "string" ? : icon} + {title} + + ) + )} + {!collapsed && children} + + ); +}; + +const Link = forwardRef( + ( + { href, newWindow = false, selected = false, icon, onClick, tabIndex = 0, children, ...otherProps }, + ref + ): JSX.Element => { + const changeIsGroupSelected = useContext(GroupContext); + const setIsSidenavVisibleResponsive = useResponsiveSidenavVisibility(); + const handleClick = ($event: MouseEvent) => { + onClick?.($event); + setIsSidenavVisibleResponsive?.(false); + }; + + useEffect(() => { + changeIsGroupSelected?.((isGroupSelected) => (!isGroupSelected ? selected : isGroupSelected)); + }, [selected, changeIsGroupSelected]); + + return ( + + + {typeof icon === "string" ? : icon} + {children} + + {newWindow && } + + ); + } +); + DxcSidenav.Section = Section; DxcSidenav.Group = Group; DxcSidenav.Link = Link; From 7df808b143c448f49b2b9d0c1742bd2636eac5e5 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 28 May 2025 17:08:43 +0200 Subject: [PATCH 2/6] Removed no longer needed Bleeds --- packages/lib/src/sidenav/Sidenav.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx index c07bb50ff0..56a57d1b1a 100644 --- a/packages/lib/src/sidenav/Sidenav.tsx +++ b/packages/lib/src/sidenav/Sidenav.tsx @@ -66,7 +66,6 @@ const SidenavGroupTitleButton = styled.button<{ selectedGroup: boolean }>` align-items: center; justify-content: space-between; width: 100%; - gap: var(--spacing-gap-s); padding: var(--spacing-padding-xs) var(--spacing-padding-ml); font-family: var(--typography-font-family); font-size: var(--typography-label-m); @@ -101,7 +100,6 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>` align-items: center; justify-content: space-between; width: 100%; - gap: var(--spacing-gap-s); padding: var(--spacing-padding-xs) var(--spacing-padding-ml); font-family: var(--typography-font-family); font-size: var(--typography-label-m); @@ -143,17 +141,11 @@ const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => { ); }; -const Title = ({ children }: SidenavTitlePropsType): JSX.Element => ( - - {children} - -); +const Title = ({ children }: SidenavTitlePropsType): JSX.Element => {children}; const Section = ({ children }: SidenavSectionPropsType): JSX.Element => ( <> - - {children} - + {children} ); @@ -170,7 +162,7 @@ const Group = ({ title, collapsable = false, icon, children }: SidenavGroupProps onClick={() => setCollapsed(!collapsed)} selectedGroup={collapsed && isSelected} > - + {typeof icon === "string" ? : icon} {title} @@ -215,7 +207,7 @@ const Link = forwardRef( onClick={handleClick} {...otherProps} > - + {typeof icon === "string" ? : icon} {children} From dc925440d28c0122efe7af64481a710739bc74c4 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 29 May 2025 08:45:22 +0200 Subject: [PATCH 3/6] Fixed styles --- packages/lib/src/sidenav/Sidenav.stories.tsx | 2 +- packages/lib/src/sidenav/Sidenav.tsx | 52 +++++++++++--------- 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/packages/lib/src/sidenav/Sidenav.stories.tsx b/packages/lib/src/sidenav/Sidenav.stories.tsx index 83f9beb2e3..d4eb078d78 100644 --- a/packages/lib/src/sidenav/Sidenav.stories.tsx +++ b/packages/lib/src/sidenav/Sidenav.stories.tsx @@ -57,7 +57,7 @@ const SideNav = () => (

- Single Link + Single Link Group Link Group Link diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx index 56a57d1b1a..7610d3a8b9 100644 --- a/packages/lib/src/sidenav/Sidenav.tsx +++ b/packages/lib/src/sidenav/Sidenav.tsx @@ -40,11 +40,16 @@ const SidenavTitle = styled.div` font-weight: var(--typography-label-semibold); `; +const SidenavGroup = styled.div` + a { + padding: var(--spacing-padding-xs) var(--spacing-padding-xxl); + } +`; + const SidenavGroupTitle = styled.span` box-sizing: border-box; display: flex; align-items: center; - width: 100%; gap: var(--spacing-gap-s); padding: var(--spacing-padding-xs) var(--spacing-padding-ml); font-family: var(--typography-font-family); @@ -99,7 +104,6 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>` display: flex; align-items: center; justify-content: space-between; - width: 100%; padding: var(--spacing-padding-xs) var(--spacing-padding-ml); font-family: var(--typography-font-family); font-size: var(--typography-label-m); @@ -156,27 +160,29 @@ const Group = ({ title, collapsable = false, icon, children }: SidenavGroupProps return ( - {collapsable && title ? ( - setCollapsed(!collapsed)} - selectedGroup={collapsed && isSelected} - > - - {typeof icon === "string" ? : icon} - {title} - - - - ) : ( - title && ( - - {typeof icon === "string" ? : icon} - {title} - - ) - )} - {!collapsed && children} + + {collapsable && title ? ( + setCollapsed(!collapsed)} + selectedGroup={collapsed && isSelected} + > + + {typeof icon === "string" ? : icon} + {title} + + + + ) : ( + title && ( + + {typeof icon === "string" ? : icon} + {title} + + ) + )} + {!collapsed && children} + ); }; From 0cd711069d9a7c613bc18065c4fc481c19059949 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 29 May 2025 12:56:18 +0200 Subject: [PATCH 4/6] Added documentation for Sidenav --- .../website/pages/components/sidenav/code.tsx | 17 + .../pages/components/sidenav/index.tsx | 24 +- .../components/sidenav/specifications.tsx | 21 - .../pages/components/sidenav/usage.tsx | 21 - .../components/sidenav/SidenavPageLayout.tsx | 9 +- .../sidenav/code/SidenavCodePage.tsx | 456 ++++++++--------- .../sidenav/overview/SidenavOverviewPage.tsx | 200 ++++++++ .../overview/images/sidenav_anatomy.png | Bin 0 -> 48620 bytes .../overview/images/sidenav_responsive.png | Bin 0 -> 7981 bytes .../sidenav/specs/SidenavSpecsPage.tsx | 460 ------------------ .../sidenav/specs/images/sidenav_anatomy.png | Bin 17193 -> 0 bytes .../sidenav/specs/images/sidenav_specs.png | Bin 24824 -> 0 bytes .../sidenav/usage/SidenavUsagePage.tsx | 59 --- .../usage/images/sidenav_responsive.png | Bin 3467 -> 0 bytes 14 files changed, 466 insertions(+), 801 deletions(-) create mode 100644 apps/website/pages/components/sidenav/code.tsx delete mode 100644 apps/website/pages/components/sidenav/specifications.tsx delete mode 100644 apps/website/pages/components/sidenav/usage.tsx create mode 100644 apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx create mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png create mode 100644 apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png delete mode 100644 apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx delete mode 100644 apps/website/screens/components/sidenav/specs/images/sidenav_anatomy.png delete mode 100644 apps/website/screens/components/sidenav/specs/images/sidenav_specs.png delete mode 100644 apps/website/screens/components/sidenav/usage/SidenavUsagePage.tsx delete mode 100644 apps/website/screens/components/sidenav/usage/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 0000000000..9bb8d2993a --- /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 6a3bcca9bc..50ec17a206 100644 --- a/apps/website/pages/components/sidenav/index.tsx +++ b/apps/website/pages/components/sidenav/index.tsx @@ -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 ( - <> - - Sidenav — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Sidenav — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/sidenav/specifications.tsx b/apps/website/pages/components/sidenav/specifications.tsx deleted file mode 100644 index 14362eefee..0000000000 --- a/apps/website/pages/components/sidenav/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout"; -import SidenavSpecsPage from "screens/components/sidenav/specs/SidenavSpecsPage"; - -const Specifications = () => { - return ( - <> - - Sidenav Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/sidenav/usage.tsx b/apps/website/pages/components/sidenav/usage.tsx deleted file mode 100644 index 5e1005e65e..0000000000 --- a/apps/website/pages/components/sidenav/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout"; -import SidenavUsagePage from "screens/components/sidenav/usage/SidenavUsagePage"; - -const Usage = () => { - return ( - <> - - Sidenav Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx index a0033c7a9e..9396a7316a 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: "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 }) => { - 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. The sidenav is part of the application layout, so it can only be used inside of it. Please check the{" "} diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 566514582b..8c924a88b7 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -11,33 +11,37 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - title - - React.ReactNode - - The area assigned to render the title. It is highly recommended to use the sidenav title. - - - - - - - - children - - - - React.ReactNode - - The area inside the sidenav. - - - + + + Name + Type + Description + Default + + + + + + + + children + + + + React.ReactNode + + The area inside the sidenav. + - + + + title + + React.ReactNode + + The area assigned to render the title. It is highly recommended to use the sidenav title. + - + + ), }, @@ -53,26 +57,29 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - - {" "} - - - children - - - - React.ReactNode - - The area inside the sidenav title. This area can be used to render custom content. - - - + + + Name + Type + Description + Default + + + + + + + + children + + + + React.ReactNode + + The area inside the sidenav title. This area can be used to render custom content. + - + + ), }, @@ -92,26 +99,29 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - - {" "} - - - children - - - - React.ReactNode - - The area inside the sidenav section. Child items will be stacked inside a flex container. - - - + + + Name + Type + Description + Default + + + + + + + + children + + + + React.ReactNode + + The area inside the sidenav section. Child items will be stacked inside a flex container. + - + + ), }, @@ -130,61 +140,65 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - title - - string - - The title of the sidenav group. - - - - - collapsable - - boolean - - - If true, the sidenav group will be a button that will allow you to collapse the links contained within - it. In addition, if it's collapsed and contains the currently selected link, the group title will also - be marked as selected. - - - false - - - - icon - - string | {"(React.ReactNode & React.SVGProps )"} - - - A{" "} - - Material Symbol - {" "} - or a SVG element to be displayed next to the title of the group as an icon. - - - - - - - - - children - - - - React.ReactNode - - The area inside the sidenav group. This area can be used to render sidenav links. - - - + + + Name + Type + Description + Default + + + + + + + + children + + + + React.ReactNode + + The area inside the sidenav group. This area can be used to render sidenav links. + - + + + collapsable + + boolean + + + If true, the sidenav group will be a button that will allow you to collapse the links contained within + it. In addition, if it's collapsed and contains the currently selected link, the group title will also + be marked as selected. + + + false + + + + icon + + string | {"(React.ReactNode & React.SVGProps )"} + + + A{" "} + + Material Symbol + {" "} + or a SVG element to be displayed next to the title of the group as an icon. + + - + + + title + + string + + The title of the sidenav group. + - + + ), }, @@ -207,94 +221,98 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - href - - string - - Page to be opened when the user clicks on the link. - - - - - newWindow - - boolean - - If true, the page is opened in a new browser tab. - - false - - - - icon - - string | {"(React.ReactNode & React.SVGProps )"} - - - A{" "} - - Material Symbol - {" "} - or a SVG element to be displayed left to the link as an icon. - - - - - - selected - - boolean - - - If true, the link will be marked as selected. Moreover, in that same case, if it is contained within a - collapsed group, and consequently, the currently selected link is not visible, the group title will - appear as selected too. - - - false - - - - onClick - - {"(event: React.MouseEvent ) => void"} - - - This function will be called when the user clicks the link and the event will be passed to this - function. - - - - - - - - - children - - - - React.ReactNode - - The area inside the sidenav link. - - - - - tabIndex - - number - - - Value of the tabindex attribute. - - - 0 - - + + + Name + Type + Description + Default + + + + + + + + children + + + + React.ReactNode + + The area inside the sidenav link. + - + + + href + + string + + Page to be opened when the user clicks on the link. + - + + + icon + + string | {"(React.ReactNode & React.SVGProps )"} + + + A{" "} + + Material Symbol + {" "} + or a SVG element to be displayed left to the link as an icon. + + - + + + newWindow + + boolean + + If true, the page is opened in a new browser tab. + + false + + + + onClick + + {"(event: React.MouseEvent ) => void"} + + + This function will be called when the user clicks the link and the event will be passed to this + function. + + - + + + selected + + boolean + + + If true, the link will be marked as selected. Moreover, in that same case, if it is contained within a + collapsed group, and consequently, the currently selected link is not visible, the group title will + appear as selected too. + + + false + + + + tabIndex + + number + + + Value of the tabindex attribute. + + + 0 + + + ), }, @@ -325,15 +343,13 @@ const sections = [ }, ]; -const SidenavCodePage = () => { - return ( - - - - - - - ); -}; +const SidenavCodePage = () => ( + + + + + + +); export default SidenavCodePage; diff --git a/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx new file mode 100644 index 0000000000..914c32f76e --- /dev/null +++ b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx @@ -0,0 +1,200 @@ +import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import anatomy from "./images/sidenav_anatomy.png"; +import responsive from "./images/sidenav_responsive.png"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + The sidenav component is designed to support efficient and intuitive navigation across the main sections of an + application. Its vertical layout provides persistent access to navigation links, improving discoverability and + reducing the steps needed to move between pages. It supports nested groups, collapsible sections, and the + ability to highlight the active route, making it especially useful for applications with deep or complex + navigation structures. + + + ), + }, + { + title: "Anatomy", + content: ( + <> + Sidenav's anatomy + + + Title: the main label displayed at the top of the sidenav, typically used to indicate the + name of the product or section. + + + Group title: a label that groups related links together, providing visual structure and + context within the navigation. + + + Page or section link: the navigational element that redirects users to a specific view or + section of the application. + + + Single group: a container that holds a set of related links that are always visible and not + collapsible. + + + Collapsible group: a group of links that can be expanded or collapsed, helping reduce + visual noise and support progressive disclosure. + + + Divider: a horizontal line used to visually separate groups or sections within the sidenav + for better readability. + + + Single link: an individual navigational item not grouped with others, typically used for + stand-alone destinations. + + + Icon: an optional visual element placed before the link label, used to reinforce meaning or + improve scannability. + + + + ), + }, + + { + title: "Key interactions and features", + subSections: [ + { + title: "Hierarchical navigation", + content: ( + + The sidenav supports hierarchical structures,{" "} + organizing navigation links into nested groups. Though it only supports one level of + nesting, this helps users quickly understand the content structure and navigate between related pages or + sections more efficiently. + + ), + }, + { + title: "Collapsible groups", + content: ( + + Groups can be expanded or collapsed, allowing users to control the visibility of nested + navigation links. This feature is particularly useful for reducing visual noise and keeping the interface + tidy, especially when dealing with large or complex structures. + + ), + }, + { + title: "Active link highlighting", + content: ( + + The currently active link is visually highlighted in the sidenav. This gives users clear feedback about + where they are within the application, improving orientation and navigation consistency. + + ), + }, + { + title: "Persistent visibility", + content: ( + + The sidenav remains visible and accessible while the user navigates through the product. + This persistent placement makes it easy to switch sections quickly, supporting efficient multitasking and + exploration. + + ), + }, + { + title: "Icon support", + content: ( + + Each navigation link can include an icon that visually represents the content or + functionality it leads to. Icons enhance scannability and make the navigation more intuitive, especially + when combined with meaningful labels. + + ), + }, + { + title: "Dividers for visual grouping", + content: ( + + The sidenav allows the inclusion of visual dividers between groups or links, making it easier to identify + content categories and improving the overall readability of the menu. + + ), + }, + { + title: "Responsive behavior", + content: ( + <> + + On mobile and tablet screens, the sidenav becomes an{" "} + overlay panel that can be toggled open or closed. This responsive version ensures that + navigation remains accessible without occupying valuable screen space. Users can open the sidenav using a + dedicated menu icon, and close it either by interacting with the backdrop or selecting a navigation + option. This enhances usability and maintains focus on content in smaller viewports. + + Responsive sidenav + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + <> + + + Use the sidenav component to improve discoverability: make navigation links easy to find + and access, helping users understand the structure of the application. + + + Keep in mind the type of devices you're developing for: ensure the sidenav behaves in a way + that doesn't block or reduce the space available for the main content, especially on smaller screens. + + + Follow a clear structure and hierarchy: organize the content using group titles, dividers, + and indentation to visually differentiate between sections, titles, and individual links. + + + Use clear and concise labels: navigation items should use simple, intuitive wording that + clearly describes their destination or action. + + + Organize links into logical groups: related navigation items should be grouped together + under meaningful group titles for easier scanning. + + + Use icons to reinforce meaning: include icons where relevant to improve visual recognition + and support faster navigation. + + + Use collapsible groups for long menus: when there are many links, collapsible groups help + keep the sidenav organized and reduce visual clutter. + + + Use dividers to separate sections: visual separators make different content areas more + distinct and improve readability. + + + + ), + }, +]; + +const SidenavOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default SidenavOverviewPage; diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png b/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..c091445a89e57d1633cf5a190bc5bb13e2756f43 GIT binary patch literal 48620 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 E2mCckjsO4v literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png b/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png new file mode 100644 index 0000000000000000000000000000000000000000..de7c1cc91681b3de685eb9084b488f16db8d580b GIT binary patch literal 7981 zcmeAS@N?(olHy`uVBq!ia0y~yU~gbxVEV$r1{8U#skIGAaTa()7Beu2se&-0XOPMV zpde#$kh>GZx^prwfgF}}M_)$E)e-c?47~~Flx;TbZFuu9FG51Y`nCr#WjH%NP z2T1WG=(HLdYBcpZ82U(TI`)@gv*vUYlZ@Sg)4W>O{k`t>s44$(gZ}Zt8eX88AmIN# zo*BY&Xky@jumlttpkgi@2OvTWf=mWbWi6x1Kp`<2AmH>cnnJ+AFwj{>=kt<(pWoZF z10A!Y|Np=D=N}gC$!0KpcOrSGvO}+RQM}jzuscW7E!ia-sMI_wyen=!^XpxFz`(p; zKJWPli+iRGvra!XvgxyCy0Sz0dnzMs%FvBqWBp&heVhC4;pflA3_t$vP-d`2#46dY z(*Xs@fy-6Z)w8RA{P`opP-p*+!=axQR@@&sT__X(x#iE3dHdJAwgRfHxnDW&@Z*Z> z3|V^9Pk*p@#}V+j@6L3%dPMa=q?jS&i z0aN;c?{lA9+MIj+`ZdFp9m@SrYh}P`?eDM;2c)PM*}H!~KSO;wjfyHF8;>80WR73A zS@`;^)dr-@|M}N1D+X0ywN)w44k}*?>=8vA`7KaLNyKn~_xC=2`~2J67F}8N;AxB$I{Fk z^&^%6nbCNpTU}1mv^qNe2Fm^eJ-RX)3!||xI^GMeh^ai@tHbR7rr-V_sEM)f{q^zeuoOcBCu|(aKoK@tF&(N1m>JF6*2UngBe1MKb^Z literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx b/apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx deleted file mode 100644 index 76c5eb72c5..0000000000 --- a/apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx +++ /dev/null @@ -1,460 +0,0 @@ -import { DxcBulletedList, DxcTable, DxcFlex } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Figure from "@/common/Figure"; -import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; -import sidenavAnatomy from "./images/sidenav_anatomy.png"; -import sidenavSpecs from "./images/sidenav_specs.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Sidenav design specifications -
- ), - }, - { - title: "Anatomy", - content: ( - <> - Sidenav anatomy - - - Title (Optional) - - - Group Title (Optional) - - Page or Section Link - Divider - Current Page or Section - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - backgroundColor - - Sidenav container - - color-grey-100 - - #f2f2f2 - - - - titleFontColor - - Title - - color-grey-800 - - #4d4d4d - - - - groupTitleFontColor - - Group title - - color-black - - #000000 - - - - groupTitleHoverBackgroundColor - - Group title background:hover - - color-grey-200 - - #e6e6e6 - - - - groupTitleActiveBackgroundColor - - Group title background:active - - color-grey-800 - - #4d4d4d - - - - groupTitleSelectedFontColor - - Group title:selected - - color-white - - #ffffff - - - - groupTitleSelectedBackgroundColor - - Group title background:selected - - color-grey-800 - - #4d4d4d - - - - groupTitleSelectedHoverFontColor - - Group title:hover selected - - color-white - - #ffffff - - - - groupTitleSelectedHoverBackgroundColor - - Group title background:selected hover - - color-grey-900 - - #333333 - - - - linkFontColor - - Link - - color-grey-800 - - #4d4d4d - - - - linkHoverBackgroundColor - - Link background:hover - - color-grey-200 - - #e6e6e6 - - - - linkSelectedFontColor - - Link:selected - - color-white - - #ffffff - - - - linkSelectedBackgroundColor - - Link background:selected - - color-grey-800 - - #4d4d4d - - - - linkSelectedHoverFontColor - - Link:selected hover - - color-white - - #ffffff - - - - linkSelectedHoverBackgroundColor - - Link background:selected hover - - color-grey-900 - - #333333 - - - - linkFocusColor - - Link:focus - - color-blue-600 - - #0095ff - - - - scrollBarThumbColor - - Scroll thumb - - color-grey-200-a - - #0000001a - - - - scrollBarTrackColor - - Scroll track - - color-transparent - - transparent - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - titleFontFamily - - Title - - font-family-sans - - 'Open Sans', sans-serif - - - - titleFontSize - - Title - - font-scale-04 - - 1.25rem / 20px - - - - titleFontStyle - - Title - - font-style-normal - - normal - - - - titleFontWeight - - Title - - font-weight-semibold - - 600 - - - - titleFontLetterSpacing - - Title - - spacing-0 - - 0em - - - - groupTitleFontFamily - - Group title - - font-family-sans - - 'Open Sans', sans-serif - - - - groupTitleFontSize - - Group title - - font-scale-02 - - 0.875rem / 14px - - - - groupTitleFontStyle - - Group title - - font-style-normal - - normal - - - - groupTitleFontWeight - - Group title - - font-weight-semibold - - 600 - - - - linkFontFamily - - Link - - font-family-sans - - 'Open Sans', sans-serif - - - - linkFontSize - - Link - - font-scale-02 - - 0.875rem - - - - linkFontStyle - - Link - - font-style-normal - - normal - - - - linkFontWeight - - Link - - font-weight-regular - - 400 - - - - ), - }, - { - title: "Spacing", - content: ( - <> - - - - Property - Element - Core token - Value - - - - - - margin-top - - Link - - spacing-4 - - 0.25rem / 4px - - - - margin-bottom - - Link - - spacing-4 - - 0.25rem / 4px - - - - margin-right - - Link - - spacing-16 - - 1rem / 16px - - - - margin-left - - Link - - spacing-16 - - 1rem / 16px - - - - - ), - }, - ], - }, -]; - -const SidenavSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default SidenavSpecsPage; diff --git a/apps/website/screens/components/sidenav/specs/images/sidenav_anatomy.png b/apps/website/screens/components/sidenav/specs/images/sidenav_anatomy.png deleted file mode 100644 index 5378a3a036060bfde98a3b72b40c0f2674b60362..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 17193 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 diff --git a/apps/website/screens/components/sidenav/specs/images/sidenav_specs.png b/apps/website/screens/components/sidenav/specs/images/sidenav_specs.png deleted file mode 100644 index 280c4801638626191c3a5520a1574b5ed653b281..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24824 zcmeIac|4Tu-#%_hN=n^PDO(arBFYkGv)n(>d&g(qi=kY#{qYM- zKMG_wM2oD83D}V5y?(pFP&A+6z@0C3lRH=odKI;mBUe71jt14K zy-bNZ)TsR^kP-fs$!hHLz0wSBv5>2ABlu^-Q!Z{Uu5G8ddAPU^+~Zlp#bvpJZyorv zvcP6=;|{`7TwJwv`*gXuA|lU5KtFi)|HmItN4Ot%O~J#Qxyp04;&djOc4<>6agvM)D(ZP+(SLWR_E%^yNWwB-F9>C>I{o7ndxAFHgs6BQ|4!;row znRC3qyYT&ZS7+iS0=~JjxDw@8UQ!&mnV&yWkb+(wxaMhh_7t)?^1haABW{C_Q2iMH zt&uLRsF8a@HGv$Vhp;KSy*&m)96uq+d%Bp1hwC%FNuhpryHOI6fFxtWjrf{-?QIVp z^<#YBP(NGK%l}wS0o(}!_Ly);9cg~Kn%1Grnr|!JtJhqRaa3?S$rck%>l`Btzy-Ib z1ueqtv@`_eNIN2gGDJ3WJ$_wkM+)`Y0juz+ynPwT>Y+I1FWxReqsYsPOJ)x(PSTd^ zl?Uerm02Ant-1S5q7x@c+Ddp+3#$l4SH3m-4A-t%5=w^^ZIzWBw>Wvf2)LGv|Gje5~G2W^papC@jN4QAI(Y?V8JMIg*z`}KLKPGA6E z$SWf9E&Fb7msQx&buna_-PS=rJ|%AnLk;+ie4^}?KOIpC#^Zt01n-jg)-hMlnxlo) zAw_4q664afHlYqEUNAwxU`3@ol&04DD_zOF$|&$YA7{YB+!zEO%=~b;{OL~f#HYIz zb}8k>cQ=J=p+A0!6KmE-Yh7hZR%;5%iC0vsP?8h)FJgqjh^k0^BtO~#$G-K@BpzB| zRXw2!OIbA=Jc*-5gpCg2lBX&;)6Mg;Pv&0^X1tEgYFDU43md#gwlhBrrW)qoYemlVYQ62z_6vHG}s#j)i4 zIUdh6uz0^}gO|;3Hh73D99rC>n;+wgV!4BtCUc@J?8C2VP}@|aN;-~uJVuj!nP5eS zKp_UKVN%kdgoV(0|FR>i5{WC!wa%^0kp z@@tBt-ze+zIkS9^ssuAwFl(4{VO&dl;=#FFsXmxsR-n!RJ?Mjog&;WVL@mEZ0E_E) zupvN~g2v?vhfNm}(w?m?OffoG>2yFsI)TIz$V8nh%nPK19WXjnBtc9M9JVZ-s0y8_ zBsLgfS|xFU1U@3a6_Nei+aRQ?w|ty? zZLyt+I?(%-)5HwxXxGC7wPHyYcr2C0bcyp;!mGMkT@kc*JiwoDf zTLe190|yVm9`>e%4^56WU+~oP_#LJXGb5E6Z9$)j|Z}k`_c&7Fm%ss#-7ZQ+6QdBi!2De<|HRHp?VTw6w3>=#= zeMrjzmxa+Ox4z!9hp)l&icY3x`* z?oKeq%FUtos!v6y84r|TC!Ls-Rwc>I%e3V1!8+l>3ZX$P432)ZBXXjCn|(znh}5yoAb= zb|qqRb$Q}#dKW@?bikwFLh=hqc_oz#zK=FmRy^I~Wmr<|r2rf77}q?+v@7{7wwYe~ z_z?!-q0<_!NK{dLX#P1%*@Im2bn+dq_1u>H*=U+*pS2fQ2jc}>&vceX>Euc!H@O~9 zy@Qe^Cf{>CFGYN%(OJOpl9nvNmR8Vm`bVYojK-H)6l{uXM)21{ri;bN=hhp#e)kad z5RL6FzZ13`MiV||rFloq*UUjJeb7RMZRd(@bTis+W43k;6xkje#@A;Ye-hcy^)_L> zm(3QUq_77?D+9f7!NjHZ-*QeJ+_9>lQ+TNo$G zzwf({hi37gN#6Y9-9>q%w?sGA3&FMRaPMgb39|v;dLOm#9;dl0NO^VdNxs|P8`I76 zZC4Ru#-VJF-w}Dlz-~``z+J)23LYf_n^{(NMDvElxDI^r%grdAj8Uf=<|W60MeY|( zW-_{l`B63L?++%Bg}0Klg}r`*>qs`bQ>r}^0`i50d+kx|HzDz1$D{A|cppi;6TYF6 zc-y8c@z%B*oCbBwq4|LlS6s{P2pguQjeL`0N1`89^r)!22wuK4!TtREYFb|-z$ujJyRH(hD#sm1Tm%B z266u}Vq`_sNZCy`nm7CMJD$_=+}DwfZHvLv-3~$Hi4J|0SJ}0l6Ou|MHUP^hr_DW? zXgn7bM$L9u#1eESM?11{;q{FVIeabV;Mpb}qM#o$<~sLx+?Nb5_yPe@UQ#AJoDmS6 zpc=F5mIuxn!)|0ojli)Qf*dSbQ1=3O{uF>tu#V2GtdEyJ=(AXNjP#nTa>e-{!U!1N zCOZMjV)Z_zT27n$dmqs%`3CZvZspjtn z*7?u*PJ5HJXKHvx=X!6Aye3ACFe;L8$NaveJM=My$T}HBm-E>o2jpRX$unE~`~)^X z&YCZ5y{?<-=*P;sY~VY4H$eoQfJkmgE1j>*%*=C7V~sw8XvPF&DS{%BXiP8qUpiXODilu~p~-+aR~wgPez9cWgBF=`6oS zn`>pJC?X;%&wz1mj?l$Ay0G%jhrNGeUNrWxHt4k+(U<15K&&<1{m|=q)TGH~9R=x3 z{I$yxYaZ?TIY6=vxVUJv!In9yTy+xhwyoLS?$X*v65abbGofB?sp;e)?@F|eoKi&~ z`$H?QvV8|H&jT3_H#-JQ%c0(fLUE}^(SN-3z*%}HEe*QW&$e%m8VSs}fZ<4@zSa2u zaajH$W~q*{kmoI<-zg9)mZDx^GqVTRezv$n$AJ-CYr6^qXP1QRMZZ2@D9F4hvPR95 zdyM$r-^_~BfUd53HQRqKsLgt$IR+KMUBb_gE3gdMLtrFe1nQMYa0lTurlp_kD*v8gRGrI_j4YPfYXmQ_EIJ*lj{&88 zg;riHOFr)XP<$v`UQi-1CyExE*03#*6BY;w0@x&W<6S8d@@J47Itq2bbmr~U>p4v6 z(TTa~91-5CK(d5nYe4_9Y9^zt1?EaNIuzH7qxzu``(5a&iNpyN3@7`1jPOqT#k%dA z`en&4hcc)7$yb?(!nPKVoN$ja9FNH^_)2ne=01qISv~a`0D@4vMjel!Xs#$V)8P{9 z_$jYzGLiZ-Oj-q2$8?%%8U5fPwkaUkPQu59-0B3cP{J&Zf{TSaV{3Ai$z($o2+YaWcKO$O!BrZ35sOF7>L;p^eK^g}F$}1`eIp$ts7;QV|DD z1fueUOCRPK_b9#ja$|0}|NH}b0tvg+UGTaZZM=N$WL}wdk)1uG#iHSoG`S>yAn&V@ z{Zi+msC6pBPQCJxuxb}hkRqw;3_NQs+y+NFs%4bCdJn;XlG%Bz__FuwbM zm5T2Q&$B?7rXYl!Id?k|zRyRPgBjbLHiOCM41#WaXFalq6WkIM9&+_Xo^JJgr%~?m zXr{;?FMCoBE1p4whSfZ0T6ttr)tGOsBHeb5@;g&wOwOb1DOEtXk@)iR|}jZnp# zNVgFs#5PMKzu)994t&b>vm6}s*3WLi_`AuiZQF~_lf{pB(zasfc3}^BMhb6}zfw#t zGdGomQ;AB;4IC2c$4qA3IrKh_iiD>_zp$zen-#~BCf9a)!~zBe)Rb+gVZ zU8D)tZzwEV+?c%I04cz7@TKssWR`1PCdpjPgqM;UM}I*72%<@AYRzRW9rQ6-f~I4TXQ_Cu4t6@nyPQu_R%Xt(K0cluM3m-CA33R+T-1)i(AI@!5@scd9K=AUAx9o z5`+{LkJ4YE1khRE)Nmr3SC}OwIq5b3L>Bxxdxj#@&!itr3U$%VeHZ|I?V!o=55C|* zX}<(5jsHpd2JZ4*(AB^vtDRP;b$vHJ8A`VV*L^fuyQW+T90xCCJEE@>tF$bBGC z0HF|wa{${kbQpZzHUmO$FE7u0=MBD<@c0vP|Dffddn@f0jfJvv7Co<|W9Qe2L<>7n zyYPkXO3d24s2^7*U2cldX3uxk57&e?j!KzJ+4_DEsR!TG^hD60tUeJRoDQYzZ@#8@ z+-i{spZ_#6Q$@C`Ovhar4kq3ww94nCsnmuv{ooovh#I!{vsrc|OOnJ7R!tYr{pPjT zsRYVxM~WIHw6gl%e1DbOz%zb1_Qu#l8*kBqoY=QxFP1riYT}8B2;po-aTj?JbgzlV@HQJwJovN(ks=fgzQRV!{$Gp7z-y|^ACS} zx+Fz=`GXSD_YHkG)IuOO%qJM-QDZ7lsGUKU%6t-D!H|%~wT3p0F^oybZH@{JLbcWF zz@{~kgl}hsq~7VB#0Jnbf;+Op6qB#IK20<9E3cV+p4!mt?~nJY*vO=jY~;12^>nQh zi^FF;awX94?so!&m+rxgnS4Hiji0^ijH%nTtViIJ(;^R<>GUisW#m4qk9$Py-<~K zzBX`k_BKb5TwmYW?|Yn;-x4v638GtGbTZF0vd&Sd?8thPf7lq6Zg%z)a?)&zZ&tvI zJ#Gp-UFF%fxV>8!)ig5|51Yqkt+O@}h*X>ODb5Ug-p}lzF2Amtc{@k_dPE7!q7>SGK(lDdoAv__@Nou7Uh$qH?^KQOZB$kJA}rmtdPR z{W~!mo=g1nZ`(>68qceK!{(JFNK|!#ZlbeXImKUtkf9 zHg0ouc79CP-kn@)MwN)Wv|CTt%%jVi?^twc9?KYgJ8@g?b7%WvlhGMHiL5%lF{7DrwJyV+n8S!>)n)QL6Or*srKK4^J$KTW{%O-#>Uw(IrpZ)d$BdSu zVTpe8z-@^12;-2hQSBs=izABgy3dF2Ni=5|qXp? zj0m3VUBAz*@hdBRyDFOHh@wLZ|s>o`K4O$j=GSF5}0OI01f` zyqHpdr|}}=*Z%ghZ25z~?Z=(2JG=%~MGg>towupYyJAZ)+zoYlgHT!|5B>%~E&R((>jIoL;t zInN+%U+Si8GLh}(-y~*PqA1U_Br!aO;8iA`&TB8}6lkG)FEe5%Kh;R*YV{*S=JRRk z9n5gQH|;T*3s+>XK28ELKP%7_|5mUmM0Pn@O42R9x(C)%LJt0;VEdMDcBCW4DRE>s zwZ_hv=SLQh1bJ#n{~WKf8I<@`z$S3#^c0;k)Cx<_m(|ZSoa)f23xiY@uoZYyJ>LyP z3mRw$PKJ$ZOM`C>>T9jvedK^N?^C`F-zMaKdz>|frPCJ4yS8umgm};`6xE;K`h%-E}zf85J_VFfJUqT>%bS4MR6H#uIO z-@$fpHG%s&3Bapw*+Aog@cd79;OADgc2(1W4uj8-lkP=k{3_-9HhoFbPW*Z&GEUq>{W%oTu;;@_RwX@zB3Nd$WPt|>Qs*Du{7-o=!w+t9d zRwW9Rt3sO}fag6nnG`vJkR4jO&OI*IivcQH(ttn+$o^V`1s|iS;0COo@wE)J2sV}A zU|P$eJyxz8sgxFl0>J`6vfA47_MG^^Se1!{Pn!WaT^L9nF4DLyyv_pbUsu3Rw<$F- z9FWhU6SQ6ot!!jG!A#;cprM}>LmcoM=1i4^H&HbW1ivx5UyFQ>pcot4Kv|JD7D7fy z4t>Fc%4y?CAN0V}xZrq;>1f)fqzeK4L3hf3E4DI&F~(Oi3Ug1}Yu)D^x&00syz^~U zthm>E&S1#5QG9G6w*V9J&^n3gW%|zqk`xI>=2CqICU_THf>euQ$~A{w@!QE^Et=4*yGM`O%SH$ zm!0A>8dZI9V-O?$CdChsxFjLMK?ND6olTAMlU5g1 zsT|Hg|Jb-@0;SBUGyRUAY;!;Dd8+qLIb6F}#gN)GzQQMa_O>v$+xZq+WkG(3_VVJ` z*!!@zZ||IoZpGo&Pt4DhdiiNZ*1MYv4~9|O$Cw^ub+XSAk{S{?bglOdy1YGv zG+60Bu@p`psxa4{?kjR+*;((h@fbPEVNo0Fq$3UN3Pg@FHhI@9^vqGm8H~0rTszBo zy6HOCc`NSgbSk4usD@3I+f-j+uM<|47iN34vvb<>Yf)Y_i`B^{*zY$*7XIEgZJQ!I zt;wi4z89St&gyhl5i9xb_wEkazAX>2PW(jqQ?!oPDL17S8MtVa+wQnKe$jWe$kqPN zOyjqzcg#G_%MK)8U17pW>RV@s8KK_o_OueRHXP?w5D3(VO)E@b%E#huCCPEZqWMxO z-O-cc{gmFyu}MH-@)vR3E(3q{hf7u1n}Odl!d`#cgfw8fWBl8P3Hg zJ}AcyX7ac!RVG6?QU&$o;xkC?luVZw?0kByq4UP5o>o$Una=Wn-?6y5iNWmSV^KbW z^}{I3l#y`H%G#!hDYz9TeN+bjwV3#=>9@8ngp+Q7eRb#oWtEq>z4_;oZC%X=5j&q_ zJ91uJ#?I&5)-c!l99JrG-3@R4ni#)6EHw?cZKu3}`I>y$$m6N=>iuT0uIccpU{o)_ zFN?v{lq7p3!}9SF#wJRL{LumWC#P%~TxyLHWtduR>tdl}&0Wu04M`XGbh;#tej$X7 ze`FR%0}-_cX@^jUg?^_jm?@cjhDZ`5P;E68;z!5f*f(KXe8$$8o@XTLO-i3ay|$Mc zuS%j}@Il5k80i>&&>t7XnO35J47+2uUcJlliQEYjYrCht)(Y$L6+LUr*V%@W${a_O znbmo9P9LNR7SS)l_`9TKKAc7*ntP5Hfjw-x$+M_4>rMZ(tLsXb5SA*m`$10~ExoY+ z!+Yx|^Db(!8HjwhT^0g&sxl;RX+1ocsiPM&e!(VKB3AbLJilbvmFkQ;^mjM;d$nbJ zBr@6As2cMyr%Nye1>PFs`sOvr6#8x94e~r8)~P-F*O_NIPq>Dh%qz7#qR5Q*@(T}H z9DaDG*%6@y(}2=fk~%h?B%KY*_-M; zHB4X0=Ihn8m}jmgp5qUb^kjiPuRkkDLfm2)k5nU<4$b)_G>K zV%npEd*Yg#AMZz{e_;b|?H;iKj!MzHba%n|9#mDJPYXcq4=yDSz!$*$T`rSZF|CB`Q_))rZXXdE% z6H1>mhZLG0lVVp3ACKj*fM&;ao3cgK7srXuf!Sq3l8Z#@bxHZ`Ba{= zhG0`Ji!(dhiAfDOoDbAC-;0N!a33IM%;7G4yGKOQqmo@Y@h}e&mZhh_r>`RImfx~4 zn1smvqX$o-1qsCdF?jBtaNumY=`+2Hk%slq@l%Q2aK5l%r2@Crnlo2Rg0 zfNst%zRv)o$Bb7MY^+BUtTAm8L+*Rzb{TUgNbf1$886nXM=q}%pRK7J@{`n@_KAtV zHnYAJhi@p~&sz-fF-`g@G6iMmh3Qa3oEM2`2`bp?J^5F^_^85>RV|@u-Ch07F$&hOX@zMYqLB&k zwpN$WK4;y&j%{(=zB}w5Cw)Bw(aXP(4V18_k{l{1?*ag_`TaS-QEE7lJF5Ydv_cH7 zXyQ8Y+-{ni`@Ge(K$c+$d0l=e^x*Q4#bHJE0)Pmd0-pr3aHAjc|4+#NzcKR$SZ6Zd z%&R>!Cnpmb(g$cdORdVdc7R=GE>shU=xbw;|H!0zu*lhYjOnL`oIa+0XjJRLD$nYZHtYNI5#}x_9#f5>N=m&JwB&| zoV#0JLm#d(j~EYaW!g+#Gmn^<3*%=9lB(M2n}h9!Pe|Zg-RUJeYz~2!`oUfnnioFL z(K@2BT`1DDFD1>8VXZRRaZ)p3+%pvLtM?O#U(4~{yC5aqJm_R}MCpEK=3p;EM*_u~ z^SuNc3bd=zQLi{xc(@;ye@1@afLdjGox>4%0dEZB>m0j`o=R5_#|GDcw9;cxAMa8V zFf&-`#|8?zjl4v_bl)MQQvUt?vMcGRWrm|e+;N$LUV-#5{)*v{sl{LlE9~ne(PepM z1~x;?6=I<{&VjIVQY&Ew?}KF*vR&%fVDrjn zv?6KgL}Ddr;b8S_-N@2ZfuzM&>z+$$s`1j#L{64iA5u*{Wa!W}@KTzu{*>Q7`HRKq zN!QAeTe|?COE`xJqAba4P(&%g(!nX(SP?0CyW;pxS`zbItub7k3MeFKS%VvM{=c=| zN5q%EjnYY=*ixp#25tiXMh2jD?ZXQX!h|ShEeIePK-_Qm; z8tWWr!B&yY(R!Ey;j@fQ&-DzV6Z7_G_cb|MiM#d3^S^tG~tX=>CteYRL_w9`mQoPY`)s_u=FLtZqzUJ|*LS|$Q`F*`_B0J&t7jTu&Ba4E@N)ThEz&pO&# zSBqX28{!8TBo>8W+L6>97Z7t#`(g97nbs`$2fgDHR)&vm)wFyWVy(W!&OBh)_2cqQO?^rhU^>baY=mUb!0uJ!qX%p^J!MNI_a{t`f$)#?Imaj zA!$5X=KVqCW=A&lx@QkGQSnOixf9|k#;=6LGzwj8%xOgf)ZVwKfYiPg!S^9{ff5Cu zD7(9!h3X*!i`nzvY)D$^bmsUKKut{*tx7;p@}1unk>@&^xtTzy+ivPOY`}2cONT9@o1t9-9>=v;6Mf9fihbqL(A!mOuTS z7OgR=*9__L&380cQertXGt{lRHo(6wS8^vOd~Cc7UkC#t)+R2=HGJ!4uWNR$`Syn^ zL2Ou)oj=m=8lN117JO zG~9O3(zL}|hheUh{>vQkQ`VaP+uA7#$}S6rMvaBKBkhl z%+i!Sw>Nsd(-idE(W!oL+eufZ8~>FnQfnVeqmsYeq}B9Bjg;i%)jW+$jMK&-=8DL* z%3>OCSY&nkows~Q_6Mz>qd7scP3*qhDDQJ0qmbh=?jKu&S8jOrn9+#urw(wn<*C*W z`U9n%(F+4@aV3%{uN^ZX$Q>E>DV}MeEWcAuWO%j3#VqG3kTV@Lm;RuC(DieNeiKlY z?@4L`0IXR73)p`82}SMGY@YA40rFkw_iK_*ZeJJ@kPY++A8^&1Ay$qfSd^D0tWcAp#8eIA$l zO=G7qb+^0(GQ{m0l2f*)!rLS}LX)|e-JQU@YeR9x`NSjDhZiF>R=~&N^ zqy&L+P34%gyqaGJnwQ@Km6sf@oo}Nh$0n?Q>Z&KBXxXK0;P4Yqar1PCyAUaH`6*6X zznz3L7f+Bqg5y|KKE+4l@y+2`*Ax`woA0tdw4S&&28R7$a|D!*Gp5#blQf-Qas|8X zKoa{W&fm|o%X;+a^%dJIqkgm6l*JsgkOHpeC&B(z`H#Yu=O>;yrH9s0sL_5Bo4*AP z5|q%Hfv_1Y3Ywa~$9XomyB;%p68Ch(Lg=96rNA<-V8oG5yCdaxiY6MSDZ+BS8NQ3l zh|u&)5cw3oh{B|D1FIr5{saDDlf_{=7J{)A-H_r_&SiCgMA(;)F0>ObyRhpD)A z(s1~# z)WW|i6aBk@bYC%p6x}kd!wd_RRs3TEI(?NUtqJE=TRirD~M?ZW(5xEy5vSIs}-vaq#M40OLUv8&!j6k}Kk{Xt*$88=tcXd*b+zTd|u^ml<6;osu^ z#Bps85gt@_tu79GGRk?spVo)d9?dCbh_#My2R=nV)!QZ= zj3f6x=iANUhKd*Vy-aWX5{RM)HX0&<(A4up{F6H^P1M8CRGQCNE9Cs9yQz56i{JYL z50c(TR63=0JEhtVAV<}aW9ql^W9y{(OldVe>jm(xhRD76>@zLI&Kn;NtZ=0(bGT5> zV=kQ>=GvxXyy2$sMk{eE55A}A{4)90Ruhk4>RTB-b%{h`h=f^Omv=?|s3`!j}e`{Wr>hsGaY5%#ew= zLDnSR&g0X+spq5%VI|f{o(G>h9A-~l-|S^wF>toz%jGj}KqY_-EFhkRXN=gqFoo#* zANstm7l>JQKnVb|V0fu7RED?HPpWXp6L`Se5zn2pt2Hn`5eccMHk}CnB9^{4Tp)fZ<`} zE8Xq1uUUkzeT)XO1tg!(n*}Vl1x+Syd(d->2jA|}C{(MxQexwp!}b}&qC&su^R5Cv zXn6jg1r_Lbe{v{wYO6@)r1`Z31p}#~VS`xiDq_+#wCS&3oZ;OA(SuEh^xTocDy6xHBSD2)V0>E}(dB>N17cFcI$<13Tm}ZjxY@$k?!)N?6 zcP%qf9P-%y_i%31H2oyt!Gw}vj&J)KYM|aMwRKnda z_nK+N44l^YCK3ian9ci5mfNY+;h3zNQ=#p&exLyu+NshfsBOrGuyQw}fj}&C2rL@v z1cRg_=B9Vc8X7&QatW9RQzsqG*2*NQ^~2+h=T!|emn=Bn?eBlkO#_7iV@~W95n?1c zOJ9~4?2V96al?H-fhR2V+QWyFNYrZMuX_p-NIt%B3uW?=73oojq_sKq96LW z^-?oR(A5pt#qFF+VePWy-F&ANVv4;ox}xue-9l7PU?ARqFymSMuemZ1EkQ%*dVWx% zH`_RM!m0{{<=m3ow{psF9IEn?U3BC1Se`<$3lt*HB4j&HcO$G+CUFb*$2AAs^@okd z*`-fq%@3PcT&Ez5y+Uh*j~%)YnT)(8ELTZp57fOl_Co|K6%ma^M0iFTf3Z+-GM6#N zr%+NV(-V^>!@FvO@b+DyCtnM1vFbOdLeP@(j64>iA8u^MmJsyp{NH|81y0GciBny; zSf0HF^`HK6N}cJh^LO+nwj)xrh-D>phe8Q1*^5>Rsd3%W!u#?+xCf+GXO`ZXm_taF zZOiWuD7~z(S4{lZG`=Pg>yKr=JaMCcs+;M7vbp|fV;SxQ4U5>FFuF%Un&j_#-f@3_ zyx3cH1-X7R6^X7!^FP|QnTY8?DfJ&8p;&+c(q6MpY2jk&Mz;{1t+Sq8PI$ZI&vLr3 zp+UM^)ACW(*?0Y~fHW%vxq{2TYfGUPD^M!s z+xA{bUw;ib1P5YTW8=UYW=80YXaTXwA}(U_uu;+3_3p%l;v2Dd!tBUs<Pr&Z>vo z_ENW=HhUL4I{D?@&3Y^|kmKF=qB`LCH~HJ<+T&$8nh%5}t@gU<6I()!clYotFa#OH z#U`*5Sr>lG7%i^Wc9=@gvSMUZc4s;x_d!y z6%MF#Wp;2yH+k*n`pwa$4%yc{fk@qsTnpO)<;inMVh*?E-IYAKCBnFdAQO^%^LuJ~ zsSk~vx3Hx7w0jzJ&M6JpY@*TwPmcIr{Rtr_?Sc9BN>3fciGW2xc2eqBND`NX&-YDJM=qD&<}3%Ulsn^s|bD_!BqwVZ3vVqi__`kdr5X~$K1U3{b@7F65`-08c~GBHw43r z&wf15U)idP)i(UHRY4i~Pc9gQdbeCvDIAPBy-2olO+V7ss!&j^QVnW<{KGd|3PFel zJX@y?yy^%lBLlfK3DrP3`firr{QAvk^av2K#ncp-K$)hukP5;{9`(&~nc9HcJ#xYs z4O{wlg+3HmFxcU$L9V7YkO8-ADyp&M)eQ()e$*4-|bX^@eLD+I!_!^_F-A`%E#U&k+faGs_qxibO=ak-fW5%IA3HvCw& zg^H9SKZO4qHq}-`KZMOc3vAd>=nDy!P=4~mV)f@D1c+Q-$yH)Sl@5eU7HE=0e|K0Z zz$j$y-L7W3cKpJMB?!==T1l@ZE#I=nvfXe*vt74T5sa#0AGe!6n8Sj-8HWTxkqp;Y zeV|>gGC9KwW7+3F?t(Aby_;LeJRl;Yq$ILCNAm3jgaNIlJj8)#wVWqW=vzhXT*4g| z|71xHhND&z*?`N`5G2@59GJ0Uy!n>p5Onq5*<1z>35J>?3(ho;xhk>yKsn6O#PdlT zOn+~y-2#ZJ9~n;GZp~P9hwxgrPe&cyj$ZxLQSUE}RuYj2)PW1)l)^KK2Ss*5tZ)sd zu=>((@+!rz{Jsnkfxea)KS^-Rp;t$=%Oke3-z?yL3|c#Nr?T^h5C5thu>dK{Qs>s(+DkTlL9jH>ZDNxxpGy#a*qA|8%Ck1X1q~ONn$8xt;Wo+2nxoe~{;IW{H$2+z$Z}M1I(R;O_6A8}fb|9^Vl4}(B3@{bd*fKjgK1&H)U@Yz<1|KFAN1V_Z zp9^~)0KdB%G9DNT?{ib=;PqQ7NY^pVP?fhgk{wFk=Ng~p<@0v(xi4i9O3&*t;Y@@8 zC>)DLWP4^Z2VOOfq2Vyowj5@MM+Na~fWSjpe2&O|K0Ul_#W{^US-p4d>I7{JmWHG* zKPRgf1Of-uedc9+UT;S_xh!`Olv^u&sE-lXY9MEq6_ss!O~t`c2M(Cu9$&D2l0g2_ zW8)(ZH_OPxX|o60G6kEq8TJi6x#rLckq`r~K>4|7cFn#7mXp}?$dj@y@&{+CsU3+V z)yWPSSpNCs%dVZ_fFO`8Cm6rU1X=SDR6hS_#;NqexEAMHobw2B2pTVZRe8#jx>;u58R=*oR9@-*cW(Vifhn;|#$(SV&D|lo+ z7$M9Dmitpl09kH%=u7NoogOX+J^vI@fQ%)T;pK>8~ZlDj!2LVvWD# z1fva#Vx=GFl)2^KkkYe8AfM~MKYjOnSFuvRY;R5!*(>>xwoBRA%{@Q#d~;;w&~!mX za+;akG~*gFrJzZPC9iCKth3w=*DP~X@BLLtk}@XwisWQ0CU|BV(-nU>^g-VJH=v5C zkxsBvCohadNe)x?7@O38i<@pPRXosZGqSZr&$?Jb-tsvC=Q;8|%;Id2SJXe+Gm z+PpZ8!JmCod{nt==+rnni!HC{L}F)sOmu~b#k{VYo zwwGs3JC+d(u5qT-iV{U{FI3NH+dZ2&@m!xCoj2peocvTV5O|bKZyo_)pvSTI;GwIJ z(JRUJe_fQ$-}B!VrJ=Fxa6Ds!fQz|Q99-=;^5Ad*HKH~^3JN!%&XLlpxWdCiH0uKi zT2JHf9?{r`yw^!Czba?`)DQ%cgFs>QFA`Ts>(`HeN<%;DGofBSz(@60L}nXQ%l;32 z@0X40Uz}W6s+Rw&&+=EFp0Mf9L{l+NIHRpMN&?PCrKv45Ijlh=UQhKYQFtb6T#i3N z=myW4#ab~po~v~wt=trKSby(n;GLUF;9QRQ(=+|W&l|n#(-8@KlrSaIGs zpFv1k5wi_PxPLZE_!)N~joa|Yz7O;n;4?du0BO1qF(0|w^8pB`E{GVE!F@%2~bONehYYDHw8L&PpDqVC}!p&KQ^`4)l8_=Mf zp%wVeWKPmlk1Zss2i4xozG6i9N0*fx3X z$509b88?37GwAS7e7f3X0W=EY-v9TF{}*5X-y{A{?(YAu&+*juD@`CTVvr^O(eM=X zQUOsy4Sawt;AiVmki+0m99`#_8+=!_M*11-TXRn=0zAJTQDcT_q$rMKIrOR8knxE< z@a6t<{1-zZ4_FP-ZIK*^rqPkDmo-V5nLAb=7M zF$kPJ1%maMY@YG0a@7`2<1|UEwqT}?GlOPfzvC8;wDZ;mQ?ZD*;2CtiiFl3XvQ z{>!b3$C7NSDArawj2B|-p)&uKVHQ^f8rz3gA{%zi)j9Dw?li_>Gy5yWtZ}e&g<;F3 z6Lot=Xu=19c*R8ptp>PWK;4R!!BAZ5E1Ya;>JX2D(@@xjVNzaL*d;fpc09=fv^R#< z)aRw%P*n2}WcLU#X3;rON{Sq2d(v=~lAfXUEAzun&SR11i+5J~5Vs)hO=8BMHHyDw z3k{3iN{F$s6J@kDgQjaMeUI&j%F?KhLY9X<25SlX2;5KOAKyyeW?h-V#AO)!fL_l} zm`$Wf0mFgnc&5Rzgs`ScIkBa%i>;y#E88Ub(IOd@FD*r{XhhCEm=K9i - - - Use the sidenav component to improve the discoverability of the application, making the navigation links - accessible to the users. - - - Keep in mind the type of the devices that you are developing for, and handle the behavior in a way that - doesn't block or reduce the available space of the main area in the application. - - - Try to follow and order for the Sidenav content and make use of hierarchy to differentiate between a title - and a link. - - - - ), - }, - { - title: "Responsive version for mobile and tablet", - content: ( - <> - - The responsive version of the component for mobile and tablet works a little bit different compared to the - version for desktop. As the size of the screen in those devices is reduced and once the breakpoint has been - reached (720px), the sidenav is displayed in mobile responsive view. - -
- Sidenav responsive version -
- - ), - }, -]; - -const SidenavUsagePage = () => { - return ( - - - - - - - ); -}; - -export default SidenavUsagePage; diff --git a/apps/website/screens/components/sidenav/usage/images/sidenav_responsive.png b/apps/website/screens/components/sidenav/usage/images/sidenav_responsive.png deleted file mode 100644 index 9a0545c702f5b36077a482ab7df2d16011d61f1c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3467 zcmeAS@N?(olHy`uVBq!ia0y~yU~XYxU_8UY1{CSNl_m_NI14-?iy0WWfoyJJMuu5) zB!Gg9#X;^)4C~IxyaaMs(j9#r85lP9bN@+X1)8Mb>Eakt!T9#BVYci|$%co@>&3Fo zZ-1%1>dpuVtCc+e;=oC2X)g z=Hxr&>Y{TAZVJ)UE9WoYGqp?kZso=DeK#$EKo)52lNf0rslw^Rz|f%K$icuMpvu9> zz_5r#k%7TsiUJD*Lx&L1Hw=MI0t^faUII)E3@)RJM?(W8ZR}1y{paWRdTEA$kALUa zS=W7?{od`We*M38M)8k_>;IeTHE%xd8hh>LZL?_cmjC}A+A}j~)qVfFo}D2^RCzJQ zscXgEjj8{B_1pI~?R_23%W&(S{C@fJeZP-t{QhnK-)P^zo7W$Isb9`)mzJKMzNh|w zUCgx2o4;QTpLaas*^eI;Yp$LeNZ{NPTU0of% zzV4Twjjd=)&7GU?PuX{5xxYzh}Ase7+wcb8NeSIc!7dIk|oEHWdaBii^K#0Q1>_Fw5WiXHQSp zxBv0yO`@!wYI?sCFjMBp@;{9cP4AZivF8HqtNSpsy~vIoDl&C*`}^we?|6UQ0UEof z446exGHN*oV}thA?c2@${QcQ$&YU}UjzMoeFlVp3@^0O6!G_gIDI#b(NGS(a+yxdF zf1Z5!P!O}Uxw)Bf{$!xh4aM&6?#y02J%oyjPq#Q37%ZOKHeBHVmOvKU_wTn~aO8vr z31!co8FCB^=VayN`utx$c#v?wOb}RH6})@#BEz9`Vj$L1ZK)AZ#W}HnEKngg=l1>k z@&S0mAV-pwp`q1m_SqY0+w%u&g}b z1WZp6!Wb!Ir!%mm<<2#mz45Hh-iP4AR>$Q0=LS80J0y-jN-gCxmOn(7W14DwMcXWg_D3-Z>FPkLz zV#L!^K48e`Y`K|p%xv?Qwr)@ju;GHudFE@Faq|xB&1u^ Date: Fri, 13 Jun 2025 13:02:01 +0200 Subject: [PATCH 5/6] Adding small fixes to group title color and diveder inset --- packages/lib/src/sidenav/Sidenav.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx index 7610d3a8b9..5a56a1fd14 100644 --- a/packages/lib/src/sidenav/Sidenav.tsx +++ b/packages/lib/src/sidenav/Sidenav.tsx @@ -13,6 +13,7 @@ import SidenavPropsType, { } from "./types"; import { scrollbarStyles } from "../styles/scroll"; import DxcDivider from "../divider/Divider"; +import DxcInset from "../inset/Inset"; const SidenavContainer = styled.div` box-sizing: border-box; @@ -55,6 +56,7 @@ const SidenavGroupTitle = styled.span` font-family: var(--typography-font-family); font-size: var(--typography-label-m); font-weight: var(--typography-label-semibold); + color: var(--color-fg-neutral-dark); span::before { font-size: var(--height-xxs); } @@ -150,7 +152,9 @@ const Title = ({ children }: SidenavTitlePropsType): JSX.Element => ( <> {children} - + + + ); From 0e1cab07f71a1779c3569e81aea887cca14991fc Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 13 Jun 2025 13:26:40 +0200 Subject: [PATCH 6/6] hiding last divider --- packages/lib/src/sidenav/Sidenav.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx index 5a56a1fd14..0f9407cbd7 100644 --- a/packages/lib/src/sidenav/Sidenav.tsx +++ b/packages/lib/src/sidenav/Sidenav.tsx @@ -47,6 +47,17 @@ const SidenavGroup = styled.div` } `; +const SectionContainer = styled.div` + display: flex; + flex-direction: column; + gap: var(--spacing-gap-ml); + &:last-child { + hr { + display: none; + } + } +`; + const SidenavGroupTitle = styled.span` box-sizing: border-box; display: flex; @@ -150,12 +161,12 @@ const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => { const Title = ({ children }: SidenavTitlePropsType): JSX.Element => {children}; const Section = ({ children }: SidenavSectionPropsType): JSX.Element => ( - <> + {children} - + ); const Group = ({ title, collapsable = false, icon, children }: SidenavGroupPropsType): JSX.Element => {