Add sticky menu-item in TOC

ekaterinburgdev · Dec 21, 2023 · 5042393 · 5042393 · ekbdev · Dec 21, 2023
1 parent c37ef48
commit 5042393
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/components/TableOfContents/TableOfContents.jsx b/components/TableOfContents/TableOfContents.jsx
@@ -72,27 +72,29 @@ function TableOfContents({
                     <span className={styles.linkNumber}>{order}.&nbsp;</span>
                     {tUI(title)}
                 </Link>
+
                 {currentPageUrl[1] && currentPageUrl[1] === url && anchorLinks.length > 0 && (
-                    <hr className={styles.separator} />
+                    <ul className={styles.innerlinkContainerList}>
+                        {anchorLinks.map((anchor) => (
+                            <li
+                                className={cn(styles.innerlinkContainerListItem, {
+                                    [styles.innerlinkContainerListItem2Level]:
+                                        anchor.type === undefined,
+                                    [styles.innerlinkContainerListItem3Level]:
+                                        anchor.type === 'heading_2',
+                                })}
+                                key={anchor.id}
+                            >
+                                <InnerLink
+                                    anchor={anchor}
+                                    baseState={isOpen}
+                                    setState={setIsOpen}
+                                />
+                            </li>
+                        ))}
+                    </ul>
                 )}
             </li>
-            {currentPageUrl[1] && currentPageUrl[1] === url && anchorLinks.length > 0 && (
-                <ul className={styles.innerlinkContainerList}>
-                    {anchorLinks.map((anchor) => (
-                        <li
-                            className={cn(styles.innerlinkContainerListItem, {
-                                [styles.innerlinkContainerListItem2Level]:
-                                    anchor.type === undefined,
-                                [styles.innerlinkContainerListItem3Level]:
-                                    anchor.type === 'heading_2',
-                            })}
-                            key={anchor.id}
-                        >
-                            <InnerLink anchor={anchor} baseState={isOpen} setState={setIsOpen} />
-                        </li>
-                    ))}
-                </ul>
-            )}
         </Fragment>
     )
 

diff --git a/components/TableOfContents/TableOfContents.module.css b/components/TableOfContents/TableOfContents.module.css
@@ -86,6 +86,7 @@ html:has(.open) {
 .tableOfContentsLink:not(:only-child) {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    border-bottom: 1px solid hsl(var(--color-hsl) / 20%);
 }
 
 @media (hover: hover) {
@@ -192,6 +193,32 @@ html:has(.open) {
     list-style: none;
 }
 
+.active {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.active::before,
+.active::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+}
+
+.active::before {
+    background: var(--color-bg-light);
+}
+
+.active::after {
+    background-color: var(--color-bg-dark);
+}
+
 .active,
 .active:hover,
 .innerlinkContainerList {
@@ -200,14 +227,6 @@ html:has(.open) {
     background-color: var(--color-bg-dark);
 }
 
-.separator {
-    height: 1px;
-    margin: 0;
-    border: 0;
-    background: var(--color);
-    opacity: 0.2;
-}
-
 .TableOfContents__aside {
     display: flex;
 }