Skip to content
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

Auto select section in sideNav #76

Open
wants to merge 5 commits into
base: next
Choose a base branch
from
+98 −75
Open

Auto select section in sideNav #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d4e0c51
remove underline from footer nav items
nickbristow Dec 10, 2024
566c775
auto change side nav current
nickbristow Dec 11, 2024
5350ae4
Merge branch 'next' of github.com:CDCgov/phdi-site into sidenav-auto
nickbristow Dec 11, 2024
36dcd59
debug
nickbristow Dec 11, 2024
26fa251
adjust values
nickbristow Dec 11, 2024
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
88 changes: 88 additions & 0 deletions src/app/components/SideNav/SideNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { useState, useEffect, SetStateAction } from 'react';
import { SideNav as UswdsSideNav } from '@trussworks/react-uswds';
import classNames from 'classnames';

interface Section {
title: string;
id: string;
}

interface SideNavProps {
sections: Section[];
}

export const SideNav = ({ sections }: SideNavProps) => {
const [selectedHash, setSelectedHash] = useState(`#${sections[0].id}`);

useEffect(() => {
let currentSection = '';

const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const newSection = `#${entry.target.id}`;
if (currentSection !== newSection) {
currentSection = newSection;
setSelectedHash(newSection);
}
}
});
},
{
rootMargin: '-30% 0px -60% 0px',
threshold: 0,
},
);

sections.forEach(({ id }) => {
const element = document.getElementById(id);
if (element) observer.observe(element);
});

return () => {
sections.forEach(({ id }) => {
const element = document.getElementById(id);
if (element) observer.unobserve(element);
});
};
}, [sections]);

return (
<>
<UswdsSideNav
items={sections.map(({ title, id }) => (
<NavItem
title={title}
id={id}
key={id}
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>
))}
/>
</>
);
};

interface NavItemProps {
title: string;
id: string;
selectedHash: string;
setSelectedHash: (value: SetStateAction<string>) => void;
}
function NavItem({ title, id, selectedHash, setSelectedHash }: NavItemProps) {
const itemHash = `#${id}`;
return (
<a
href={itemHash}
key={id}
className={classNames({
'usa-current': itemHash === selectedHash,
})}
onClick={() => setSelectedHash(itemHash)}
>
{title}
</a>
);
}
85 changes: 10 additions & 75 deletions src/app/products/ecr-viewer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ import {
ProcessListHeading,
Accordion,
Link,
SideNav,
} from '@trussworks/react-uswds';
import classNames from 'classnames';
import { SideNav } from '@/app/components/SideNav/SideNav';
import Image from 'next/image';
import { SetStateAction, useState } from 'react';
import './styles.scss';

export default function EcrViewer() {
Expand Down Expand Up @@ -554,78 +552,15 @@ export default function EcrViewer() {
}

function Navigation() {
const [selectedHash, setSelectedHash] = useState('#overview');

return (
<SideNav
items={[
<NavItem
title="Overview"
id="overview"
key="overview"
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>,
<NavItem
title="Product features"
id="product-features"
key="product-features"
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>,
<NavItem
title="How it works"
id="how-it-works"
key="how-it-works"
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>,
<NavItem
title="Getting started"
id="getting-started"
key="getting-started"
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>,
<NavItem
title="Technical resources"
id="technical-resources"
key="technical-resources"
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>,
<NavItem
title="FAQs"
id="faqs"
key="faqs"
selectedHash={selectedHash}
setSelectedHash={setSelectedHash}
/>,
]}
/>
);
}

interface NavItemProps {
title: string;
id: string;
selectedHash: string;
setSelectedHash: (value: SetStateAction<string>) => void;
}
function NavItem({ title, id, selectedHash, setSelectedHash }: NavItemProps) {
const itemHash = `#${id}`;
return (
<a
href={itemHash}
key={id}
className={classNames({
'usa-current': itemHash === selectedHash,
})}
onClick={() => setSelectedHash(itemHash)}
>
{title}
</a>
);
const sections = [
{ title: 'Overview', id: 'overview' },
{ title: 'Product features', id: 'product-features' },
{ title: 'How it works', id: 'how-it-works' },
{ title: 'Getting started', id: 'getting-started' },
{ title: 'Technical resources', id: 'technical-resources' },
{ title: 'FAQs', id: 'faqs' },
];
return <SideNav sections={sections} />;
}

interface GithubNavProps {
Expand Down
Loading