Skip to content

Fix TOC hierarchy on floating nav #556

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
Dec 21, 2022
Merged

Fix TOC hierarchy on floating nav #556

Show file tree
Hide file tree
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
5 changes: 5 additions & 0 deletions components/utilities/floatingNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const useHeadingsData = (slug) => {
)
);

// Remove the first heading here, since we don't want to show the main title on the TOC
headingElements.shift();

const newNestedHeadings = getNestedHeadings(headingElements);
setNestedHeadings(newNestedHeadings);
}, [slug]);
Expand All @@ -25,6 +28,7 @@ const getNestedHeadings = (headingElements) => {

for (const index in headingElements) {
const ele = headingElements[index];

if (ele.getElementsByTagName === undefined) {
continue;
}
Expand Down Expand Up @@ -128,6 +132,7 @@ const Headings = ({ headings, activeId }) => {
// For example, we could have [H1, H2, H3] but also [H1, H4],
// and we want the indentation to acommodate for these situations.
const uniqueHierarchies = [...new Set(headings.map((item) => item.level))];

const sortedHeadings = uniqueHierarchies.map((hierarchy, index) =>
headings.filter((heading) => {
if (heading.level === hierarchy) {
Expand Down
13 changes: 6 additions & 7 deletions components/utilities/floatingNav.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.List {
@apply sticky top-24 m-0 list-none overflow-y-auto overflow-x-hidden;
@apply sticky top-24 m-0 pl-6 list-none overflow-y-auto overflow-x-hidden;
max-height: calc(100vh - (6em * 2));
}

Expand All @@ -21,15 +21,10 @@

/* Contents Title */
.ListTitle {
@apply pt-6 pl-6 uppercase font-semibold tracking-widest;
@apply pt-6 uppercase font-semibold tracking-widest;
@apply text-gray-60 !important;
}

/* Hide the first h1 on the page, as it's the page title */
.List li:nth-child(2) {
@apply hidden;
}

/* Styles for the active item on the floating nav */
:global(.dark) .activeLink {
@apply text-white !important;
Expand All @@ -45,6 +40,10 @@
}

/* Paddings for different title hierarchies */
.List li[data-hierarchy="0"] {
@apply pl-0;
}

.List li[data-hierarchy="1"] {
@apply pl-6;
}
Expand Down