Skip to content

Sidenav redesign #2235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 8 commits into from
Jun 13, 2025
Merged

Sidenav redesign #2235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e01118
Updated implementation with tokens
May 28, 2025
7df808b
Removed no longer needed Bleeds
May 28, 2025
dc92544
Fixed styles
May 29, 2025
0cd7110
Added documentation for Sidenav
May 29, 2025
f8ee816
Merge branch 'master' into Mil4n0r/tokens-sidenav
Mil4n0r May 29, 2025
e81c1f3
Merge branch 'master' into Mil4n0r/tokens-sidenav
Jialecl Jun 13, 2025
1d7449b
Adding small fixes to group title color and diveder inset
Jialecl Jun 13, 2025
0e1cab0
hiding last divider
Jialecl Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/sidenav/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 10 additions & 14 deletions apps/website/pages/components/sidenav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
21 changes: 0 additions & 21 deletions apps/website/pages/components/sidenav/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/sidenav/usage.tsx
View file
Open in desktop

This file was deleted.

9 changes: 3 additions & 6 deletions apps/website/screens/components/sidenav/SidenavPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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{" "}
Expand Down
Loading