feat: Introduced Right Subsections for Seamless Topic Access #99
Conversation
|
@aaronbrethorst Sir I have implemented the right subsections. Please review it and suggest if any changes required .. |
|
@aaronbrethorst Done sir. |
frontend/javascript/code_snippets.js
Outdated
| @@ -33,6 +33,32 @@ export function copyHeadingDirectLinks() { | |||
| }); | |||
| } | |||
|
|
|||
| export function setupSidebarItemEventListeners() { | |||
|
@aaronbrethorst Please review it and suggest if any changes required .. |
| sidebar.style.height = '100%'; | ||
|
|
||
| function appendSidebarItem(textContent, tagName) { | ||
| const newItem = document.createElement('p'); |
There was a problem hiding this comment.
these should be anchor tags so that they are accessible. That would have the added advantage that you then don't need to apply custom colors on mouseenter and mouseleave.
| const h2Elements = document.querySelectorAll('h2'); | ||
| const sidebar = document.querySelector('.sidebar'); | ||
|
|
||
| sidebar.style.position = 'fixed'; |
There was a problem hiding this comment.
these styles should all be expressed as tailwind classes in the HTML
|
|
||
| export function setupSidebar() { | ||
| const h1Elements = document.querySelectorAll('h1'); | ||
| const h2Elements = document.querySelectorAll('h2'); |
There was a problem hiding this comment.
changing this line to document.querySelectorAll('article h2') would mean you can get rid of the counting of categories down below. That also future-proofs your changes in case the number of h2 tags in the navigation panel changes. you can't trust that the number of elements on the page will remain fixed. and if you have to for some reason you have to leave a comment explaining your decision
| const newItem = document.createElement('p'); | ||
| newItem.textContent = textContent; | ||
| if (tagName === 'h1') { | ||
| newItem.classList.add('sidebar-item'); |
There was a problem hiding this comment.
add() can take multiple arguments.
Description: Added the appropriate right subsection where all the topics of the pages are listed, allowing users to easily navigate through different topics.
Issue fixed: #75
Changes done:
Screenshots/Videos
✅️ By submitting this PR, I have verified the following