Skip to content

fix(JumpLinks): clean up demo in a drawer #8182

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
merged 1 commit into from
Oct 14, 2022
Merged

fix(JumpLinks): clean up demo in a drawer #8182

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
104 changes: 55 additions & 49 deletions packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
JumpLinksItem,
JumpLinksList,
PageSection,
PageSectionVariants,
Sidebar,
SidebarContent,
SidebarPanel,
Expand All @@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {

React.useEffect(() => {
const masthead = document.getElementsByClassName('pf-c-masthead')[0];
const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
const drawerToggleSection = document.getElementById('drawer-toggle');

getResizeObserver(masthead, () => {
setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
Expand Down Expand Up @@ -61,60 +62,65 @@ export const JumpLinksWithDrawer = () => {
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
<Drawer isExpanded={isExpanded}>
<DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
<DrawerContentBody hasPadding>
<DrawerContentBody>
<Sidebar>
<SidebarPanel variant="sticky">
<JumpLinks
isVertical={true}
label="Jump to section"
scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
offset={offsetHeight}
expandable={{ default: 'expandable', md: 'nonExpandable' }}
>
{headings.map(heading => (
<JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
{`${heading} section`}
<JumpLinksList></JumpLinksList>
</JumpLinksItem>
))}
</JumpLinks>
<PageSection variant={PageSectionVariants.light}>
<JumpLinks
isVertical={true}
label="Jump to section"
scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
offset={offsetHeight}
expandable={{ default: 'expandable', md: 'nonExpandable' }}
>
{headings.map(heading => (
<JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
{`${heading} section`}
<JumpLinksList></JumpLinksList>
</JumpLinksItem>
))}
</JumpLinks>
</PageSection>
</SidebarPanel>
<SidebarContent>
<PageSection sticky="top" variant="light">
<PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }} variant="light">
<Button onClick={onToggleClick}>Toggle drawer</Button>
</PageSection>
<TextContent>
{headings.map(heading => (
<div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
<h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
{`${heading} section`}
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim
purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel.
Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc
viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit,
tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus,
vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper.
Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla.
Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros
pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a
accumsan. Nam pretium vitae leo vitae rhoncus.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
))}
</TextContent>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
{headings.map(heading => (
<div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
<h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
{`${heading} section`}
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper,
dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus
efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut
vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac
accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in.
Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae
ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur
porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec
augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus
porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
</p>
</div>
))}
</TextContent>
</PageSection>
</SidebarContent>
</Sidebar>
</DrawerContentBody>
Expand Down