Skip to content

Commit f380d3e

Browse files
GomezIvannGomezIvann
authored andcommitted
Updating Sidenav examples in the Theme Builder
1 parent afb52ea commit f380d3e

File tree

1 file changed

+56
-16
lines changed
  • docs/src/pages/themeBuilder/components/previews

1 file changed

+56
-16
lines changed

docs/src/pages/themeBuilder/components/previews/Sidenav.jsx

Lines changed: 56 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,94 @@ import Mode from "../Mode";
66

77
const SideNav = () => {
88
return (
9-
<SideNavContainer>
9+
<SidenavContainer>
1010
<Mode text="Default">
1111
<DxcSidenav title={<DxcSidenav.Title>My sidenav</DxcSidenav.Title>}>
1212
<DxcSidenav.Section>
1313
<p>Lorem ipsum</p>
1414
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
1515
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
16-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
17-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
1816
<DxcSidenav.Group title="Group title" collapsable>
1917
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
2018
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
2119
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
22-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
23-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
2420
</DxcSidenav.Group>
2521
<DxcSidenav.Group title="Group title" collapsable>
2622
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
2723
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
28-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
29-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
30-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
3124
</DxcSidenav.Group>
3225
</DxcSidenav.Section>
33-
3426
<DxcSidenav.Section>
3527
<p>Lorem ipsum</p>
3628
<DxcSidenav.Group title="Group title">
3729
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
3830
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
3931
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
4032
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
41-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
4233
</DxcSidenav.Group>
4334
<DxcSidenav.Group title="Group title" collapsable>
4435
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
45-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
46-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
47-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
48-
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
4936
</DxcSidenav.Group>
5037
</DxcSidenav.Section>
5138
</DxcSidenav>
5239
</Mode>
53-
</SideNavContainer>
40+
<Mode text="With scroll">
41+
<SidenavWithScroll>
42+
<DxcSidenav title={<DxcSidenav.Title>My sidenav</DxcSidenav.Title>}>
43+
<DxcSidenav.Section>
44+
<p>Lorem ipsum</p>
45+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
46+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
47+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
48+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
49+
<DxcSidenav.Group title="Group title" collapsable>
50+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
51+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
52+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
53+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
54+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
55+
</DxcSidenav.Group>
56+
<DxcSidenav.Group title="Group title" collapsable>
57+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
58+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
59+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
60+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
61+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
62+
</DxcSidenav.Group>
63+
</DxcSidenav.Section>
64+
<DxcSidenav.Section>
65+
<p>Lorem ipsum</p>
66+
<DxcSidenav.Group title="Group title">
67+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
68+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
69+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
70+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
71+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
72+
</DxcSidenav.Group>
73+
<DxcSidenav.Group title="Group title" collapsable>
74+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
75+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
76+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
77+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
78+
<DxcSidenav.Link href="#">Lorem ipsum</DxcSidenav.Link>
79+
</DxcSidenav.Group>
80+
</DxcSidenav.Section>
81+
</DxcSidenav>
82+
</SidenavWithScroll>
83+
</Mode>
84+
</SidenavContainer>
5485
);
5586
};
5687

57-
const SideNavContainer = styled.div``;
88+
const SidenavContainer = styled.div`
89+
display: flex;
90+
flex-direction: column;
91+
gap: 20px;
92+
`;
93+
94+
const SidenavWithScroll = styled.div`
95+
height: 500px;
96+
margin-bottom: 50px;
97+
`;
5898

5999
export default SideNav;

0 commit comments

Comments
 (0)