sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-04-27 21:06:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix navigation and table of contents highlighting issues (#169)

Browse Source
This commit is contained in:
Eduard Gert
2024-03-15 16:33:03 +01:00
committed by GitHub
parent a7d0a1bbc8
commit 6a97841307
3 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout.jsx
View File

@@ -103,7 +103,7 @@ function useTableOfContents(tableOfContents) {
if (tableOfContents.length === 0) return if (tableOfContents.length === 0) return
let headings = getHeadings(tableOfContents) let headings = getHeadings(tableOfContents)
function onScroll() { function onScroll() {
let top = window.scrollY let top = window.scrollY + 10;
let current = headings[0]?.id let current = headings[0]?.id
for (let heading of headings) { for (let heading of headings) {
if (top >= heading?.top) { if (top >= heading?.top) {

6
src/components/NavigationDocs.jsx
View File

@@ -217,10 +217,7 @@ export const docsNavigation = [
const [isOpen, setIsOpen] = useState(group.isOpen ? group.isOpen :!hasChildren); const [isOpen, setIsOpen] = useState(group.isOpen ? group.isOpen :!hasChildren);
const [, setActiveHighlight] = useNavigationState(); const [, setActiveHighlight] = useNavigationState();
return ( return (
<li className={clsx('relative', className, hasChildren ? "" : "mt-6")}> <li className={clsx('relative', className, hasChildren ? "" : "mt-6")}>
<motion.h2 <motion.h2
layout={"size"} layout={"size"}
@@ -231,13 +228,14 @@ export const docsNavigation = [
onClick={() => { onClick={() => {
setIsOpen(!isOpen) setIsOpen(!isOpen)
if(!isOpen) { if(!isOpen) {
router.push(group.links[0].href) if(!isActiveGroup) router.push(group.links[0].href)
setActiveHighlight() setActiveHighlight()
}else { }else {
setActiveHighlight(group.title) setActiveHighlight(group.title)
} }
}} }}
data-nb-link={group.title} data-nb-link={group.title}
data-nb-active={hasChildren && isActiveGroup ? "1" : "0"}
> >
{group.title} {group.title}
{hasChildren && <ChevronDownIcon className={clsx("fill-zinc-700 group-hover:fill-zinc-900 dark:fill-zinc-300 dark:group-hover:fill-white","transition", isOpen ? "transform rotate-180" : "")} size={10} />} {hasChildren && <ChevronDownIcon className={clsx("fill-zinc-700 group-hover:fill-zinc-900 dark:fill-zinc-300 dark:group-hover:fill-white","transition", isOpen ? "transform rotate-180" : "")} size={10} />}

5
src/components/NavigationState.jsx
View File

@@ -18,8 +18,9 @@ export function NavigationStateProvider({ children,index }) {
}); });
links.shift(); links.shift();
const activeGroupTitle = groupTitle ? groupTitle : document.querySelector(`.outer-wrapper-${index} [data-nb-active="1"]`)?.getAttribute('data-nb-link');
const activeIndex = links.findIndex((link) => link === "1"); const activeIndex = links.findIndex((link) => link === "1");
const activeGroupIndex = links.findIndex((link) => link === groupTitle); const activeGroupIndex = links.findIndex((link) => link === activeGroupTitle);
if(activeGroupIndex !== -1 && activeIndex === -1){ if(activeGroupIndex !== -1 && activeIndex === -1){
setActiveIndex(activeGroupIndex); setActiveIndex(activeGroupIndex);
@@ -30,7 +31,7 @@ export function NavigationStateProvider({ children,index }) {
} }
useEffect(() => { useEffect(() => {
setActiveHighlight(); setActiveHighlight().then();
}, [router.pathname]); }, [router.pathname]);
return ( return (